/*
 * Homepage blocks (theme ACF blocks: hero, twoColsHero, newsOfTheDay, oneSelectedPost,
 * politica, …), the header leaderboard, the video and the network ("rss") cards. Loaded on the front
 * page only (includes/enqueue.php); the section headers (.sectionHead*) are in cards.css.
 * Block-specific CSS that ships with a block lives in blocks/<name>/; these are the shared rules.
 *
 * Breakpoints of the homepage: < 600 phone (one column), 600–1023 tablet (two columns),
 * ≥ 1024 desktop. They match the `sizes` of the image slots (includes/cards.php).
 */



/* Homepage sections end with space only: the next section's 4px top rule is the divider, so a
   bottom line just above it doubled up. (The .borderBottom utility keeps its spacing.) */
.homeSection.borderBottom,
.homeSection > .borderBottom {
	border-bottom: 0;
}

/* Side columns: breathing room between the content and the ad that follows it (all widths). */
:is(.twoColumns__side, .selectedPost__grid > .borderLeft, .politica .col2thirds > .borderLeft) > :not(:first-child):is(.banner, .adSlot, :has(> .adSlot)) {
	margin-top: 3.2rem !important; /* beats the ad block's own inline "spacing" margin: one rhythm in every column */
}

/* Side columns: one ad each (D-17), placed last and sticky, so it stays in view while the reader
   scrolls past the section. Offset clears the admin bar and the slim sticky header bar. */
@media screen and (min-width: 1024px) {
	:is(.twoColumns__side, .selectedPost__grid > .borderLeft, .politica .col2thirds > .borderLeft) > :last-child:is(.banner, .adSlot, :has(> .adSlot)) {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 6.8rem);
	}
}



/* 4-column grids: card titles clearly smaller than the section header. */
.homeGrid__cards .media .title {
	font-size: 2rem;
}

/* Sponsor lockup (sidebar.css) on the dark twoColsHero band: light label, and the logo on a
   small light chip so dark logos stay visible on --ink. The image keeps its 28px box; the chip
   is padding around it. */
.twoColsHero.alignfull .sponsorLabel {
	color: #ccc; /* light grey on --ink: 11.3:1 */
}

.twoColsHero.alignfull .sponsoredContainer .sponsoredImg {
	padding: 3px 6px;
	border-radius: 3px;
	background: var(--surface);
	box-sizing: content-box;
}

/* Homepage video (parts/home-video.php): the player's 16:9 box is reserved before it loads. */
.home-video {
	padding: 0 200px;
}

.home-video glomex-integration {
	display: block;
	aspect-ratio: 16 / 9;
}

/* Cards from the sister sites (news tabs, politica block) */
.rss .media--big figure {
	width: 100%;
}

.newsofTheDay .media--reverse > .postThumbImage {
	width: 300px;
	max-width: 45%;
}

.section__header.imgTitle .affiliate > img,
.politicaLogo {
	width: auto;
	max-height: 40px;
}

.stena header h2 {
	position: relative;
}

.section.hero .media--big > .postThumbImage {
	flex: 0 0 50%;
	max-width: 600px;
}

/* Selected-posts band */
.selectedPosts {
	padding-top: 3.2rem;
	margin-bottom: 4.8rem;
}

/* Band presets (bg_color_selected_posts): editors pick one; text colours follow the band. */
.selectedPosts--peach { background: #F5EAE4; }
.selectedPosts--tint  { background: #FFF3EC; }
.selectedPosts--white { background: var(--surface); }
.selectedPosts--dark  { background: var(--ink); }

.selectedPosts .sectionHead {
	border-top-color: rgba(0, 0, 0, 0.75);
}

/* Dark band: the same treatment as the dark hero (light text, bright orange kickers). */
.selectedPosts--dark .sectionHead {
	border-top-color: var(--surface);
}

.selectedPosts--dark .sectionHead__title,
.selectedPosts--dark .sectionHead__title > a,
.selectedPosts--dark .title > a {
	color: var(--surface);
}

.selectedPosts--dark .sectionHead__more,
.selectedPosts--dark .headingTiny > a {
	color: var(--accent);
}

.selectedPosts--dark .meta,
.selectedPosts--dark .meta > a {
	color: #B8B8B8;
}

/* twoColsHero: the second story, a half-width image card. */
@media screen and (min-width: 600px) {
	.heroFirstCol .postThumbImage {
		width: 50%;
	}

	.heroFirstCol .media__photo {
		aspect-ratio: 3 / 2;
	}
}

/* Tablet (600–1023px): two columns instead of one long column (UX-06) --------------------- */
@media screen and (min-width: 600px) and (max-width: 1023px) {
	.homeSection .col4,
	.homeSection .col2thirds,
	.homeSection .colBalanced {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	/* twoColumnsPosts: list | big story, the side column (ads, bloggers) below, full width. */
	.twoColumns .twoColumns__grid {
		grid-template-areas: "list big" "side side";
	}

	.twoColumns .twoColumns__list { grid-area: list; }
	.twoColumns .twoColumns__big  { grid-area: big; }
	.twoColumns .twoColumns__side { grid-area: side; }

	.twoColumns .twoColumns__side.borderLeft::before {
		display: none;
	}

	.home-video {
		padding: 0;
	}
}

@media screen and (max-width: 1023px) {
	.newsofTheDay .media--reverse > .postThumbImage {
		width: 100%;
		max-width: none;
	}

	.home-video {
		padding: 0;
	}

}

@media screen and (max-width: 800px) {
	.stena header h2:after {
		display: none;
	}
}

/* Phones (< 600px) ----------------------------------------------------------------------- */
@media screen and (max-width: 599px) {
	.homeSection .col4,
	.homeSection .col2thirds,
	.homeSection .colBalanced {
		grid-template-columns: minmax(0, 1fr);
	}

	.homeGrid__cards.grid {
		row-gap: 1.6rem;
	}

	.heroFirstCol.media {
		flex-direction: column;
	}

	.heroFirstCol .postThumbImage {
		width: 100%;
	}

}