/**
 * Feature modules: media_feature, card_grid, the feature_with_cards composite, and the
 * shared sticky monogram band. Namespaced (feature-section / fm- / mf- / cg-).
 */

.feature-section{
	--fm-gold:#b79d60;
	--fm-ground:#21160d;
	--fm-text:#f6f5f3;
	position:relative;
	padding:clamp(72px,12vw,160px) 24px;
	background:var(--fm-ground);
	color:var(--fm-text);
	font-family:'Jost',system-ui,sans-serif;
}
.feature-section *{box-sizing:border-box}
.feature-section--light{ --fm-ground:#f4f1ea; --fm-text:#2b2b2b; }

.fm-wrap{ max-width:1264px; margin:0 auto; }
/* the composite stacks its two halves; separate them with a gap, not a margin */
.feature-with-cards{ display:flex; flex-direction:column; gap:clamp(72px,12vw,160px); }

/* shared gold pill CTA — filled (media_feature) or outline (cards) */
.fm-cta{
	display:inline-flex;align-items:center;justify-content:center;
	padding:16px 32px;border-radius:500px;
	font:400 16px/1.2 'Jost',sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer;
	border:1px solid var(--fm-gold);transition:background .2s ease, color .2s ease, filter .2s ease;
}
.fm-cta--filled{ background:var(--fm-gold);color:var(--fm-ground); }
.fm-cta--filled:hover,.fm-cta--filled:focus-visible{ filter:brightness(1.08); }
.fm-cta--outline{ background:none;color:var(--fm-gold); }
.fm-cta--outline:hover,.fm-cta--outline:focus-visible{ background:var(--fm-gold);color:var(--fm-ground); }

/* ---------- media_feature ---------- */
.mf{ display:flex;align-items:center;gap:clamp(40px,7vw,135px); }
.mf--img-left{ flex-direction:row-reverse; }
.mf__text{ flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding:0 clamp(0px,5vw,112px); }
.mf__heading{
	margin:0;font-family:'Jost',sans-serif;font-weight:400;
	font-size:clamp(30px,4vw,40px);line-height:1.05;letter-spacing:-.03em;color:var(--fm-text);
}
.mf__body{ font-size:16px;line-height:1.6;opacity:.8; }
.mf__body > :first-child{ margin-top:0; }
.mf__body > :last-child{ margin-bottom:0; }
.mf__body a{ color:var(--fm-gold); }

/* arched-top rotating image */
.mf-media{
	position:relative;flex:0 0 auto;width:min(533px,42vw);align-self:stretch;
	min-height:clamp(360px,46vw,681px);overflow:hidden;
	border-radius:50% 50% 0 0 / 38% 38% 0 0;
}
.mf-media__img{
	position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
	opacity:0;transition:opacity .9s ease;
}
.mf-media__img.is-active{ opacity:1; }
/* single image (no rotation): just show it */
.mf-media:not([data-mf-rotator]) .mf-media__img.is-active{ opacity:1; }

/* ---------- card_grid ---------- */
.cg{ display:grid;gap:40px;grid-template-columns:repeat(3,1fr); }
.cg--cols-2{ grid-template-columns:repeat(2,1fr); }
.cg--cols-4{ grid-template-columns:repeat(4,1fr); }
.cg-card{ display:flex;flex-direction:column;gap:24px; }
.cg-card__media{ width:100%;aspect-ratio:395 / 410;overflow:hidden; }
.cg-card__media img{ width:100%;height:100%;object-fit:cover;display:block; }
.cg-card__text{ display:flex;flex-direction:column;align-items:flex-start;gap:24px; }
.cg-card__heading{
	margin:0;font-family:'Jost',sans-serif;font-weight:400;
	font-size:clamp(24px,2.6vw,32px);line-height:1.1;letter-spacing:-.03em;color:var(--fm-text);
}
.cg-card__body{ font-size:16px;line-height:1.6;opacity:.8; }
.cg-card__body > :first-child{ margin-top:0; }
.cg-card__body > :last-child{ margin-bottom:0; }

/* ---------- monogram band (shared crest backdrop across dark sections) ---------- */
/* The crest (.monogram-band__mono) and the content (.monogram-band__content) share ONE grid
   cell, so the crest is STACKED over the content and takes no layout space — no negative
   margins. The crest is position:sticky, pinned at the section's top padding, and confined
   to the band by the sticky constraint (its box is real → it stops at the band's end with no
   overflow:clip). --crest-h keeps the crest's 466:519 aspect ratio. */
.monogram-band{
	display:grid; grid-template-columns:100%;
	position:relative; background:#21160d;
	--crest-h:calc(min(466px,58vw) * 519 / 466);
}
.monogram-band > *{ grid-area:1 / 1; }   /* stack the crest and the content in the same cell */
.monogram-band__mono{
	position:sticky;
	top:clamp(72px,12vw,160px);          /* where it LATCHES, relative to the viewport top */
	margin-top:clamp(72px,12vw,160px);   /* its RESTING offset below the section top — same value, so it's 160px from the top whether resting or stuck */
	align-self:start; justify-self:center;
	width:min(466px,58vw); height:var(--crest-h);
	opacity:.5; z-index:0; pointer-events:none;
}
@supports ((-webkit-mask:url('ghs-monogram.svg')) or (mask:url('ghs-monogram.svg'))){
	.monogram-band__mono{
		background-color:#000000;
		-webkit-mask:url('ghs-monogram.svg') no-repeat center / contain;
		mask:url('ghs-monogram.svg') no-repeat center / contain;
	}
}
.monogram-band__content{ z-index:1; min-width:0; }
/* the band ends at its last content block so the crest stops there, not in trailing padding */
.monogram-band__content > .feature-section:last-child,
.monogram-band__content > .text-feature:last-child{ padding-bottom:0; }
/* sections sit over the crest on the band's shared ground */
.monogram-band__content > .feature-section,
.monogram-band__content > .text-feature{ background:transparent; }
.monogram-band .tf-monogram{ display:none; }   /* the band's crest replaces the inline one */

/* keep html/body from becoming scroll containers so position:sticky works */
html:has(.monogram-band),
body:has(.monogram-band){ overflow-x:clip; }

/* ---------- responsive ---------- */
/* tablet: keep two columns; rein in the media, gap and text padding so the
   arched image stays a side panel instead of a full-bleed tower */
@media (max-width:900px){
	.mf{ gap:clamp(24px,4vw,60px); }
	.mf__text{ padding:0; }
	.mf-media{ width:clamp(300px,40vw,420px);min-height:clamp(300px,44vw,460px); }
	.cg--cols-3,.cg--cols-4{ grid-template-columns:repeat(2,1fr); }
}
/* narrow tablet / large phone: stack; image becomes a centred, height-capped dome */
@media (max-width:760px){
	.mf{ flex-direction:column;align-items:stretch;gap:32px; }
	.mf--img-left{ flex-direction:column; }
	.mf__text{ padding:0;order:2; }
	.mf-media{ width:min(100%,360px);order:1;margin-inline:auto;min-height:0;aspect-ratio:533 / 600;max-height:clamp(320px,52vw,440px); }
}
@media (max-width:600px){
	.cg{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
	.mf-media__img{ transition:none; }
	.fm-cta{ transition:none; }
}