/**
 * Homepage section builder — the sections' styles (inc/home-builder.php,
 * template-parts/home-sections/*.php). Loaded by inc/enqueue.php on the front
 * page only when the builder renders it, after home.css and home-overrides.css.
 */

/* The spacer front-page-builder.php puts between two sections that bring no
   margin of their own: one showcase gutter. */
.lindex-home--builder .lindex-home__gap{height:var(--lindex-showcase-gutter-y,clamp(24px,4vw,48px));}

/* =============================================================================
   Hero video (template-parts/home-sections/hero-video.php)
   ============================================================================ */
.cb-hs-hero__media{
	--cb-hs-vid-w:min(1835px,100vw);
	position:relative;
	max-width:1835px;
	width:100%;
	height:calc(var(--cb-hs-vid-w) / 2);
	margin:var(--lindex-showcase-gutter-y,clamp(24px,4vw,48px)) auto 0;
	overflow:hidden;
	background:#efe7e0;
}
@media (max-width:768px){.cb-hs-hero__media--mobile-cut{height:calc(var(--cb-hs-vid-w) * 5 / 4);}}
.cb-hs-hero__media video,
.cb-hs-hero__poster img{
	position:absolute;top:50%;left:50%;
	width:calc(100% + 2px);height:calc(100% + 2px);
	object-fit:cover;object-position:var(--cb-hs-pos,50% 50%);
	transform:translate(-50%,-50%);display:block;
}
@media (max-width:768px){
	.cb-hs-hero__media video,
	.cb-hs-hero__poster img{object-position:var(--cb-hs-pos-m,50% 50%);}
}
/* The video sits over the poster, hidden until it really plays. */
.cb-hs-hero__media video{opacity:0;transition:opacity .4s ease;}
.cb-hs-hero__media.is-playing video{opacity:1;}
.cb-hs-hero__pause{
	position:absolute;right:16px;bottom:16px;z-index:2;
	width:40px;height:40px;border-radius:50%;border:0;
	background:rgba(255,255,255,.85);color:#1a1a1a;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
}
.cb-hs-hero__pause[hidden]{display:none;}
.cb-hs-hero__pause svg{width:14px;height:14px;fill:currentColor;}
.cb-hs-hero__pause .cb-play{display:none;}
.cb-hs-hero__pause[aria-pressed="true"] .cb-play{display:block;}
.cb-hs-hero__pause[aria-pressed="true"] .cb-pause{display:none;}
.cb-hs-hero__placeholder{
	position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
	font-family:var(--cb-font-body,sans-serif);font-size:15px;color:#6b5e55;text-align:center;padding:1rem;
}
.cb-hs-hero__caption{
	max-width:1835px;margin:0 auto;text-align:center;color:#1a1a1a;
	padding:clamp(24px,3vw,44px) var(--lindex-showcase-gutter-x,clamp(20px,4vw,64px)) 0;
}
.cb-hs-hero__title{
	margin:0;font-family:var(--cb-font-display,serif);font-weight:400;
	font-size:clamp(28px,3.4vw,52px);line-height:1.1;color:inherit;
}
/* The button is the homepage's outlined pill (home.css), as on the banners; only
   the space above it is the hero's own. */
.cb-hs-hero__caption .lindex-showcase__buttons{margin-top:clamp(16px,1.6vw,24px);}

/* =============================================================================
   Wide banner + Halloween banner (template-parts/home-sections/wide-banner.php)
   ============================================================================ */
/* 60/40, as the autumn row. minmax(0,…) stops the full-size photo inflating its track. */
.cb-hs-wide .lindex-showcase{grid-template-columns:minmax(0,3fr) minmax(0,2fr);}
.cb-hs-wide .lindex-showcase--image-right{grid-template-columns:minmax(0,2fr) minmax(0,3fr);}
@media (max-width:900px){.cb-hs-wide .lindex-showcase,.cb-hs-wide .lindex-showcase--image-right{grid-template-columns:1fr;}}
.cb-hs-wide .lindex-showcase__buttons{justify-content:center;}
.cb-hs-wide .lindex-showcase__media-link{position:absolute;inset:0;z-index:1;}
/* One fixed shape for every banner: the campaign photos are portrait, so left to
   their own height these rows run ~1000px tall. The photo is cropped to fit; the
   focus field picks what stays. */
.cb-hs-wide .lindex-showcase__media img{object-position:var(--cb-hs-pos,50% 25%);}
@media (min-width:901px){
	.cb-hs-wide .lindex-showcase{min-height:0;}
	.cb-hs-wide .lindex-showcase__media{aspect-ratio:4/3;min-height:0;}
	.cb-hs-wide .lindex-showcase__media picture,
	.cb-hs-wide .lindex-showcase__media img{position:absolute;inset:0;}
}
/* "Shiko setin" pill on the photo. */
.cb-hs-wide--stl .lindex-showcase__media-link::after{
	content:var(--cb-hs-stl-label);
	position:absolute;left:16px;bottom:16px;
	padding:.6em 1.1em;border-radius:999px;background:rgba(255,255,255,.92);color:#1a1a1a;
	font-family:var(--cb-font-body,sans-serif);font-size:14px;line-height:1;
}
.cb-hs-wide--stl .lindex-showcase__media-link:hover::after{background:#fff;}
/* Keyboard route to the photo link (which is aria-hidden): shown on focus only. */
.cb-hs-stl-skip{position:absolute;left:-9999px;}
.cb-hs-stl-skip:focus{position:static;display:inline-block;margin:1rem auto 0;}

/* =============================================================================
   Two tiles (template-parts/home-sections/tiles.php)
   ============================================================================ */
.cb-hs-tiles{
	max-width:var(--lindex-showcase-max-w,1440px);margin:0 auto;
	padding:0 var(--lindex-showcase-gutter-x,clamp(20px,4vw,64px));
}
.cb-hs-tiles__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.5vw,24px);}
.cb-hs-tiles__tile{
	display:flex;flex-direction:column;text-decoration:none;color:inherit;
	background:#efe7e0;overflow:hidden;border-radius:var(--lindex-showcase-radius,20px);
}
.cb-hs-tiles__media{position:relative;display:block;aspect-ratio:11/10;overflow:hidden;background:#e7ded6;}
.cb-hs-tiles__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.cb-hs-tiles__tile:hover .cb-hs-tiles__media img{transform:scale(1.03);}
.cb-hs-tiles__caption{text-align:center;padding:clamp(1.1rem,2vw,1.6rem) 1rem clamp(1.25rem,2.2vw,1.85rem);}
.cb-hs-tiles__title{
	display:block;font-family:var(--cb-font-display,serif);font-weight:400;
	font-size:clamp(1.1rem,1.6vw,1.375rem);line-height:1.2;color:#1a1a1a;
}
.cb-hs-tiles__links{display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem 1.5rem;margin-top:.6rem;}
.cb-hs-tiles__link{
	display:inline-block;font-family:var(--cb-font-body,sans-serif);font-size:clamp(.9rem,1.1vw,1rem);
	color:#1a1a1a;text-decoration:underline;text-underline-offset:3px;
}
.cb-hs-tiles__tile > .cb-hs-tiles__caption .cb-hs-tiles__link{margin-top:.6rem;}
a.cb-hs-tiles__tile:hover .cb-hs-tiles__link,
.cb-hs-tiles__links a:hover .cb-hs-tiles__link{text-decoration-thickness:2px;}
@media (max-width:640px){
	.cb-hs-tiles__grid{grid-template-columns:1fr;gap:16px;}
	.cb-hs-tiles__media{aspect-ratio:1/1;}
}

/* =============================================================================
   Breast self-check banner (template-parts/home-sections/breast-banner.php)
   ============================================================================ */
.cb-hs-breast{
	max-width:var(--lindex-showcase-max-w,1440px);margin:0 auto;
	padding:0 var(--lindex-showcase-gutter-x,clamp(20px,4vw,64px));
}
.cb-hs-breast__inner{
	display:grid;grid-template-columns:1fr;overflow:hidden;
	border-radius:var(--lindex-showcase-radius,20px);background:#f7c9d0;
}
.cb-hs-breast--has-image .cb-hs-breast__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.cb-hs-breast__media{position:relative;min-height:100%;aspect-ratio:4/3;}
.cb-hs-breast__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block;}
.cb-hs-breast__panel{
	display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
	padding:clamp(32px,5vw,72px) clamp(20px,4vw,64px);
}
.cb-hs-breast__title{
	margin:0;max-width:22ch;font-family:var(--cb-font-display,serif);font-weight:400;
	font-size:clamp(26px,3vw,44px);line-height:1.12;color:#b0193e;letter-spacing:.01em;
}
.cb-hs-breast__text{
	margin:1rem 0 0;max-width:42ch;font-family:var(--cb-font-body,sans-serif);
	font-size:clamp(15px,1.2vw,18px);line-height:1.5;color:#4a2a31;
}
.cb-hs-breast__btn{
	display:inline-block;margin-top:1.6rem;padding:.85em 1.8em;border-radius:999px;
	background:#fff;color:#1a1a1a;text-decoration:none;border:1px solid transparent;
	font-family:var(--cb-font-body,sans-serif);font-size:16px;line-height:1;
}
/* Label stays black in every state (the theme's a:hover and focus ring are gold).
   Scoped to this button only. */
.cb-hs-breast__btn:link,.cb-hs-breast__btn:visited,.cb-hs-breast__btn:hover,
.cb-hs-breast__btn:focus,.cb-hs-breast__btn:active{color:#1a1a1a;}
.cb-hs-breast__btn:hover{background:#f2f2f2;border-color:#1a1a1a;}
.cb-hs-breast__btn:focus{outline:none;}
.cb-hs-breast__btn:focus-visible{outline:2px solid #1a1a1a;outline-offset:2px;}
@media (max-width:900px){
	.cb-hs-breast--has-image .cb-hs-breast__inner{grid-template-columns:1fr;}
}