/*
 * Site overrides for the Colordive parent theme.
 * Enqueued after the parent's style.css, responsive.css and dark.css
 * (see functions.php), so a rule here wins on equal specificity.
 * Keep this file small; anything structural belongs in a template override.
 */

/* Featured row -- see inc/featured.php
 *
 * A static grid, not the parent's Slick carousel. The picks are hand-ordered,
 * so a carousel that shuffles them and hides the rest behind arrows works
 * against the point of picking; a grid also needs no JavaScript, and the
 * parent hides .slick-posts until its script runs.
 *
 * Column counts are the parent carousel's old breakpoints, so the row still
 * reflows the way the theme does everywhere else. The card, its colours and
 * its 80px round thumbnail all still come from the parent.
 */
.child-featured { margin-bottom: 70px; }
.child-featured-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 45px 6px; }

/* Equal-height cards with the date row pinned to the bottom: grid stretches the
 * item, the card inside it has to be told to follow. */
.child-featured .blog-card,
.child-featured .blog-card-inner { height: 100%; margin-bottom: 0; }
.child-featured .blog-card-inner { display: flex; flex-direction: column; }
.child-featured .blog-card-link { flex: 1 1 auto; }
.child-featured .blog-card-featured { margin: 0; }

@media only screen and (max-width: 920px) {
	.child-featured-row { grid-template-columns: repeat(2, 1fr); }
}

@media only screen and (max-width: 620px) {
	.child-featured-row { grid-template-columns: 1fr; }
	.child-featured { margin-bottom: 50px; }
}


/* ------------------------------------------------------------------------- *
 *  Fluid width
 *
 *  The parent is fixed: a 1024px shell with a 680px text column inside it, so a
 *  1920px window is 1240px of empty margin. The Customizer has two sliders for
 *  this but both write plain pixels, which only trades one fixed width for
 *  another.
 *
 *  One rule for the whole site. The header bar, the home and category listings,
 *  the footer and the article column all resolve to the same number, so every
 *  page has the same left and right edge. It grows with the window between two
 *  fixed ends: never narrower than the 680px the theme has always used, never
 *  wider than 940px, which is about 113 characters at the theme's 17px.
 *
 *  Below a 1236px window that is the same 680px the theme always used, so
 *  phones, tablets and small laptops are untouched. Note this also makes the
 *  listings narrower there than the parent's 1024px shell was -- the price of
 *  one number for every page.
 *
 *  The two Customizer sliders still work and still win: dynamic-styles.php
 *  prints them inline in the head, after this file. Setting either one to a
 *  fixed pixel value switches that layer back to fixed.
 * ------------------------------------------------------------------------- */

:root {
	--cd-col: clamp(680px, 55vw, 940px);
}

.main-inner,
#footer-widgets,
.blog-wrapper { max-width: var(--cd-col); }

/* The parent only gives .header-inner a max-width and auto margins above
 * 1024px; below that the header is a different, full-bleed layout with its own
 * padding, and capping it there would pin it to the left edge. */
@media only screen and (min-width: 1024px) {
	.header-inner { max-width: var(--cd-col); }
}

/* The parent sizes the header bar with width: 100vw, which counts the
 * scrollbar. The bar is then ~15px wider than the page, its contents sit ~7px
 * to the right of everything below it, and the page gets a horizontal
 * scrollbar. auto lets it stretch to the real viewport instead, in both the
 * fixed and the relative variant the parent uses. */
.header { width: auto; left: 0; right: 0; }

/* An image narrower than the column was left-aligned while its caption was
 * centred. Centre the image so the two agree. */
.entry > .wp-block-image img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}