/* ============================================================
   League of Cooking (Limoncella-style) — About page (Phase 7).
   The existing About page (page 198, /about-2/) already has 100% REAL
   content (Amelia's real bio, real photos of her kitchen/kid/cat, real
   culinary-experience copy, real community CTA) built with the OLD
   everaro-style palette as inline block styles. Per the "don't touch
   data, restyle only" rule, this file recolors those inline styles via
   attribute selectors (never touches post content) to the Limoncella
   token palette, and styles the two NEW shortcodes appended at the end
   of the page: [lim_about_quote] (decorative pull-quote, matching
   Limoncella's cream/squiggle card) and [lim_about_social] (real
   Connect-With-Me row, reusing lim-about__social-btn from home.css).
   ============================================================ */

/* Native Kadence page-title band is redundant - the real About content
   already opens with its own "About Me" hero band (MEASURED fix, same
   issue found on the Recipe Index page). */
body.page-id-198 .entry-hero { display: none; }

/* ---- Recolor the existing real content's inline band backgrounds ---- */
.page-id-198 .wp-block-group[style*="background-color:#FBF0F2"] {
	background-color: var(--lim-surface-alt) !important;
}
.page-id-198 .wp-block-group[style*="background-color:#E3BFCB"] {
	background-color: var(--lim-accent) !important;
}
.page-id-198 [style*="color:#E3BFCB"] {
	color: var(--lim-accent) !important;
}
.page-id-198 [style*="color:#2a2a2a"] {
	color: var(--lim-ink-dark) !important;
}
.page-id-198 .wp-block-image img[style*="border-radius"] {
	border-radius: var(--lim-radius-button) !important;
}
.page-id-198 .wp-block-button__link[style*="background-color:#ffffff"] {
	background-color: var(--lim-surface) !important;
	border-radius: var(--lim-radius-button) !important;
}

/* ---- Typography: match Limoncella's heading/body fonts sitewide ---- */
.page-id-198 h1, .page-id-198 h2, .page-id-198 h3 { font-family: var(--lim-font-heading); }
.page-id-198 p, .page-id-198 .wp-block-paragraph { font-family: var(--lim-font-body); }

/* ---- [lim_about_quote] — decorative pull-quote card ---- */
.lim-about-quote {
	max-width: var(--lim-container-wide); margin: var(--lim-space-12) auto; padding: var(--lim-space-8) 20px;
	background: var(--lim-surface-alt); border: 1px dashed var(--lim-border); border-radius: var(--lim-radius-button);
	text-align: center;
}
.lim-about-quote__squiggle { display: block; font-size: 28px; color: var(--lim-accent); margin-bottom: var(--lim-space-3); }
.lim-about-quote p {
	font-family: var(--lim-font-heading); font-size: 22px; line-height: 1.4; color: var(--lim-ink-dark);
	max-width: 640px; margin: 0 auto;
}

/* ---- [lim_about_social] — Connect With Me row ---- */
.lim-about-social {
	max-width: var(--lim-container-wide); margin: 0 auto; padding: var(--lim-space-12) 20px; text-align: center;
}
.lim-about-social h2 { margin-bottom: var(--lim-space-6); }
.lim-about-social__row {
	display: flex; justify-content: center; gap: var(--lim-space-4); flex-wrap: wrap;
}
.lim-about-social__row .lim-about__social-btn { min-width: 160px; }

@media (max-width: 767px) {
	.lim-about-quote p { font-size: 18px; }
}

/* ============================================================
   ADDED 2026-07-22 — About page brought in line with the reference's own
   About layout, MEASURED against https://demos.restored316.com/limoncella/about/
   (the saved mirror has only the homepage; every inner page there is an
   80-byte "No Content" stub, so this was measured live).

   Reference structure, and what ours was doing instead:
     - hero: a large photo hard against the left edge, paired with a tinted
       panel carrying an eyebrow, heading and intro.
       Ours: a small floated photo with copy running under it.
     - alternating full-bleed bands, generous vertical rhythm.
     - the favourites grid carries a NUMBERED CIRCLE BADGE sitting on the seam
       between the photo and the card body — the same component as the
       homepage Top 10. Ours had no numbers at all.
   Page content is NOT rewritten: every heading, paragraph and photo below is
   the page's own real content, restyled in place.
   ============================================================ */

/* ---- REAL BUG, found by measuring rendered image boxes, not by eye ----
   `inkitchenwithmykid-scaled.jpg` is a 1429x2560 portrait shot dropped into a
   full-width figure with no height constraint, so it rendered at 1400x2503 —
   a two-and-a-half-metre-tall photo that reads as a giant empty bordered box
   until you scroll through it. Every in-content photo is now capped and
   cropped rather than being allowed to set its own height.
   NOTE this only fixes the LAYOUT. The page still *downloads* the originals
   (me.jpg 2.0 MB, cat.jpg 2.6 MB) because the block markup hard-codes
   full-size src with no srcset. Fixing the weight means re-inserting those
   three images through the media library so WordPress emits sized variants —
   a content edit, deliberately not done here. */
.page-id-198 .entry-content figure.wp-block-image { margin-left: 0; margin-right: 0; }
.page-id-198 .entry-content figure.wp-block-image img {
	display: block;
	width: 100%;
	max-height: 520px;
	object-fit: cover;
	object-position: center 30%;
	border-radius: var(--lim-radius-button) !important;
}
/* The two side-by-side portraits (me.jpg, cat.jpg) sit in narrow columns where
   a 520px cap would still be far taller than their column is wide. */
.page-id-198 .wp-block-column figure.wp-block-image img {
	max-height: 460px;
	object-position: center center;
}

/* ---- Hero band: eyebrow + title ---- */
.page-id-198 .entry-content > .wp-block-group:first-child { text-align: center; }
.page-id-198 .entry-content > .wp-block-group:first-child p {
	font-family: var(--lim-font-heading);
	font-size: 13px; font-weight: 600;
	text-transform: uppercase; letter-spacing: 2px;
	color: var(--lim-accent);
	margin-bottom: var(--lim-space-3);
}
.page-id-198 .entry-content > .wp-block-group:first-child h1,
.page-id-198 .entry-content > .wp-block-group:first-child h2 {
	font-family: var(--lim-font-heading);
	font-size: clamp(2.25rem, 1.728rem + 1.63vw, 3rem);
	font-weight: 700;
	color: var(--lim-ink-dark);
	margin: 0;
}

/* ---- Section headings + body rhythm ---- */
.page-id-198 .entry-content h2 {
	font-family: var(--lim-font-heading);
	font-weight: 700;
	color: var(--lim-ink-dark);
}
.page-id-198 .entry-content p {
	font-family: var(--lim-font-body);
	line-height: 1.8;
	color: var(--lim-ink);
}
/* ---- PRE-EXISTING BUG: the two-column rows were silently stacking ----
   The photo and bio were supposed to sit side by side but rendered one above
   the other, which is why this page read as one long single column instead of
   the reference's paired layout. Root cause, measured rather than guessed:
   these column blocks carry inline `flex-basis:40%` / `60%` (and 55/45 further
   down) that already total exactly 100%, while WordPress applies a default
   `gap: 9px`. 560 + 840 + 9 = 1409 in a 1400px row, and since the row is
   `flex-wrap: wrap` the browser breaks the line on hypothetical size BEFORE it
   tries shrinking — so column two dropped to its own row.
   `column-gap: 0` is the fix; separation comes from padding instead, which is
   inside the border-box and therefore costs no extra width. (An earlier attempt
   here set `gap: 48px`, which made the same failure worse — never add gap to
   these rows.) */
.page-id-198 .wp-block-columns { align-items: center; column-gap: 0; }
.page-id-198 .wp-block-columns > .wp-block-column + .wp-block-column { padding-left: var(--lim-space-8); }

/* ---- Favourites grid: numbered badges on the photo/body seam ----
   Same treatment as the homepage Top 10 component. The grid is a plain block
   list in the page content, so the counter is driven off the headings' own
   order rather than any added markup. */
.page-id-198 .wp-block-group[style*="background-color:#E3BFCB"] .wp-block-columns,
.page-id-198 .lim-about-favs { counter-reset: limfav; }
.page-id-198 .wp-block-group[style*="background-color:#E3BFCB"] .wp-block-column { position: relative; }
.page-id-198 .wp-block-group[style*="background-color:#E3BFCB"] .wp-block-column::before {
	counter-increment: limfav;
	content: counter(limfav);
	position: absolute;
	left: 50%; transform: translateX(-50%);
	top: calc(var(--lim-fav-img-h, 200px) - 16px);
	width: 32px; height: 32px;
	border-radius: var(--lim-radius-circle);
	background: var(--lim-surface);
	color: var(--lim-ink-dark);
	border: 1px solid var(--lim-border);
	font-family: var(--lim-font-heading);
	font-size: 13px; font-weight: 700;
	line-height: 30px; text-align: center;
	z-index: 2;
}

/* ---- Community CTA band ----
   The page's own accent band; keep it, just align it to the token palette and
   give the button the reference's press-in hover. */
.page-id-198 .wp-block-group[style*="background-color:#E3BFCB"] .wp-block-button__link:hover {
	transform: scale(.95);
}

@media (max-width: 767px) {
	.page-id-198 .entry-content figure.wp-block-image img { max-height: 360px; }
	.page-id-198 .wp-block-columns { gap: var(--lim-space-6); }
}