/*
 * Home: Newly Added / Cinephile Corner / Collections ([st_newly_added], [st_cinephile], [st_collections],
 * mu-plugins/st-home-sections.php). Colors = Elementor "ST …" globals, so light/dark follow st-theme.
 * Selectors are prefixed with .st-hs to beat Elementor's ".elementor img" reset and the theme's link colors.
 */
.st-hs { font-family: var(--e-global-typography-text-font-family), "Source Sans Pro", sans-serif; color: var(--e-global-color-sttext); }
.st-hs a { text-decoration: none; }

/* Shared header: title + tagline, "All … →" link on the right at every width */
.st-hs .st-hs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
.st-hs .st-hs-title {
	margin: 0; font-family: "Source Sans Pro", sans-serif; font-size: 25.5px; line-height: 26px; font-weight: 600;
	color: var(--e-global-color-sttitle);
}
.st-hs .st-hs-sub { margin: 6px 0 0; font-size: 15px; line-height: 1.3; color: var(--e-global-color-stmuted); }
.st-hs .st-hs-all {
	flex: none; padding: 4px 0; font-size: 15px; line-height: 1.2; font-weight: 700; white-space: nowrap;
	color: var(--e-global-color-staccent); transition: color .2s;
}
.st-hs .st-hs-all:hover { color: var(--e-global-color-staccenthover); }
.st-hs a:focus-visible { outline: 2px solid var(--e-global-color-staccent); outline-offset: 2px; }

/* Shared bits */
.st-hs .st-hs-img { position: relative; display: block; overflow: hidden; border-radius: 6px; background: var(--e-global-color-stsurface2); }
.st-hs .st-hs-img img {
	display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0;
	transition: transform .4s, filter .25s;
}
.st-hs a:hover .st-hs-img img { transform: scale(1.03); }
.st-hs .st-hs-t { display: block; color: var(--e-global-color-sttitle); transition: color .2s; }
.st-hs a:hover .st-hs-t { color: var(--e-global-color-sthover); }
.st-hs .st-hs-meta {
	display: block; font-size: 13px; line-height: 1.3; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--e-global-color-stmuted);
}

/* 1. Newly Added: feature (2×2) + 8 cards on 6 columns; 4 columns on tablet; feature + rail on mobile */
.st-hs-na-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 15px; }
.st-hs-na-rail { display: contents; }
.st-hs .st-hs-card .st-hs-img { aspect-ratio: 2 / 1; }
.st-hs .st-hs-card .st-hs-t { margin-top: 6px; font-size: 16px; line-height: 1.3; }
.st-hs .st-hs-feat { grid-column: span 2; grid-row: span 2; display: block; }
/* Featured images are 2:1 with text baked in: show them whole, title + date go under the image */
.st-hs .st-hs-feat .st-hs-img { overflow: visible; border-radius: 0; background: none; }
.st-hs .st-hs-feat .st-hs-img img { height: auto; aspect-ratio: 2 / 1; border-radius: 6px; background: var(--e-global-color-stsurface2); }
.st-hs a.st-hs-feat:hover .st-hs-img img { transform: none; filter: brightness(1.1); }
.st-hs .st-hs-badge {
	position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 999px; background: #B8383D; color: #FFFFFF;
	font-size: 12px; line-height: 1; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.st-hs .st-hs-over { display: block; padding-top: 12px; }
.st-hs .st-hs-over .st-hs-t { font-size: 22px; line-height: 1.2; font-weight: 700; }
.st-hs .st-hs-over .st-hs-meta { margin-top: 6px; }

/* 2. Cinephile Corner: lead story + 5-row list */
.st-hs-cc-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; align-items: start; }
.st-hs .st-hs-lead { display: block; }
.st-hs .st-hs-lead .st-hs-img { aspect-ratio: 2 / 1; }
.st-hs .st-hs-lead .st-hs-meta { margin-top: 14px; }
.st-hs .st-hs-lead .st-hs-t { margin-top: 6px; font-size: 28px; line-height: 1.15; font-weight: 700; }
.st-hs .st-hs-ex { display: block; margin-top: 10px; font-size: 17px; line-height: 1.5; color: var(--e-global-color-stmuted); }
.st-hs-list { display: flex; flex-direction: column; }
.st-hs .st-hs-row {
	display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center;
	padding: 14px 0; border-top: 1px solid var(--e-global-color-stborder);
}
.st-hs .st-hs-row:first-child { padding-top: 0; border-top: 0; }
.st-hs .st-hs-row .st-hs-img { aspect-ratio: 2 / 1; }
.st-hs .st-hs-row .st-hs-t { font-size: 17px; line-height: 1.3; font-weight: 600; }
.st-hs .st-hs-row .st-hs-meta { margin-top: 4px; font-size: 12px; }

/* 3. Collections: 3×2 cinematic tiles, title over the image */
.st-hs-col-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.st-hs .st-hs-tile {
	position: relative; display: block; overflow: hidden; aspect-ratio: 2 / 1; border-radius: 8px; background: #111111; isolation: isolate;
}
.st-hs .st-hs-tile img {
	position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; max-width: none;
	object-fit: cover; border-radius: 0; transition: transform .5s;
}
.st-hs .st-hs-tile::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(0deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .55) 38%, rgba(0, 0, 0, 0) 65%);
}
.st-hs .st-hs-tile:hover img { transform: scale(1.04); }
.st-hs .st-hs-tile-in { position: absolute; inset: auto 0 0 0; padding: 18px; }
.st-hs .st-hs-tile .st-hs-meta { color: #E48787; }
.st-hs .st-hs-tile .st-hs-t, .st-hs a.st-hs-tile:hover .st-hs-t { margin-top: 4px; color: #FFFFFF; font-size: 20px; line-height: 1.2; font-weight: 700; }
.st-hs a.st-hs-tile:hover .st-hs-t { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Tablet */
@media (max-width: 1024px) {
	.st-hs-na-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.st-hs-cc-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
	.st-hs .st-hs-row { grid-template-columns: 110px 1fr; gap: 12px; }
	.st-hs .st-hs-lead .st-hs-t { font-size: 24px; }
	.st-hs .st-hs-tile-in { padding: 14px; }
	.st-hs .st-hs-tile .st-hs-t, .st-hs a.st-hs-tile:hover .st-hs-t { font-size: 18px; }
}

/* Mobile: feature + card rail, stacked lead + list, tile rail */
@media (max-width: 767px) {
	.st-hs .st-hs-head { margin-bottom: 14px; }
	.st-hs .st-hs-title { line-height: 30px; }
	.st-hs-na-grid { display: block; }
	.st-hs-na-rail, .st-hs-col-grid {
		display: grid; grid-template-columns: none; grid-auto-flow: column; gap: 12px;
		margin-inline: -15px; padding-inline: 15px; scroll-padding-inline: 15px;
		overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
	}
	.st-hs-na-rail::-webkit-scrollbar, .st-hs-col-grid::-webkit-scrollbar { display: none; }
	.st-hs-na-rail { grid-auto-columns: 44%; margin-top: 16px; }
	.st-hs-col-grid { grid-auto-columns: 80%; }
	.st-hs .st-hs-card, .st-hs .st-hs-tile { scroll-snap-align: start; }
	.st-hs .st-hs-card .st-hs-t { font-size: 15px; }
	.st-hs-cc-grid { grid-template-columns: 1fr; gap: 18px; }
	.st-hs .st-hs-lead .st-hs-t { font-size: 22px; }
	.st-hs .st-hs-ex { font-size: 16px; }
	.st-hs .st-hs-row { grid-template-columns: 112px 1fr; padding: 12px 0; }
	.st-hs .st-hs-row .st-hs-t { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.st-hs .st-hs-img img, .st-hs .st-hs-tile img, .st-hs .st-hs-t, .st-hs .st-hs-all { transition: none; }
	.st-hs a:hover .st-hs-img img, .st-hs .st-hs-tile:hover img { transform: none; }
}