/*
Theme Name: My Story Child Theme
Theme URI: https://yourwebsite.com/
Description: A child theme for integrating the interactive story.
Author: Your Name
Author URI: https://yourwebsite.com/
Template: twentytwentyfive
Version: 1.0.0
Text Domain: my-story-child-theme
*/

/* ---------------------------------------------------------------------------
 * Card separator on the post list.
 * The homepage query loop renders post content, so a post without a <!--more-->
 * tag prints in full and the card loses its rhythm. The date row is the one
 * element every card has, so the rule lives there and never depends on length.
 * Scoped to .wp-block-post-template: single posts keep their clean layout.
 * ------------------------------------------------------------------------- */
.wp-block-post-template .wp-block-post-date {
	border-top: 1px solid rgba(17, 17, 17, 0.18);
	margin-top: 1.1rem;
	padding-top: 0.75rem;
}
.wp-block-post-template .more-link {
	display: inline-block;
	margin-top: 0.35rem;
}

/* ===========================================================================
 * Homepage — editorial layout (hero + three-column cards)
 * Prefixed with .wz-home because the block theme's global styles print after
 * the theme stylesheet and win on equal specificity.
 * ========================================================================= */

.wz-home {
	--wz-paper: #FCFBF7;
	--wz-ink: #17160F;
	--wz-ink-soft: #3B3830;
	--wz-muted: #6E6A5E;
	--wz-rule: #E4DFD3;
	--wz-accent: #8A3324;
	--wz-serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
	--wz-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
	background: var(--wz-paper);
	color: var(--wz-ink);
}

/* ------------------------------------------------------------------- hero */
.wz-home .wz-hero { margin: 2rem 0 2.5rem; }

/* the theme renders post-template as a grid; the hero is one post, full width */
.wz-home .wz-hero-query .wp-block-post-template,
.wz-home .wz-hero-query .wp-block-post-template.is-layout-grid,
.wz-home .wz-hero-query .wp-block-post-template.is-layout-flow {
	display: block !important;
	grid-template-columns: 1fr !important;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wz-home .wz-hero-query .wp-block-post-template > li {
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.wz-home .wz-hero-cols {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
	margin: 0 !important;
}

.wz-home .wz-hero-media { flex: 0 0 55% !important; max-width: 55% !important; }
.wz-home .wz-hero-text  { flex: 1 1 45% !important; max-width: 45% !important; }

.wz-home .wz-hero-media img,
.wz-home .wz-hero-img img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	border-radius: 3px;
	transition: transform .4s ease;
}

.wz-home .wz-hero-media a:hover img { transform: scale(1.015); }

.wz-home .wz-kicker,
.wz-home .wz-kicker a {
	font-family: var(--wz-sans) !important;
	font-size: 0.6875rem !important;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wz-accent) !important;
	text-decoration: none;
	font-weight: 500;
	line-height: 1.4;
}

.wz-home .wz-hero-title,
.wz-home .wz-hero-title a {
	font-family: var(--wz-serif) !important;
	font-size: clamp(1.75rem, 1.1rem + 2.1vw, 2.5rem) !important;
	font-weight: 400 !important;
	line-height: 1.14 !important;
	letter-spacing: -0.022em !important;
	margin: 0.7rem 0 0.6rem !important;
	color: var(--wz-ink) !important;
	text-decoration: none;
	text-wrap: balance;
}

.wz-home .wz-hero-title a:hover { color: var(--wz-accent) !important; }

.wz-home .wz-hero-dek,
.wz-home .wz-hero-dek p {
	font-family: var(--wz-serif) !important;
	font-size: 1.0625rem !important;
	line-height: 1.6 !important;
	color: var(--wz-ink-soft) !important;
	margin: 0 0 1rem !important;
	max-width: 32rem;
}

.wz-home .wz-meta,
.wz-home .wz-meta a {
	font-family: var(--wz-sans) !important;
	font-size: 0.75rem !important;
	color: var(--wz-muted) !important;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	margin: 0 !important;
}

/* ------------------------------------------------------------ section head */
.wz-home .wz-section-head {
	border-top: 1px solid var(--wz-rule);
	border-bottom: 1px solid var(--wz-rule);
	padding: 0.95rem 0;
	margin: 0 !important;
	gap: 1rem;
}

.wz-home .wz-section-label {
	font-family: var(--wz-sans) !important;
	font-size: 0.6875rem !important;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wz-muted) !important;
	margin: 0 !important;
}

.wz-home .wz-section-link,
.wz-home .wz-section-link a {
	font-family: var(--wz-sans) !important;
	font-size: 0.75rem !important;
	color: var(--wz-muted) !important;
	text-decoration: none;
	margin: 0 !important;
}

.wz-home .wz-section-link a:hover { color: var(--wz-ink) !important; }

/* ------------------------------------------------------------------- grid */
.wz-home .wz-grid .wz-cards,
.wz-home .wz-grid .wz-cards.is-layout-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 0 !important;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wz-home .wz-grid .wz-cards > li {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1.85rem 1.75rem 1.85rem 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--wz-rule) !important;
	background: none !important;
	box-shadow: none !important;
	min-width: 0;
}

.wz-home .wz-grid .wz-cards > li:nth-child(3n + 2),
.wz-home .wz-grid .wz-cards > li:nth-child(3n) {
	padding-left: 1.75rem !important;
	border-left: 1px solid var(--wz-rule) !important;
}

.wz-home .wz-grid .wz-cards > li:nth-child(3n) { padding-right: 0 !important; }

.wz-home .wz-card-img { margin: 0 !important; }
.wz-home .wz-card-img a { display: block; }

.wz-home .wz-card-img img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
	border-radius: 3px;
	background: #EDE8DC;
	transition: transform .35s ease;
}

.wz-home .wz-card-img a:hover img { transform: scale(1.015); }

.wz-home .wz-card-title,
.wz-home .wz-card-title a {
	font-family: var(--wz-serif) !important;
	font-size: 1.25rem !important;
	font-weight: 400 !important;
	line-height: 1.28 !important;
	letter-spacing: -0.012em !important;
	margin: 0 !important;
	color: var(--wz-ink) !important;
	text-decoration: none;
	text-wrap: pretty;
}

.wz-home .wz-card-title a:hover { color: var(--wz-accent) !important; }

.wz-home .wz-card-dek,
.wz-home .wz-card-dek p {
	font-family: var(--wz-serif) !important;
	font-size: 0.9375rem !important;
	line-height: 1.6 !important;
	color: var(--wz-muted) !important;
	margin: 0 !important;
}

/* the excerpt block appends its own "read more"; the title is the link */
.wz-home .wz-card-dek .wp-block-post-excerpt__more-link,
.wz-home .wz-hero-dek .wp-block-post-excerpt__more-link { display: none; }

.wz-home .wz-grid .wz-cards > li .wz-meta { margin-top: auto !important; }

/* -------------------------------------------------------------- responsive */
@media (max-width: 900px) {
	.wz-home .wz-grid .wz-cards,
	.wz-home .wz-grid .wz-cards.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.wz-home .wz-grid .wz-cards > li:nth-child(3n) { padding-right: 1.75rem !important; }
	.wz-home .wz-grid .wz-cards > li:nth-child(2n) {
		padding-right: 0 !important;
		padding-left: 1.75rem !important;
		border-left: 1px solid var(--wz-rule) !important;
	}
	.wz-home .wz-grid .wz-cards > li:nth-child(2n + 1) {
		padding-left: 0 !important;
		border-left: 0 !important;
	}
}

@media (max-width: 760px) {
	.wz-home .wz-hero-cols { display: block !important; }
	.wz-home .wz-hero-media,
	.wz-home .wz-hero-text {
		flex: 1 1 auto !important;
		max-width: 100% !important;
	}
	.wz-home .wz-hero-media { margin-bottom: 1.5rem; }
	.wz-home .wz-grid .wz-cards,
	.wz-home .wz-grid .wz-cards.is-layout-grid { grid-template-columns: 1fr !important; }
	.wz-home .wz-grid .wz-cards > li,
	.wz-home .wz-grid .wz-cards > li:nth-child(2n),
	.wz-home .wz-grid .wz-cards > li:nth-child(3n) {
		padding: 1.5rem 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
	}
}

/* ---------------------------------------------------------------------------
 * Refinements
 * 1. Featured images are 1200x675 (16:9) on this site. Forcing 3:2 cropped
 *    the sides; match the source ratio so nothing is cut.
 * 2. The section head label and link had different font sizes and line
 *    heights, so their baselines never lined up.
 * ------------------------------------------------------------------------- */
.wz-home .wz-hero-media img,
.wz-home .wz-hero-img img,
.wz-home .wz-card-img img {
	aspect-ratio: 16 / 9 !important;
	object-fit: cover;
}

.wz-home .wz-section-head { align-items: center !important; }

.wz-home .wz-section-label,
.wz-home .wz-section-link,
.wz-home .wz-section-link a {
	font-size: 0.6875rem !important;
	line-height: 1 !important;
	margin: 0 !important;
}

.wz-home .wz-section-link a { letter-spacing: 0.01em; }

/* the theme gives every post a 20px rounded card; the grid is separated by
 * hairlines, so the card itself must be a plain block */
.wz-home .wz-cards > li,
.wz-home .wz-cards > li.wp-block-post {
	border-radius: 0 !important;
	border-color: transparent !important;
	box-shadow: none !important;
	overflow: visible !important;
}

/* ---------------------------------------------------------------------------
 * Single post featured image.
 * The parent theme's single.html carries aspect-ratio:3/2 inline on the img,
 * which crops the 1200x675 (16:9) uploads. An inline style can only be beaten
 * with !important, so this rule is deliberately forceful.
 * ------------------------------------------------------------------------- */
.wp-block-post-featured-image img {
	aspect-ratio: 16 / 9 !important;
	height: auto !important;
	object-fit: cover !important;
}