/* ==========================================================================
   attacmadrid.org - homepage grids (front page only)
   Breakpoints: < 768 phone · 768 tablet · 1024 small desktop · 1280 desktop.
   Columns that may host an aside use container queries (.sec-main).
   A Hero  B Top Stories  C Feature+List  D Dark  E Structured  F Magazine
   G Balanced  H Data  I Visual  J Scoreboard  K Mosaic  L Latest
   M Trending  N Most Read  O Editor's Picks  + Briefing, Section index
   ========================================================================== */

.home-sec { padding-block: clamp(24px, 3.5vw, 44px); }
.home-sec--hero { padding-top: clamp(18px, 2.5vw, 32px); }

/* Sections with a ranking column. */
.sec-main { container-type: inline-size; min-width: 0; }
.sec-body.has-aside { display: grid; gap: var(--gap-lg); }
@media (min-width: 1024px) {
	.sec-body.has-aside { grid-template-columns: minmax(0, 1fr) 300px; }
	.sec-aside { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
}
@media (min-width: 1280px) { .sec-body.has-aside { grid-template-columns: minmax(0, 1fr) 340px; } }

/* A - Front page ("Portada") ----------------------------------------------------- */
.front-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 16px;
	margin-bottom: clamp(18px, 2.5vw, 28px);
	padding: 8px 0;
	border-block: 1px solid var(--color-text);
	box-shadow: 0 3px 0 -2px var(--color-text);
}
.front-head__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.front-head__title::before { content: ""; width: 10px; height: 10px; background: var(--color-accent); }
.front-head__date { margin: 0; color: var(--color-muted); font-family: var(--font-serif); font-size: 15px; font-style: italic; }
.front-head__date time::first-letter { text-transform: uppercase; }

.front { display: grid; gap: var(--gap-lg); }
.front__main { display: grid; gap: var(--gap); min-width: 0; }
.front .card--lead .card__title { font-size: var(--fs-3xl); line-height: 1.06; letter-spacing: -0.02em; }
.front .card--lead .card__excerpt { font-size: var(--fs-md); color: var(--color-body); }
.front__second { display: grid; gap: var(--gap); padding-top: var(--gap); border-top: var(--rule); }
.front__second .card__title { font-size: var(--fs-md); }
.front__second .card__excerpt { display: none; }
.front__second .card--row .card__media { flex-basis: 120px; }

.front__latest {
	align-self: start;
	padding: 20px 22px 8px;
	background: var(--color-dark-panel);
	color: var(--color-on-dark-muted);
	--social-bg: var(--color-dark-panel);
}
.front__latest-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 6px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgb(255 255 255 / 0.18);
	color: #fff;
	font-family: var(--font-sans);
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.front__latest-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 3px rgb(179 38 30 / 0.35); }
.front__latest .mini-list > li { border-bottom-color: rgb(255 255 255 / 0.14); padding-block: 14px; }
.front__latest .card__link, .front__latest .card__title { color: #fff; }
.front__latest .card__num { color: #F2B8B5; }
.front__latest .card__badge { color: color-mix(in srgb, var(--cat) 30%, #fff); }
.front__latest .card__meta, .front__latest .meta { color: var(--color-on-dark-muted); }
.front__latest .badge-demo { background: transparent; border-color: #E8A54B; color: #F6C987; }
.front__latest .card:hover .card__link { text-decoration-color: #F2B8B5; }
.front__latest :focus-visible, .front__latest .card:has(.card__link:focus-visible) { outline-color: var(--color-focus-dark); }

@media (min-width: 768px) {
	.front__second { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.front__second .card--row .card__media { flex-basis: 140px; }
}
@media (min-width: 1024px) {
	.front { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap-lg); }
	.front .card--lead { flex-direction: row-reverse; align-items: stretch; gap: clamp(20px, 2.5vw, 32px); }
	.front .card--lead .card__media { flex: 0 0 58%; aspect-ratio: auto; min-height: 360px; }
	.front .card--lead .card__body { justify-content: center; gap: 12px; padding-block: 8px; }
	.front .card--lead .card__title { font-size: clamp(2rem, 1.2rem + 1.6vw, 2.75rem); }
	.front__second .card__excerpt { display: block; font-size: 14.5px; }
}
@media (min-width: 1280px) {
	.front { grid-template-columns: minmax(0, 9fr) minmax(0, 3.4fr); }
}

/* Section index ------------------------------------------------------------------ */
.home-sec--sections { background: var(--color-surface-alt); margin-top: clamp(16px, 3vw, 32px); }
.sections-grid { display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.section-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px 18px 16px;
	background: var(--color-surface);
	border-top: 4px solid var(--cat, var(--color-accent));
	box-shadow: var(--shadow-sm);
}
.section-tile__name { margin: 0; font-size: var(--fs-lg); }
.section-tile__name a { color: var(--color-text); text-decoration: none; }
.section-tile__name a:hover { color: var(--cat); text-decoration: underline; }
.section-tile__desc { margin: 0; color: var(--color-body); font-size: 15px; line-height: 1.55; }
.section-tile .card__title { font-size: var(--fs-md); }
.section-tile__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 4px;
	color: var(--cat, var(--color-accent));
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
}
.section-tile__more:hover { text-decoration: underline; }
@media (min-width: 600px) { .sections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
	.sections-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.section-tile:first-child { grid-column: span 2; }
	.section-tile:first-child .section-tile__name { font-size: var(--fs-xl); }
	.section-tile:first-child .section-tile__desc { font-size: var(--fs-md); max-width: 46ch; }
}

/* B - Top Stories ------------------------------------------------------------- */
.ts { display: grid; gap: var(--gap-lg); }
.ts__lead .card__title { font-size: var(--fs-2xl); }
.ts__row { display: grid; gap: var(--gap); }
@container (min-width: 560px) {
	.ts__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.card--split { flex-direction: row; align-items: center; gap: var(--gap-lg); }
	.card--split .card__media { flex: 0 0 56%; }
}
@container (min-width: 960px) { .ts__row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* C - Feature + List ------------------------------------------------------------ */
.fl { display: grid; gap: var(--gap-lg); }
.fl__lead .card__title { font-size: var(--fs-xl); }
.fl__list > .card { padding-block: 14px; border-bottom: var(--rule); }
.fl__list > .card:first-child { padding-top: 0; }
.fl__list > .card:last-child { border-bottom: 0; }
@container (min-width: 640px) {
	.fl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.fl__list .card__media { flex-basis: 136px; }
}

/* D - Dark special coverage ------------------------------------------------------ */
.home-sec.is-dark {
	margin-block: clamp(16px, 3vw, 32px);
	background:
		repeating-linear-gradient(90deg, rgb(255 255 255 / 0.035) 0 1px, transparent 1px 80px),
		var(--color-dark-panel);
	color: var(--color-on-dark-muted);
}
.is-dark .sec-head { border-top-color: rgb(255 255 255 / 0.5); }
.is-dark .sec-head__title, .is-dark .sec-head__more, .is-dark .card__link, .is-dark .card__title { color: #fff; }
.is-dark .sec-head__kicker { color: #F2B8B5; }
.is-dark .card__excerpt { color: var(--color-on-dark-muted); }
.is-dark .meta { color: #8DA2B8; }
.is-dark .card__media { background: rgb(255 255 255 / 0.06); }
.is-dark .card:hover .card__link { text-decoration-color: #F2B8B5; }
.is-dark :focus-visible, .is-dark .card:has(.card__link:focus-visible) { outline-color: #F2B8B5; }

.dk { display: grid; gap: var(--gap-lg); }
.dk__lead .card__title { font-size: var(--fs-2xl); }
.dk__list > .card { padding-block: 14px; border-bottom: 1px solid rgb(255 255 255 / 0.12); }
.dk__list > .card:first-child { padding-top: 0; }
.dk__timeline-title {
	margin: 0 0 12px;
	color: #fff;
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.timeline { position: relative; display: grid; gap: 16px; padding-left: 18px; border-left: 1px solid rgb(255 255 255 / 0.25); }
.timeline__item { position: relative; }
.timeline__item::before {
	content: "";
	position: absolute;
	top: 5px;
	left: -23px;
	width: 9px;
	height: 9px;
	background: var(--color-dark-panel);
	border: 2px solid #F2B8B5;
	border-radius: 50%;
}
@media (min-width: 1024px) {
	.dk { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.dk__lead { grid-column: span 7; }
	.dk__list { grid-column: span 5; }
	.dk__timeline { grid-column: 1 / -1; padding-top: 8px; }
	.timeline {
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		gap: var(--gap);
		padding: 18px 0 0;
		border-left: 0;
		border-top: 1px solid rgb(255 255 255 / 0.25);
	}
	.timeline__item::before { top: -24px; left: 0; }
}

/* E - Structured ------------------------------------------------------------------ */
.st { display: grid; gap: var(--gap-lg); }
.st__texts > .card { padding-block: 14px; border-bottom: var(--rule); }
.st__texts > .card:first-child { padding-top: 0; }
.st__texts > .card:last-child { border-bottom: 0; }
.st__side { display: grid; gap: var(--gap); align-content: start; }
@media (min-width: 768px) {
	.st { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
	.st__side { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
	.st { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.st__lead { grid-column: span 4; }
	.st__side { grid-column: span 4; padding-left: var(--gap); border-left: var(--rule); }
}

/* F - Magazine -------------------------------------------------------------------- */
.mg { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mg__wide, .mg__minis { grid-column: 1 / -1; }
.mg__wide .card { aspect-ratio: 16 / 10; height: auto; }
.mg__wide .card__title { font-size: var(--fs-xl); }
.mg__portrait .card__title { font-size: var(--fs-base); }
.mg__minis { display: grid; gap: var(--gap); padding-top: 4px; border-top: var(--rule); }
.mg__minis .card { padding-top: 12px; }
@media (min-width: 768px) {
	.mg__minis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mg__portrait .card__title { font-size: var(--fs-md); }
}
@media (min-width: 1024px) {
	.mg { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.mg__wide { grid-column: span 6; }
	.mg__wide .card { aspect-ratio: auto; height: 100%; min-height: 360px; }
	.mg__portrait { grid-column: span 3; }
}

/* G - Balanced --------------------------------------------------------------------- */
.bl { display: grid; gap: var(--gap); }
.bl > .card .card__title { font-size: var(--fs-lg); }
.headline-list { padding: 4px 0 0; border-top: 2px solid var(--color-text); }
@media (min-width: 768px) {
	.bl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bl .headline-list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
	.bl .headline-list > li { border-bottom: var(--rule); }
}
@media (min-width: 1024px) {
	.bl.has-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.bl.has-list .headline-list { grid-column: auto; display: block; }
	.bl.has-list .headline-list > li:last-child { border-bottom: 0; }
}

/* H - Data + News ------------------------------------------------------------------- */
.dt { display: grid; gap: var(--gap-lg); }
.card--row-lg { flex-direction: column; }
.card--row-lg .card__title { font-size: var(--fs-xl); }
.dt__list > .card { padding-block: 14px; border-bottom: var(--rule); }
.dt__list > .card:first-child { padding-top: 0; }
@media (min-width: 600px) {
	.card--row-lg { flex-direction: row; gap: var(--gap); }
	.card--row-lg .card__media { flex: 0 0 48%; }
}
@media (min-width: 1024px) {
	.dt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.dt__list { padding-left: var(--gap); border-left: var(--rule); }
}

/* I - Visual magazine ---------------------------------------------------------------- */
.vs { display: grid; gap: var(--gap); }
.vs__big { display: grid; gap: var(--gap); }
.vs__big .card__title { font-size: var(--fs-xl); }
.vs__small {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 72%;
	gap: 12px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	padding-bottom: 8px;
	scrollbar-width: thin;
}
.vs__small > .card { scroll-snap-align: start; }
.card--dest .card__title { font-size: var(--fs-md); }
.card--dest .card__body { padding: 40px 16px 14px; }
@media (min-width: 768px) {
	.vs__big { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vs__small { grid-auto-columns: minmax(0, 1fr); overflow: visible; padding: 0; }
	.vs__small .card__media { aspect-ratio: 16 / 10; }
}

/* J - News + Scoreboard ----------------------------------------------------------------- */
.sb { display: grid; gap: var(--gap); }
.sb__lead .card__title { font-size: var(--fs-xl); }
.sb__grid { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sb__grid .card__title { font-size: var(--fs-base); }
@media (min-width: 1024px) {
	.sb { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.sb__lead { grid-column: span 6; }
	.sb__grid { grid-column: span 6; }
	.sb.has-widget .sb__lead { grid-column: span 5; }
	.sb.has-widget .sb__grid { grid-column: span 4; grid-template-columns: 1fr; }
	.sb.has-widget > :last-child { grid-column: span 3; }
}

/* K - Editorial mosaic ------------------------------------------------------------------ */
.mz { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; }
.mz > .card { height: 100%; }
.mz .card__title { font-size: var(--fs-base); }
.mz .card__body { padding: 40px 14px 12px; }
.mz__lead { grid-column: 1 / -1; grid-row: span 2; }
.mz__lead .card__title { font-size: var(--fs-xl); }
.mz__b { grid-row: span 2; }
.mz__d { grid-column: 1 / -1; }
@media (min-width: 1024px) {
	.mz { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 210px; gap: var(--gap); }
	.mz__lead { grid-column: 1 / 3; grid-row: 1 / 3; }
	.mz__a { grid-column: 3; grid-row: 1; }
	.mz__b { grid-column: 4; grid-row: 1 / 3; }
	.mz__c { grid-column: 3; grid-row: 2; }
	.mz__d { grid-column: 1 / -1; grid-row: 3; }
	.mz .card__title { font-size: var(--fs-md); }
	.mz__lead .card__title, .mz__d .card__title { font-size: var(--fs-2xl); }
}

/* L - Latest feed (rows live in main.css) */
.feed__more { margin: 24px 0 0; text-align: center; }

/* M - Trending (standalone) ------------------------------------------------------------------ */
.rank-row { display: grid; gap: 0 var(--gap); }
.rank-row > li { padding: 14px 0; border-bottom: var(--rule); }
@media (min-width: 600px) { .rank-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
	.rank-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.rank-row > li { border-bottom: 0; border-left: var(--rule); padding: 0 0 0 16px; }
	.rank-row > li:first-child { border-left: 0; padding-left: 0; }
}

/* N - Most read (standalone) ------------------------------------------------------------------ */
.rank--wide .rank__list { columns: 2 280px; column-gap: var(--gap-lg); }
.rank--wide .rank__list > li { break-inside: avoid; }

/* O - Editor's picks ---------------------------------------------------------------------------- */
.home-sec--editors-picks .container { position: relative; }
.ep { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.ep .card__title { font-size: var(--fs-lg); }

/* Briefing strip ----------------------------------------------------------------------------------- */
.home-sec--briefing { padding-block: 0 8px; }
.briefing { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* The utility bar already shows the date on desktop. */
@media (min-width: 1024px) { .hero-head__date { display: none; } }
/* Latest feed without a ranking column: keep a readable measure. */
.home-sec--latest .sec-body:not(.has-aside) .sec-main { max-width: 880px; }

/* Section accents are all navy (#0E2A47); on dark panels use the light accent instead. */
.is-dark .sec-head::before { background: #F2B8B5; }