/* [homepage_highlight] / [featured_event]: the homepage section as one card. Wide by default (image beside the
   text); layout="card" stacks it. The colours and radius are custom properties on the card, so a theme can retune
   it in a few lines, and the body text inherits the theme's font. Lora is kept for the title and the date tile. */
.swe-feature{
    --swe-brand:#660E3D;--swe-brand-deep:#43082a;--swe-accent:#8a6a1c;--swe-ink:#1a1216;--swe-muted:#5b5158;
    --swe-line:#e9e2e5;--swe-chip:#f6e9ef;--swe-surface:#ffffff;--swe-radius:16px;
    box-sizing:border-box;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--swe-surface);
    /* The hairline is an inset shadow, not a border: the picture (or the maroon panel) paints over it, so the card
       shows no pale edge against a dark hero, while the white part keeps its outline on a white page. */
    border:0;box-shadow:inset 0 0 0 1px var(--swe-line);border-radius:var(--swe-radius);overflow:hidden;
    font-family:inherit;font-size:14px;line-height:1.5;color:var(--swe-ink);-webkit-font-smoothing:antialiased;margin:0 0 24px}
.swe-feature *{box-sizing:border-box}
.swe-feature a{text-decoration:none;color:inherit}
.swe-i{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.swe-feature-media{position:relative;display:block;min-height:220px;background:linear-gradient(135deg,#660E3D,#8B1A55 55%,#D4A843);overflow:hidden}
.swe-feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.swe-feature-noimg .swe-feature-media::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.07'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E")}
.swe-feature-date{position:absolute;left:14px;top:14px;background:#fff;border-radius:10px;padding:6px 10px 5px;text-align:center;min-width:50px;line-height:1;z-index:1;color:var(--swe-brand)}
.swe-feature-date b{display:block;font-family:Lora,Georgia,serif;font-size:20px;font-weight:600}
.swe-feature-date span{display:block;font-size:9.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--swe-muted);margin-top:3px}

.swe-feature-body{padding:22px 26px;display:flex;flex-direction:column;gap:8px;justify-content:center;min-width:0}
.swe-feature-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.swe-feature-eyebrow{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--swe-accent)}
.swe-feature-cat{font-size:11px;font-weight:600;color:var(--swe-brand);background:var(--swe-chip);border-radius:999px;padding:3px 10px;line-height:1.4}
.swe-feature-title{font-family:Lora,Georgia,serif !important;font-size:26px !important;font-weight:600 !important;line-height:1.2 !important;letter-spacing:-.01em !important;margin:0 !important;padding:0 !important;color:var(--swe-ink) !important;text-transform:none !important}
.swe-feature-title a{font:inherit} /* themes that put a font on every element (Elementor kits: * {font-family}) must not restyle the title's link */
.swe-feature-title a:hover{color:var(--swe-brand)}
.swe-feature-meta{list-style:none;margin:0 !important;padding:0 !important;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13.5px;color:var(--swe-muted)}
.swe-feature-meta li{margin:0 !important;padding:0 !important;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.swe-feature-summary{margin:0 !important;font-size:14px;line-height:1.55;color:var(--swe-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.swe-feature-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.swe-feature-btn{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:10px;background:var(--swe-brand);color:#fff !important;font-size:13.5px;font-weight:600;transition:background .15s}
.swe-feature-btn:hover{background:var(--swe-brand-deep)}
.swe-feature-cost{font-size:11px;font-weight:700;color:#1f7a46;background:#e6f6ec;border-radius:999px;padding:4px 10px;line-height:1.4}
.swe-feature-all{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-size:13.5px;font-weight:600;color:var(--swe-brand) !important}
.swe-feature-all:hover{text-decoration:underline}

/* the temple's own message: shown in full */
.swe-feature-custom .swe-feature-media{min-height:200px}
.swe-feature-custom .swe-feature-summary{display:block;overflow:visible}
.swe-feature-custom .swe-feature-summary+.swe-feature-summary{margin-top:-2px !important}

/* layout="card": one stacked card, for a column beside the welcome text or a corner of the hero.
   Doubled selectors: a block theme's constrained layout sets max-width and auto margins on every child
   of the content at the same specificity as a single class, and its stylesheet comes later. */
.swe-feature.swe-feature-card{grid-template-columns:1fr;max-width:400px}
.swe-feature-card .swe-feature-media{min-height:0;aspect-ratio:16/9}
.swe-feature-card .swe-feature-body{padding:16px 18px 18px;gap:7px;justify-content:flex-start}
.swe-feature-card .swe-feature-title{font-size:20px !important}
.swe-feature-card .swe-feature-meta{font-size:13px;gap:4px 12px}
.swe-feature-card .swe-feature-actions{margin-top:4px}
.swe-feature-card .swe-feature-btn{min-height:36px;padding:0 14px;font-size:13px}

/* align="…", within whatever holds the card. A block theme centres every child of the content in a column of
   --wp--style--global--content-size, so "left" and "right" are the edges of that column rather than of the
   full-width container; a classic theme has no such variable and the margin is simply 0. */
.swe-feature.swe-feature-left{margin-right:auto;margin-left:max(0px,calc((100% - var(--wp--style--global--content-size,100%)) / 2)) !important}
.swe-feature.swe-feature-right{margin-left:auto;margin-right:max(0px,calc((100% - var(--wp--style--global--content-size,100%)) / 2)) !important}
.swe-feature.swe-feature-center{margin-left:auto;margin-right:auto}

/* image="no": the text on its own, with the date tile beside the eyebrow */
.swe-feature-textonly{grid-template-columns:1fr}
.swe-feature-textonly .swe-feature-date{position:static;border:1px solid var(--swe-line);padding:5px 8px 4px;min-width:44px}
.swe-feature-textonly .swe-feature-date b{font-size:17px}
.swe-feature-textonly .swe-feature-date span{font-size:9px;margin-top:2px}

@media (max-width:760px){
    .swe-feature{grid-template-columns:1fr}
    .swe-feature-media{min-height:0;aspect-ratio:16/9}
    .swe-feature-body{padding:18px 18px 20px}
    .swe-feature-title{font-size:22px !important}
    .swe-feature-meta li{white-space:normal}
    .swe-feature.swe-feature-card{max-width:none}
}
