/*
Theme Name: What To Make With
Theme URI: https://whattomakewith.com/
Description: Food blog child theme for whattomakewith.com. Built on Genesis.
Author: Kate Sorensen
Author URI: https://whattomakewith.com/
Version: 1.0.0
Template: genesis
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: whattomakewith
*/

/* ---------- Fonts ---------------------------------------------------- */
/* Inter and Playfair Display are variable: one file covers the weight axis. */

@font-face {
	font-family: 'Playfair Display';
	src: url('assets/fonts/playfair-display-latin.woff2') format('woff2-variations');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('assets/fonts/inter-latin.woff2') format('woff2-variations');
	font-weight: 200 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Homemade Apple';
	src: url('assets/fonts/homemade-apple-latin.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ---------- Tokens --------------------------------------------------- */

:root {
	--coral: #ff5a5f;
	--coral-lt: #ff8a8d;
	--ink: #3a3a3a;
	--bg: #f7f4f2;
	--link: #e0484f;
	--link-hover: #c93a43;

	--font-head: 'Playfair Display', Georgia, serif;
	--font-body: 'Inter', system-ui, -apple-system, sans-serif;
	--font-accent: 'Homemade Apple', cursive;

	--wrap: 1200px;
	--gap: 20px;
}

/* ---------- Base ----------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.7;
}

h1, h2, h3, h4 {
	font-family: var(--font-head);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 .5em;
}

h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.125rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }

a { color: var(--link); }
a:hover, a:focus { color: var(--link-hover); }

img { max-width: 100%; height: auto; display: block; }

.wtmw-wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 16px;
}

/* Full width, no sidebar. */
.site-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.sidebar-primary, .sidebar-secondary { display: none; }
.breadcrumb { display: none; }

/* Centered section headings, matching the reference. */
.wtmw-section__title {
	text-align: center;
	margin: 48px 0 24px;
}

/* ---------- Ad slots -------------------------------------------------- */

.wtmw-ad-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 32px auto;
	width: 100%;
	/* min-height is set inline per slot so the reservation is explicit. */
}

/* ---------- Tile grids ------------------------------------------------ */
/* 2 columns on mobile, N on desktop — the Feast pattern. */

.wtmw-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gap);
}

@media (min-width: 768px) {
	.wtmw-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.wtmw-grid--4 { grid-template-columns: repeat(4, 1fr); }
	.wtmw-grid--5 { grid-template-columns: repeat(5, 1fr); }
	.wtmw-grid--6 { grid-template-columns: repeat(6, 1fr); }
}

.wtmw-tile__link { text-decoration: none; color: inherit; display: block; }

.wtmw-tile__media {
	position: relative;
	aspect-ratio: 3 / 4;          /* the signature ratio */
	border-radius: 8px;
	overflow: hidden;
	background: var(--coral-lt);
}

.wtmw-tile__media img {
	width: 100%; height: 100%;
	object-fit: cover;
}

.wtmw-tile__placeholder {
	display: block; width: 100%; height: 100%;
	background: linear-gradient(150deg, var(--coral-lt), var(--coral));
}

.wtmw-tile__rank {
	position: absolute; top: 8px; left: 8px;
	background: #fff; color: var(--coral);
	font-weight: 700; font-size: 14px;
	width: 28px; height: 28px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
}

.wtmw-tile__title {
	font-size: 1rem;
	text-align: center;
	margin: 10px 0 0;
}

/* ---------- Hero ------------------------------------------------------ */

.wtmw-hero { padding: 24px 0 8px; }

.wtmw-hero__media {
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	background: var(--coral-lt);
}

.wtmw-hero__placeholder {
	display: block; width: 100%; height: 100%;
	background: linear-gradient(140deg, var(--coral-lt), var(--coral));
}

.wtmw-hero__text { text-align: center; padding: 20px 0 0; }
.wtmw-hero__title { margin-bottom: .2em; }
.wtmw-hero__tagline { margin: 0; opacity: .75; }

/* ---------- Meet Kate -------------------------------------------------- */

.wtmw-meet-kate__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	align-items: center;
	background: #fff;
	border-radius: 10px;
	padding: 24px;
}

@media (min-width: 768px) {
	.wtmw-meet-kate__inner { grid-template-columns: 200px 1fr; }
}

.wtmw-meet-kate__photo {
	width: 160px; height: 160px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
	background: var(--coral-lt);
}

.wtmw-meet-kate__photo img { width: 100%; height: 100%; object-fit: cover; }
.wtmw-meet-kate__placeholder { display: block; width: 100%; height: 100%; }
.wtmw-meet-kate__copy p:last-child { margin-bottom: 0; }

/* ---------- Single post ----------------------------------------------- */

.single .entry-title { text-align: center; }

.single .entry-content {
	max-width: 720px;
	margin: 0 auto;
}

/* Generous paragraph rhythm — ad scripts inject between blocks. */
.single .entry-content p { margin: 0 0 1.4em; }

.single .entry-content img { border-radius: 8px; margin: 1.5em auto; }