/* ==========================================================================
   Succes News — home.css
   Homepage Builder: section wrapper (spacing / backgrounds / sidebar), hero
   layouts 1–6, slider, carousel, category layouts (grid-3, grid-4, big-4small,
   big-left-list, list, carousel, cards, magazine, newspaper, overlay) and the
   latest / popular / ad / newsletter / html / widgets sections.
   Depends on main.css (tokens, .sn-card, .sn-grid, .sn-section-title, .sn-layout).
   Breakpoints: 480 / 640 / 768 / 1024 / 1280 (mobile-first, max-width overrides).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Section wrapper
   -------------------------------------------------------------------------- */
.sn-home { --sn-home-gap: var(--sn-section-gap); }
.sn-home--spacing-compact,
.sn-home-section--spacing-compact { --sn-home-gap: clamp(1.25rem, 3vw, 2rem); }
.sn-home--spacing-normal,
.sn-home-section--spacing-normal { --sn-home-gap: var(--sn-section-gap); }
.sn-home--spacing-airy,
.sn-home-section--spacing-airy { --sn-home-gap: clamp(3rem, 7vw, 5.5rem); }

.sn-home-section { position: relative; padding-block: calc(var(--sn-home-gap) / 2); }
.sn-home > .sn-home-section:first-child { padding-top: calc(var(--sn-home-gap) * .6); }
.sn-home-section__body { min-width: 0; }
.sn-home-section__title { margin-bottom: var(--sn-space-6); }
.sn-home-section--hero .sn-home-section__title { margin-bottom: var(--sn-space-5); }

/* Backgrounds (full-bleed bands; the container keeps the content width) */
.sn-home-section--bg-soft,
.sn-home-section--bg-dark { padding-block: var(--sn-home-gap); }
.sn-home-section--bg-soft { background: var(--sn-surface-2); }
.sn-home-section--bg-soft .sn-card--elevated,
.sn-home-section--bg-soft .sn-newsletter { --sn-surface-2: var(--sn-surface); }
.sn-home-section--bg-dark {
	background: var(--sn-secondary);
	color: #fff;
	--sn-heading: #fff;
	--sn-text: #fff;
	--sn-text-muted: rgba(255, 255, 255, .72);
	--sn-link: #fff;
	--sn-link-hover: rgba(255, 255, 255, .8);
	--sn-border: rgba(255, 255, 255, .16);
	--sn-border-strong: rgba(255, 255, 255, .32);
	--sn-surface: color-mix(in srgb, var(--sn-secondary) 82%, #fff);
	--sn-surface-2: color-mix(in srgb, var(--sn-secondary) 90%, #fff);
	--sn-primary-soft: rgba(255, 255, 255, .1);
}
.sn-home-section--bg-dark .sn-section-title--bar .sn-section-title__text { border-left-color: var(--sn-cat, var(--sn-primary)); }
.sn-home-section--bg-dark .sn-card__title a:hover { color: rgba(255, 255, 255, .8); }
.sn-home-section--bg-dark .sn-cat:not(.sn-cat--pill) { color: #fff; }
.sn-home-section--bg-dark .sn-thumb { background: rgba(255, 255, 255, .08); }

/* Category color accent on section titles (set as --sn-cat by the Builder) */
.sn-home-section--category .sn-section-title--bar .sn-section-title__text { border-left-color: var(--sn-cat, var(--sn-primary)); }
.sn-home-section--category .sn-section-title__more:hover { color: var(--sn-cat, var(--sn-primary)); }

/* Sections with the homepage sidebar */
.sn-home-section--with-sidebar .sn-layout { gap: var(--sn-space-10); }
.sn-home-section--with-sidebar .sn-sidebar--home .sn-widget:last-child { margin-bottom: 0; }
@media (min-width: 1024px) {
	.sn-home-section--with-sidebar .sn-sidebar--home { position: sticky; top: calc(var(--sn-sticky-h) + 1.25rem); }
}
@media (max-width: 1023px) {
	.sn-home-section--with-sidebar .sn-layout__aside { margin-top: var(--sn-space-4); }
}

/* Admin-only notice (no sections) */
.sn-home-empty { margin: var(--sn-space-8) 0; }

/* --------------------------------------------------------------------------
   2. Shared card variants used by the builder
   -------------------------------------------------------------------------- */
/* Overlay cards that fill their grid cell (height driven by the tallest sibling) */
/* A definite height + aspect-ratio makes the browser resolve the width from the
   height; in a tall grid row that pushes the card over the next column. */
.sn-home-section .sn-card--fill { height: 100%; max-width: 100%; min-width: 0; }
.sn-home-section .sn-card--fill .sn-thumb { height: 100%; }
.sn-home-section .sn-card--fill .sn-thumb img { height: 100%; aspect-ratio: auto; }

/* Smaller overlay / standard cards */
.sn-home-section .sn-card--sm.sn-card--overlay .sn-card__body { padding: var(--sn-space-4); }
.sn-home-section .sn-card--sm.sn-card--overlay .sn-card__title { font-size: var(--sn-fs-md); }
.sn-home-section .sn-card--sm.sn-card--overlay .sn-card__excerpt { display: none; }
.sn-home-section .sn-card--sm.sn-card--overlay .sn-meta { font-size: var(--sn-fs-xs); }
.sn-home-section .sn-card--sm.sn-card--standard .sn-card__title { font-size: var(--sn-fs-lg); }

/* Elevated (boxed) cards */
.sn-card--elevated { background: var(--sn-surface); border: 1px solid var(--sn-border); border-radius: var(--sn-radius-lg); box-shadow: var(--sn-shadow-sm); overflow: hidden; transition: box-shadow var(--sn-dur) var(--sn-ease), transform var(--sn-dur) var(--sn-ease), border-color var(--sn-dur); }
.sn-card--elevated:hover { box-shadow: var(--sn-shadow); transform: translateY(-2px); border-color: var(--sn-border-strong); }
.sn-card--elevated .sn-thumb { border-radius: 0; }
.sn-card--elevated .sn-card__body { padding: 0 var(--sn-space-5) var(--sn-space-5); }
.sn-card--elevated.sn-card--no-thumb .sn-card__body { padding-top: var(--sn-space-5); }

/* Ranked standard cards (popular grid) */
.sn-card--ranked .sn-card__index { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sn-primary); color: var(--sn-on-primary); font-size: var(--sn-fs-md); font-weight: 800; opacity: 1; box-shadow: var(--sn-shadow-sm); }

/* --------------------------------------------------------------------------
   3. Hero layouts
   -------------------------------------------------------------------------- */
.sn-hero { display: grid; gap: var(--sn-space-5); min-width: 0; }
.sn-hero > * { min-width: 0; }
.sn-hero .sn-card--overlay .sn-card__title a:hover { text-decoration-color: var(--sn-cat, var(--sn-primary)); }
/* Long headlines must not run edge to edge under the neighbouring card. */
.sn-hero .sn-card--overlay .sn-card__title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sn-hero .sn-card--sm.sn-card--overlay .sn-card__body { padding-right: var(--sn-space-5); }

/* Side lists (hero-2, hero-6) */
.sn-hero__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.sn-hero__list-item { padding-block: var(--sn-space-3); min-width: 0; }
.sn-hero__list-item + .sn-hero__list-item { border-top: 1px solid var(--sn-border); }
.sn-hero__list-item:first-child { padding-top: 0; }
.sn-hero__list-item:last-child { padding-bottom: 0; }
.sn-hero__list .sn-card--text .sn-card__title { font-family: var(--sn-font-heading); font-weight: var(--sn-heading-weight); letter-spacing: var(--sn-heading-ls); font-size: var(--sn-fs-lg); line-height: var(--sn-lh-snug); }
.sn-hero__list .sn-card--text .sn-card__cat { line-height: 1; }
.sn-hero__list .sn-card--text .sn-card__index { font-size: 1.35rem; min-width: 1.6em; line-height: 1.1; color: var(--sn-primary); }

/* hero-1: 1 big (3/5) + 2×2 small (2/5) */
.sn-hero--1 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.sn-hero--1 .sn-hero__main .sn-card { aspect-ratio: 16 / 10; }
.sn-hero--1 .sn-hero__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--sn-space-5); min-height: 0; }
.sn-hero--1 .sn-hero__grid .sn-card { aspect-ratio: 4 / 3; }

/* hero-2: 1 big (2/3) + side list (1/3) */
.sn-hero--2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sn-space-8); }
.sn-hero--2 .sn-hero__main .sn-card { aspect-ratio: 16 / 10; }
.sn-hero--2 .sn-hero__list { height: 100%; }

/* hero-3: three equal overlay cards */
.sn-hero--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sn-hero--3.sn-hero--count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sn-hero--3.sn-hero--count-1 { grid-template-columns: minmax(0, 1fr); }
.sn-hero--3 .sn-card { aspect-ratio: 4 / 3; }
.sn-hero--3.sn-hero--count-1 .sn-card { aspect-ratio: 21 / 9; }

/* hero-6: 1 large (2/4) + 2 stacked (1/4) + numbered list (1/4) */
.sn-hero--6 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.sn-hero--6 .sn-hero__main .sn-card { aspect-ratio: 4 / 3; }
.sn-hero--6 .sn-hero__stack { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--sn-space-5); min-height: 0; }
.sn-hero--6 .sn-hero__stack .sn-card { aspect-ratio: 4 / 3; }
.sn-hero--6 .sn-hero__side { display: flex; flex-direction: column; min-height: 0; padding-left: var(--sn-space-5); border-left: 1px solid var(--sn-border); }
.sn-hero__side-title { display: inline-flex; align-items: center; gap: .4em; margin: 0 0 var(--sn-space-3); font-family: var(--sn-font-ui); font-size: var(--sn-fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sn-primary); }
.sn-hero__side-title .sn-icon--flame { color: var(--sn-breaking, var(--sn-primary)); }
.sn-hero--6 .sn-hero__list--numbered { flex: 1; overflow: hidden; }
.sn-hero--6 .sn-hero__list--numbered .sn-card--text .sn-card__title { font-size: var(--sn-fs-md); }

/* --------------------------------------------------------------------------
   4. Slider (hero-4) — scroll-snap track, enhanced by home.js
   -------------------------------------------------------------------------- */
.sn-slider { position: relative; }
.sn-slider__track { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-radius: var(--sn-radius-lg); background: var(--sn-secondary); }
.sn-slider__track::-webkit-scrollbar { display: none; }
.sn-slider__track:focus-visible { outline-offset: 4px; }
.sn-slider__slide { flex: 0 0 100%; width: 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.sn-slider__card { aspect-ratio: 16 / 10; border-radius: 0; }
.sn-slider__card .sn-card__body { padding: var(--sn-space-5); gap: var(--sn-space-3); }
.sn-slider__card .sn-card__excerpt { display: none; }
.sn-slider__card .sn-card__title { font-size: calc(var(--sn-fs-2xl) * var(--sn-headline-scale)); }
.sn-slider.is-dragging .sn-slider__track { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.sn-slider.is-dragging a { pointer-events: none; }

.sn-slider__controls { display: flex; align-items: center; justify-content: center; gap: var(--sn-space-4); margin-top: var(--sn-space-4); min-height: 40px; }
.sn-slider__btn { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--sn-border-strong); background: var(--sn-surface); color: var(--sn-text); box-shadow: var(--sn-shadow-sm); transition: background var(--sn-dur), color var(--sn-dur), transform var(--sn-dur); }
.sn-slider.is-ready .sn-slider__btn { display: inline-flex; }
.sn-slider__btn:hover { background: var(--sn-primary); border-color: var(--sn-primary); color: var(--sn-on-primary); }
.sn-slider__dots { display: flex; align-items: center; gap: .45rem; }
.sn-slider__dot { width: 10px; height: 10px; padding: 0; border-radius: 50%; background: var(--sn-border-strong); transition: background var(--sn-dur), transform var(--sn-dur); }
.sn-slider__dot:hover { background: var(--sn-text-muted); }
.sn-slider__dot[aria-selected="true"] { background: var(--sn-primary); transform: scale(1.25); }
.sn-slider__play { display: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: var(--sn-text-muted); border: 1px solid transparent; }
.sn-slider.is-ready .sn-slider__play { display: inline-flex; }
.sn-slider__play:hover { color: var(--sn-text); border-color: var(--sn-border); }
.sn-slider__play-icon { display: block; width: 12px; height: 12px; position: relative; }
.sn-slider__play-icon--pause::before, .sn-slider__play-icon--pause::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; border-radius: 1px; background: currentColor; }
.sn-slider__play-icon--pause::before { left: 1px; }
.sn-slider__play-icon--pause::after { right: 1px; }
.sn-slider__play-icon--play::before { content: ""; position: absolute; left: 2px; top: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.sn-slider__progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--sn-primary); opacity: .9; pointer-events: none; }

@media (min-width: 768px) {
	.sn-slider__card { aspect-ratio: 16 / 8; }
	.sn-slider__card .sn-card__body { padding: var(--sn-space-8); max-width: 72%; }
	.sn-slider__card .sn-card__excerpt { display: -webkit-box; }
	.sn-slider__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; background: rgba(255, 255, 255, .9); color: #0f172a; border-color: transparent; }
	.sn-slider__btn:hover { transform: translateY(-50%) scale(1.05); }
	.sn-slider__btn--prev { left: var(--sn-space-4); }
	.sn-slider__btn--next { right: var(--sn-space-4); }
	.sn-slider__controls { position: absolute; left: 0; right: 0; bottom: var(--sn-space-4); margin: 0; justify-content: flex-end; padding-inline: var(--sn-space-6); gap: var(--sn-space-3); z-index: 2; pointer-events: none; }
	.sn-slider__controls > * { pointer-events: auto; }
	.sn-slider__dot { background: rgba(255, 255, 255, .45); }
	.sn-slider__dot:hover { background: rgba(255, 255, 255, .8); }
	.sn-slider__dot[aria-selected="true"] { background: #fff; }
	.sn-slider__play { color: rgba(255, 255, 255, .8); }
	.sn-slider__play:hover { color: #fff; border-color: rgba(255, 255, 255, .4); }
}
@media (min-width: 1024px) {
	.sn-slider__card { aspect-ratio: 21 / 9; }
	.sn-slider__card .sn-card__title { font-size: calc(var(--sn-fs-3xl) * var(--sn-headline-scale)); }
	.sn-slider__card .sn-card__body { max-width: 62%; }
}

/* --------------------------------------------------------------------------
   5. Carousel (hero-5 + category carousel) — scroll-snap track, enhanced by home.js
   -------------------------------------------------------------------------- */
.sn-carousel { position: relative; --sn-carousel-cols: 3; --sn-carousel-gap: var(--sn-space-6); }
.sn-carousel__track { display: flex; gap: var(--sn-carousel-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 6px; margin-bottom: -6px; }
.sn-carousel__track::-webkit-scrollbar { display: none; }
.sn-carousel__track:focus-visible { outline-offset: 4px; }
.sn-carousel__item { flex: 0 0 calc((100% - var(--sn-carousel-gap) * (var(--sn-carousel-cols) - 1)) / var(--sn-carousel-cols)); min-width: 0; scroll-snap-align: start; display: flex; }
.sn-carousel__item > .sn-card { width: 100%; }
.sn-carousel.is-dragging .sn-carousel__track { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.sn-carousel.is-dragging a { pointer-events: none; }
.sn-carousel--hero .sn-card--overlay { aspect-ratio: 4 / 3; }
.sn-carousel--hero { --sn-carousel-gap: var(--sn-space-5); }

.sn-carousel__btn { position: absolute; top: 50%; z-index: 2; display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sn-surface); color: var(--sn-text); border: 1px solid var(--sn-border); box-shadow: var(--sn-shadow); transform: translateY(-50%); transition: opacity var(--sn-dur), visibility var(--sn-dur), background var(--sn-dur), color var(--sn-dur); }
.sn-carousel.is-ready .sn-carousel__btn { display: inline-flex; }
.sn-carousel__btn:hover { background: var(--sn-primary); color: var(--sn-on-primary); border-color: var(--sn-primary); }
.sn-carousel__btn--prev { left: -22px; }
.sn-carousel__btn--next { right: -22px; }
.sn-carousel--cards .sn-carousel__btn { top: calc(50% - 2.5rem); }
.sn-carousel__btn.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

@media (max-width: 1279px) {
	.sn-carousel__btn--prev { left: -8px; }
	.sn-carousel__btn--next { right: -8px; }
}
@media (max-width: 1023px) {
	.sn-carousel__item { flex-basis: calc((100% - var(--sn-carousel-gap)) / 2); }
}
@media (max-width: 767px) {
	.sn-carousel__item { flex-basis: 82%; }
	.sn-carousel.is-ready .sn-carousel__btn { display: none; }
	.sn-carousel__track { scroll-padding-inline: 0; }
}

/* --------------------------------------------------------------------------
   6. Category layouts
   -------------------------------------------------------------------------- */
/* grid-3 / grid-4 / overlay / cards: .sn-grid from main.css */
.sn-home-grid, .sn-home-cards, .sn-home-overlay { row-gap: var(--sn-space-8); }
.sn-home-overlay { row-gap: var(--sn-space-6); }

/* big-4small */
.sn-home-big4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sn-space-8) var(--sn-space-6); }
.sn-home-big4__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sn-space-6) var(--sn-space-5); align-content: start; }
.sn-home-big4__grid .sn-card__title { font-size: var(--sn-fs-md); }

/* big-left-list */
.sn-home-biglist { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sn-space-8); }
.sn-home-biglist__list { display: flex; flex-direction: column; }
.sn-home-biglist__list > .sn-card { padding-block: var(--sn-space-4); }
.sn-home-biglist__list > .sn-card:first-child { padding-top: 0; }
.sn-home-biglist__list > .sn-card + .sn-card { border-top: 1px solid var(--sn-border); }
.sn-home-biglist__list .sn-card--compact .sn-card__title { font-size: var(--sn-fs-lg); font-family: var(--sn-font-heading); font-weight: var(--sn-heading-weight); letter-spacing: var(--sn-heading-ls); }
.sn-home-biglist__list .sn-card--compact .sn-card__media { flex-basis: 96px; width: 96px; }

/* list */
.sn-home-list { display: flex; flex-direction: column; gap: var(--sn-space-6); }
.sn-home-list > .sn-card--list:last-child { border-bottom: 0; padding-bottom: 0; }

/* magazine */
.sn-home-magazine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sn-space-8) var(--sn-space-6); }
.sn-home-magazine__side { display: flex; flex-direction: column; gap: var(--sn-space-6); min-width: 0; }
.sn-home-magazine__medium { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sn-space-5); }
.sn-home-magazine__medium .sn-card__title { font-size: var(--sn-fs-md); }
.sn-home-magazine__list { display: flex; flex-direction: column; border-top: 1px solid var(--sn-border); }
.sn-home-magazine__list > .sn-card { padding-block: var(--sn-space-3); }
.sn-home-magazine__list > .sn-card + .sn-card { border-top: 1px solid var(--sn-border); }
.sn-home-magazine__list .sn-card--text .sn-card__title { font-family: var(--sn-font-heading); font-weight: var(--sn-heading-weight); letter-spacing: var(--sn-heading-ls); font-size: var(--sn-fs-lg); }

/* newspaper: text-first multi-column flow with rules */
.sn-home-newspaper { --sn-font-serif: Georgia, Cambria, "Times New Roman", Times, serif; column-count: var(--sn-np-cols, 3); column-gap: var(--sn-space-10); column-rule: 1px solid var(--sn-border); }
.sn-home-newspaper__item { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; padding-bottom: var(--sn-space-4); margin-bottom: var(--sn-space-4); border-bottom: 1px solid var(--sn-border); }
.sn-home-newspaper__item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.sn-card--paper { align-items: flex-start; }
.sn-card--paper .sn-card__media { flex-basis: 72px; width: 72px; order: 2; }
.sn-card--paper .sn-card__title { font-family: var(--sn-font-serif); font-size: var(--sn-fs-lg); font-weight: 700; line-height: 1.25; letter-spacing: -.005em; }
.sn-card--paper .sn-card__excerpt { font-size: var(--sn-fs-sm); line-height: 1.5; -webkit-line-clamp: 3; }
.sn-card--paper .sn-card__meta { font-size: var(--sn-fs-xs); }
.sn-home-newspaper__item:first-child .sn-card--paper .sn-card__title { font-size: var(--sn-fs-2xl); }

/* --------------------------------------------------------------------------
   7. Latest / popular / ad / newsletter / html / widgets
   -------------------------------------------------------------------------- */
/* popular: numbered headlines in columns */
.sn-home-popular--numbered { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--sn-cols, 2), minmax(0, 1fr)); gap: 0 var(--sn-space-10); }
.sn-home-popular__item { padding-block: var(--sn-space-4); border-bottom: 1px solid var(--sn-border); min-width: 0; }
.sn-home-popular__item .sn-card--text .sn-card__index { font-size: 1.75rem; min-width: 1.4em; line-height: 1; color: var(--sn-primary); font-style: italic; }
.sn-home-popular__item .sn-card--text .sn-card__title { font-family: var(--sn-font-heading); font-weight: var(--sn-heading-weight); letter-spacing: var(--sn-heading-ls); font-size: var(--sn-fs-lg); }
.sn-home-popular--grid { row-gap: var(--sn-space-8); }

/* ad */
.sn-home-ad { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-width: 0; overflow: hidden; }
.sn-home-ad > * { max-width: 100%; }
.sn-home-ad--custom .sn-ad__label { display: block; margin-bottom: var(--sn-space-2); font-family: var(--sn-font-ui); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--sn-text-muted); }

/* newsletter */
.sn-home-newsletter { min-width: 0; }
.sn-home-newsletter--stacked { max-width: 680px; margin-inline: auto; text-align: center; }
.sn-home-newsletter--minimal { max-width: 560px; margin-inline: auto; }

/* custom html */
.sn-home-html { min-width: 0; overflow-wrap: anywhere; }
.sn-home-html > :last-child { margin-bottom: 0; }
.sn-home-html iframe, .sn-home-html video, .sn-home-html img { max-width: 100%; }

/* widgets */
.sn-home-widgets { align-items: start; }
.sn-home-widgets .sn-widget { margin-bottom: 0; min-width: 0; }

/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
	.sn-home-section--with-sidebar .sn-home-big4,
	.sn-home-section--with-sidebar .sn-home-biglist,
	.sn-home-section--with-sidebar .sn-home-magazine { grid-template-columns: minmax(0, 1fr); }
	.sn-home-section--with-sidebar .sn-hero--1,
	.sn-home-section--with-sidebar .sn-hero--2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1023px) {
	/* hero-2: list below the big card, two columns */
	.sn-hero--2 { grid-template-columns: minmax(0, 1fr); gap: var(--sn-space-6); }
	.sn-hero--2 .sn-hero__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sn-space-4) var(--sn-space-8); height: auto; }
	.sn-hero--2 .sn-hero__list-item { padding-block: 0; border-top: 0; }
	/* hero-3: first card full width */
	.sn-hero--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sn-hero--3 > .sn-card:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
	/* hero-6: main full width, stack + list side by side */
	.sn-hero--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sn-hero--6 .sn-hero__main { grid-column: 1 / -1; }
	.sn-hero--6 .sn-hero__main .sn-card { aspect-ratio: 16 / 9; }
	.sn-hero--6 .sn-hero__stack { grid-template-rows: auto; }
	.sn-hero--6 .sn-hero__stack .sn-card { aspect-ratio: 16 / 10; }
	/* newspaper 3 → 2 */
	.sn-home-newspaper { column-count: min(var(--sn-np-cols, 3), 2); column-gap: var(--sn-space-8); }
	/* biglist */
	.sn-home-biglist { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 767px) {
	/* hero-1: big + 2×2 */
	.sn-hero--1 { grid-template-columns: minmax(0, 1fr); }
	.sn-hero--1 .sn-hero__grid { grid-template-rows: auto; }
	.sn-hero--1 .sn-hero__main .sn-card { aspect-ratio: 16 / 10; }
	.sn-hero--2 .sn-hero__main .sn-card { aspect-ratio: 16 / 10; }
	/* hero-6 */
	.sn-hero--6 { grid-template-columns: minmax(0, 1fr); }
	.sn-hero--6 .sn-hero__stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sn-hero--6 .sn-hero__stack .sn-card { aspect-ratio: 4 / 3; }
	.sn-hero--6 .sn-hero__side { padding-left: 0; border-left: 0; padding-top: var(--sn-space-4); border-top: 1px solid var(--sn-border); }
	/* category layouts stack */
	.sn-home-big4, .sn-home-biglist, .sn-home-magazine { grid-template-columns: minmax(0, 1fr); }
	.sn-home-big4__grid { gap: var(--sn-space-5) var(--sn-space-4); }
	.sn-home-biglist__list .sn-card--compact .sn-card__media { flex-basis: 80px; width: 80px; }
	/* popular list → 1 column */
	.sn-home-popular--numbered { grid-template-columns: minmax(0, 1fr); }
	.sn-home-popular__item:last-child { border-bottom: 0; }
	/* xl overlay title smaller */
	.sn-home-section .sn-card--overlay.sn-card--xl .sn-card__title { font-size: calc(var(--sn-fs-2xl) * var(--sn-headline-scale)); }
	.sn-home-section .sn-card--overlay.sn-card--xl .sn-card__body { padding: var(--sn-space-5); }
	.sn-home-section .sn-card--overlay.sn-card--xl .sn-card__excerpt { display: none; }
}

@media (max-width: 639px) {
	.sn-hero--2 .sn-hero__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.sn-hero--2 .sn-hero__list-item { padding-block: var(--sn-space-3); }
	.sn-hero--2 .sn-hero__list-item + .sn-hero__list-item { border-top: 1px solid var(--sn-border); }
	.sn-hero--3 { grid-template-columns: minmax(0, 1fr); }
	.sn-hero--3 > .sn-card, .sn-hero--3 > .sn-card:first-child { aspect-ratio: 16 / 10; }
	.sn-home-newspaper { column-count: 1; }
	.sn-home-magazine__medium { grid-template-columns: minmax(0, 1fr); }
	.sn-home-section--with-sidebar .sn-layout { gap: var(--sn-space-8); }
}

@media (max-width: 479px) {
	.sn-hero--1 .sn-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.sn-hero--1 .sn-hero__grid .sn-card { aspect-ratio: 16 / 9; }
	.sn-hero--6 .sn-hero__stack { grid-template-columns: minmax(0, 1fr); }
	.sn-hero--6 .sn-hero__stack .sn-card { aspect-ratio: 16 / 9; }
	.sn-home-big4__grid .sn-card__title, .sn-home-section .sn-card--sm.sn-card--standard .sn-card__title { font-size: var(--sn-fs-md); }
	.sn-home-big4__grid .sn-card__meta { display: none; }
	.sn-slider__card { aspect-ratio: 4 / 3; }
	.sn-slider__card .sn-card__title { font-size: var(--sn-fs-xl); }
}

/* --------------------------------------------------------------------------
   9. Motion, dark mode, print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.sn-slider__track, .sn-carousel__track { scroll-behavior: auto; }
	.sn-card--elevated:hover { transform: none; }
	.sn-slider__dot[aria-selected="true"] { transform: none; }
}
:root[data-theme="dark"] .sn-slider__btn,
:root[data-theme="dark"] .sn-carousel__btn { background: var(--sn-surface); color: var(--sn-text); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .sn-slider__btn,
	:root:not([data-theme="light"]) .sn-carousel__btn { background: var(--sn-surface); color: var(--sn-text); }
}
@media print {
	.sn-slider__controls, .sn-carousel__btn, .sn-home-section--ad { display: none; }
	.sn-slider__track, .sn-carousel__track { overflow: visible; flex-wrap: wrap; }
	.sn-home-section--bg-dark { background: none; color: #000; --sn-heading: #000; --sn-text: #000; --sn-text-muted: #444; }
}