/* ============================================================
   League of Cooking (Limoncella-style) — homepage sections.
   REWRITTEN 2026-07-19 per Phase 1 audit (PHASE1-AUDIT.md). Values from
   computed-style audit against the live reference; card/grid counts,
   badge positions, and button styles corrected from the audit's
   incorrect/missing findings.
   ============================================================ */

/* ---- Hero: 4 category tiles (portrait) + circular icon row ---- */
/* Fix 2026-07-20 (owner-flagged, direct reference comparison): the reference
   sits the header + category-tile grid on WHITE, with the light-blue page
   background only starting at the tagline/icons row below - full-width
   horizontal color bands per section, not one flat body color bleeding
   through everything ("vertical" look). body's default light-blue was
   showing behind the grid since .lim-hero never set its own background.
   Full-bleed white band via the 100vw/translateX trick (no markup change,
   .lim-hero itself stays width-constrained for the actual tile grid). */
.lim-hero { padding: var(--lim-space-12) 20px; max-width: var(--lim-container-wide); margin: 0 auto; }
.lim-hero__grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--lim-space-6);
	margin-bottom: var(--lim-space-8);
	position: relative;
}
/* Full-bleed white band behind the header-padding + tile grid only, stopping
   right before .lim-hero__lower (which keeps the page's normal light-blue
   background) - extends past the grid's own box top/bottom by the
   surrounding padding/margin amounts so the two colors meet with no seam. */
.lim-hero__grid::before {
	content: ''; position: absolute;
	top: calc(-1 * var(--lim-space-12)); bottom: calc(-1 * var(--lim-space-8));
	left: 50%; width: 100vw; transform: translateX(-50%);
	background: var(--lim-surface); z-index: -1;
}
/* ------------------------------------------------------------------
   Fix 2026-07-22 (owner-flagged: "la premier section des image a un style,
   utilise original look"). Rebuilt the tile against the reference's real
   structure instead of the generic card we had. What the reference actually
   does, read off its own markup + inline CSS:
     - the tile is a Kadence COLUMN with the photo as its background
       (background-size: cover; background-position: center center), not an
       <img> card; height comes from a 300px spacer inside it (200px mobile)
     - border-radius 5px on all four corners
     - the column is entirely clickable (.kb-section-link-overlay)
     - the category label is an <h2> centred BOTH ways inside the tile
       (justify-content:center on the inner column), inset 48px left/right,
       padding 0.5rem, text-align center, font-size clamp(0.8rem→0.9rem),
       WHITE text (palette9) on SAGE (palette5), with a 3px solid palette4
       bottom border and margin-bottom:-3px
   Ours had it as a small rounded pill pinned to the top-left in uppercase —
   wrong position, wrong shape, wrong case. We keep a real <img> rather than a
   CSS background (better for srcset/lazyload/SEO than the reference's own
   choice) and absolutely position it to fill the tile, which renders
   identically. Reference tiles have NO hover zoom or darkening overlay, so
   both of those are removed — only the label state changes.
   ------------------------------------------------------------------ */
/* CORRECTED 2026-07-22 (owner-flagged: "why is in midle insted of top like
   original"). Owner was right. My earlier read of the reference CSS grabbed the
   wrong block — a `justify-content:center` and a `border-bottom:3px` that belong
   to a different advanced-heading elsewhere on the page. Re-measured by loading
   the saved reference homepage in a real browser and reading computed styles off
   the actual category column:
     DOM order is H2 **then** the 300px spacer (not spacer then H2), so the label
     sits at the TOP of the tile, not centred and not at the bottom.
     label     margin: -3px 48px 7.2px  (overhangs the tile top by 3px)
               padding: 8px; width 202.5px of a 299px column
               text-transform: UPPERCASE; letter-spacing: 1px
               font: Work Sans 600 / 14.4px / line-height 21.6px; centred
               background palette5; color palette9; NO border-bottom at all
     column    border-radius 0, overflow VISIBLE (so the -3px overhang shows)
     inner     border-radius 5px  <- the radius is on the image box, not the tile
     height    345px = 41 label + 7.2 margin + 300 spacer - 3 overhang */
.lim-hero__tile {
	position: relative; display: block;
	text-decoration: none; border-radius: 0; overflow: visible;
	height: 345px;
}
.lim-hero__tile-img {
	position: absolute; inset: 0; display: block; overflow: hidden;
	border-radius: var(--lim-radius-button);
}
.lim-hero__tile-img img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.lim-hero__tile-label {
	position: relative; z-index: 1; display: block;
	margin: -3px 48px 7.2px;
	padding: var(--lim-space-2);
	box-sizing: border-box;
	/* BRIGHT PASS 2026-08-31: was a solid sage plate with white type. Over a
	   photo that reads as a dark block; the label now sits on a near-white
	   plate with dark type and a clay underline, which keeps the accent and
	   lifts contrast (dark-on-white ~12:1 vs white-on-sage ~2.9:1). */
	background: rgba(255, 255, 255, 0.95); color: var(--lim-ink-dark);
	border-bottom: 3px solid var(--lim-accent);
	box-shadow: 0 2px 10px var(--lim-shadow);
	font-family: var(--lim-font-heading);
	font-size: clamp(0.8rem, 0.73rem + 0.217vw, 0.9rem);
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: background .25s ease;
}
.lim-hero__tile:hover .lim-hero__tile-label { background: var(--lim-accent); }

/* Cette rangee etait un split 25%/75% (tagline / icones) copie du layout
   "right-golden" de la reference. Depuis le retrait de la tagline le
   2026-08-31 elle ne contient plus que les icones, qui occupent la largeur
   entiere. Les filets haut/bas sont conserves : ils separaient deja la rangee
   des tuiles au-dessus, ce role ne depend pas de la tagline. */
.lim-hero__lower {
	display: flex; align-items: center; gap: var(--lim-space-4);
	border-top: 1px solid var(--lim-border); border-bottom: 1px solid var(--lim-border);
	padding: var(--lim-space-6) 0;
}
/* La tagline ("Simple, family-friendly recipes…") a ete retiree le 2026-08-31
   a la demande de l'owner. Ses regles (.lim-hero__tagline, -icon, .lim-script)
   sont supprimees avec elle, ainsi que les deux familles Google Fonts qu'elle
   etait SEULE a utiliser — 'Special Elite' et 'Homemade Apple' — retirees de
   l'URL de fonts dans inc/enqueue.php. */
/* 6 equal columns with a 1rem gap, matching the reference's `kt-has-6-columns`
   inner row. nowrap + flexible basis keeps all 6 on one line at any desktop
   width; the circles shrink instead of a 6th dropping to its own row. */
.lim-hero__icons { display: flex; justify-content: space-between; gap: var(--lim-space-4); flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; }
.lim-hero__icon { text-align: center; text-decoration: none; flex: 1 1 0; min-width: 0; }
/* Fix 2026-07-20 (owner-flagged, direct reference comparison): MEASURED the
   real icon circles - a thick 5px WHITE border (not our 1px gray hairline)
   plus a soft all-around glow shadow, and no hover feedback at all before
   this fix. Added a subtle scale-up on hover since these are real links. */
/* Fix 2026-07-22 (owner-flagged: image sizes + hover animation). MEASURED from
   the reference: these circles are ~143px across, not 84px — the icon row sits
   in the 75% column of a 25/75 golden row (~937px at a 1290px container), 6
   columns with 1rem gaps => (937 - 80) / 6 ≈ 143px. The white ring is 5px on
   desktop and drops to 2px on mobile. The hover is the theme's own
   `.hover-rotate img:hover { transform: rotate(5deg) }` at
   `transition: transform .3s ease-in-out` — a ROTATE, not the scale-up we had. */
.lim-hero__icon-img {
	display: block; width: min(135px, 100%); aspect-ratio: 1; height: auto;
	border-radius: var(--lim-radius-circle);
	overflow: hidden; margin: 0 auto var(--lim-space-2);
	border: 5px solid var(--lim-surface);
	box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
	transition: transform 0.3s ease-in-out;
}
.lim-hero__icon-img img { width: 100%; height: 100%; object-fit: cover; }
.lim-hero__icon:hover .lim-hero__icon-img { transform: rotate(5deg); }
/* Craving DNA collage icon (owner request: "an image containing a lot of
   images" - signals "matches from many recipes" instead of one dish photo) */
.lim-hero__icon-img--collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; }
.lim-hero__icon-collage-cell { display: block; overflow: hidden; }
.lim-hero__icon-collage-cell img { width: 100%; height: 100%; object-fit: cover; }
/* Fix 2026-07-20: all 6 icons are now real-photo circles (matching the
   reference), so the flat colored-circle-with-initials style is gone. */
/* MEASURED: label is 0.9rem clamp / weight 600 desktop, 12px on mobile, with a
   0.5rem gap above it — ours was a flat 13px/400. */
.lim-hero__icon-label {
	display: block; margin-top: var(--lim-space-2);
	font-family: var(--lim-font-body);
	font-size: clamp(0.8rem, 0.73rem + 0.217vw, 0.9rem); font-weight: 600;
	color: var(--lim-ink-dark); text-transform: none; letter-spacing: 0;
}

/* ---- Decorative separator (repeats between most sections) ---- */
.lim-separator { max-width: var(--lim-container-wide); margin: 0 auto; padding: 0 20px; }
.lim-separator::before {
	content: ''; display: block; height: 4px; border-top: 1px solid var(--lim-border); border-bottom: 1px solid var(--lim-border);
}
.lim-separator--lemon { position: relative; padding-top: var(--lim-space-4); }
.lim-separator--lemon .lim-separator__icon { position: absolute; top: 0; left: 20px; font-size: 20px; }

/* ---- Craving DNA fixed bottom bar (RE-CATEGORIZED: Limoncella's version is
   position:fixed, a sitewide layer over every page, NOT in-flow homepage
   content - see the note in inc/home-sections.php and the hook in
   inc/frontend-extras.php). ---- */
.lim-craving-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 997;
	/* BRIGHT PASS 2026-08-31: was a full-width charcoal slab pinned to the
	   bottom of every page — the second-biggest source of the "dark" read
	   after the announcement bar. Now a white bar separated from the content
	   by a hairline + soft lift rather than by weight. */
	background: rgba(255,255,255,.96); color: var(--lim-ink-dark); padding: var(--lim-space-3) 20px;
	border-top: 1px solid var(--lim-border);
	box-shadow: 0 -4px 24px var(--lim-shadow);
}
.lim-craving-bar__inner { max-width: var(--lim-container-wide); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--lim-space-4); }
.lim-craving-bar__pills { display: flex; gap: var(--lim-space-2); flex-wrap: wrap; }
.lim-pill { background: var(--lim-surface-alt); border: 1px solid var(--lim-border); color: var(--lim-ink-muted); border-radius: 20px; padding: 6px 16px; font-size: 13px; }
.lim-craving-bar__text { flex: 1; min-width: 220px; margin: 0; color: var(--lim-ink); font-size: 14px; }

/* [lim_craving_section] - dedicated homepage entry point (owner request
   2026-07-20), distinct from the fixed teaser bar: a real in-flow section
   with working links straight into the Craving DNA tool. */
.lim-craving-section { text-align: center; }
/* Fix 2026-07-20 (owner-flagged: section was oversized): with the heading/
   paragraph removed (now duplicated by the embedded app's own first
   screen), these bands only need to fit a single eyebrow line + the app
   itself - cut from 64px/32px padding down to something proportional. */
.lim-craving-section__top { background: var(--lim-surface); padding: var(--lim-space-6) 20px var(--lim-space-4); }
.lim-craving-section__bottom { background: var(--lim-surface-alt); padding: var(--lim-space-4) 20px var(--lim-space-8); }
.lim-craving-section__inner { max-width: 640px; margin: 0 auto; }
/* Fix 2026-07-20 (owner request: embed the real app, not a link-out) - the
   Craving DNA app has its own internal UI/width needs, wider than the
   plain-text column above it. */
.lim-craving-section__inner--wide { max-width: 720px; }
.lim-craving-section__eyebrow {
	display: block; text-transform: uppercase; letter-spacing: 1px; font-size: 13px;
	font-weight: 600; color: var(--lim-accent); margin-bottom: var(--lim-space-2);
}
.lim-craving-section h2 { margin: 0 0 var(--lim-space-3); }
.lim-craving-section p { color: var(--lim-ink); margin-bottom: 0; }
.lim-craving-section__moods { display: flex; justify-content: center; gap: var(--lim-space-2); flex-wrap: wrap; margin-bottom: var(--lim-space-6); }
.lim-pill--link {
	background: var(--lim-surface); border: 1px solid var(--lim-border); color: var(--lim-ink-dark);
	text-decoration: none; transition: 0.2s;
}
.lim-pill--link:hover { background: var(--lim-accent); color: #fff; border-color: var(--lim-accent); }
.lim-craving-section__cta { font-size: 17px; padding: 14px 32px; }

/* Keep the last section from being visually hidden behind the fixed bar */
body { padding-bottom: 64px; }
@media (max-width: 1023px) { body { padding-bottom: 110px; } }

/* Fix 2026-07-20: found via real-browser testing on a long real post title
   ("Banana Pudding Cookies Recipe | Snacks to Bake, How to Make Banana
   Pudding with Cookies, Banana Pudding Mix") at 390px - the bar's 3 stacked
   rows (pills + text + button) made it ~189px tall on mobile, tall enough to
   visually cover the tail of a long H1 even on initial page load (no scroll).
   The pills are decorative only (no href/click handler), so hide them on
   mobile to cut the bar's footprint roughly in half - reduces overlap risk
   for ANY long content near the fold, not just this one title. */
@media (max-width: 767px) {
	.lim-craving-bar__pills { display: none; }
	.lim-craving-bar { padding: var(--lim-space-2) 16px; }
	.lim-craving-bar__text { font-size: 13px; }
}

/* ---- Illustrated newsletter ---- */
.lim-newsletter { background: var(--lim-surface-alt); padding: var(--lim-space-12) 20px; }
.lim-newsletter__inner {
	max-width: var(--lim-container-wide); margin: 0 auto;
	display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--lim-space-12); align-items: center;
}
.lim-newsletter__illustration { display: flex; align-items: center; justify-content: center; }
/* Fix 2026-07-20 (owner request): a fanned stack of 3 real recipe photos,
   layered/tilted at different angles, replacing the single tilted frame. */
.lim-newsletter__stack { position: relative; width: 220px; height: 260px; margin: 0 auto; }
.lim-newsletter__card {
	position: absolute; top: 0; left: 0; width: 190px; height: 220px;
	border-radius: 16px; overflow: hidden; box-shadow: 0 12px 24px rgba(17,57,84,.18);
	border: 4px solid var(--lim-surface);
}
.lim-newsletter__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lim-newsletter__card--0 { transform: rotate(-9deg) translate(0, 10px); z-index: 3; }
.lim-newsletter__card--1 { transform: rotate(6deg) translate(28px, 0); z-index: 2; }
.lim-newsletter__card--2 { transform: rotate(-3deg) translate(14px, 28px); z-index: 1; }
.lim-newsletter__eyebrow { display: block; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; font-weight: 600; color: var(--lim-ink); margin-bottom: var(--lim-space-2); }
.lim-newsletter__form { display: flex; gap: var(--lim-space-2); flex-wrap: wrap; margin-top: var(--lim-space-4); }
.lim-newsletter__form input {
	border: 1px solid var(--lim-border); border-radius: var(--lim-radius-button);
	padding: 12px 14px; font-family: var(--lim-font-body); flex: 1; min-width: 180px;
}
.lim-newsletter__form button {
	background: var(--lim-accent); color: #fff; border: none; border-radius: var(--lim-radius-button);
	padding: 12px 24px; font-weight: 600; cursor: pointer; transition: 0.2s;
}
.lim-newsletter__form button:hover { background: var(--lim-accent-hover); }
.lim-newsletter__form button.lim-newsletter__submit--dark { background: var(--lim-accent); }
.lim-newsletter__form button.lim-newsletter__submit--dark:hover { background: #000; }

/* ---- Buttons used across grid sections ---- */
/* PRO-WHITE PASS 2026-08-31: the "SEE ALL …" buttons were solid mint plates.
   A filled pastel is the single element that most made the page read as a
   hobby blog rather than an editorial site, so they become outline buttons —
   white plate, neutral hairline, dark type — and the clay accent only appears
   on hover, where it now has somewhere to go. The token keeps its name so the
   mint is still one value away if you want it back. */
.lim-btn--periwinkle {
	background: var(--lim-surface); color: var(--lim-ink-dark);
	border: 1px solid var(--lim-border);
	font-size: 13px; letter-spacing: 1px;
}
.lim-btn--periwinkle:hover { background: var(--lim-accent); border-color: var(--lim-accent); color: #fff; }
.lim-btn--outline-light { background: transparent; color: var(--lim-ink-dark); border: 1.5px solid var(--lim-ink-dark); }
.lim-btn--outline-light:hover { background: var(--lim-ink-dark); color: #fff; }

/* ---- Recipe grid sections ---- */
.lim-grid-section { max-width: var(--lim-container-wide); margin: 0 auto; padding: var(--lim-space-12) 20px; position: relative; }
/* Fix 2026-07-20 (owner request): full page previously read as one flat
   background color bleeding through every section. Opt-in full-bleed white
   band (same 100vw trick used on the hero grid) so alternating [lim_grid
   bg="white"] sections create real horizontal color rhythm down the page. */
.lim-grid-section--white::before {
	content: ''; position: absolute; top: 0; bottom: 0;
	left: 50%; width: 100vw; transform: translateX(-50%);
	background: var(--lim-surface); z-index: -1;
}
.lim-grid-section__title {
	text-align: center; font-family: var(--lim-font-heading); font-weight: 700;
	font-size: 28px; color: var(--lim-ink-dark); margin-bottom: var(--lim-space-2);
}
.lim-grid-section__title--left { text-align: left; margin-bottom: 0; }
.lim-grid-section__subtitle { text-align: center; font-style: italic; color: var(--lim-ink); margin-bottom: var(--lim-space-6); }
.lim-grid-section__more { text-align: center; margin-top: var(--lim-space-6); }

/* Ribbon-style section heading (MEASURED: "All the Latest" is a slanted flag
   banner, not plain text) */
.lim-grid-section__ribbon {
	display: inline-block; position: relative; background: var(--lim-accent); color: #fff;
	font-family: var(--lim-font-heading); font-weight: 700; font-size: 18px; text-transform: uppercase;
	padding: 10px 24px 10px 18px; margin-bottom: var(--lim-space-6);
	clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%);
}

.lim-grid-section__header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--lim-space-6); flex-wrap: wrap; gap: var(--lim-space-2); }
.lim-more-link { color: var(--lim-ink-dark); font-size: 14px; text-decoration: none; white-space: nowrap; }
.lim-more-link em { font-style: italic; color: var(--lim-ink); margin-right: 3px; }
.lim-more-link:hover { color: var(--lim-accent); }

.lim-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--lim-space-6); }
.lim-grid--favorites { grid-template-columns: repeat(5, 1fr); }

/* Cards are bordered/shadowed boxes (MEASURED - the first pass had bare
   floating image+text, no card container) */
.lim-card { background: var(--lim-surface); border: 1px solid var(--lim-border); border-radius: var(--lim-radius-button); overflow: hidden; text-align: left; }
/* Fix 2026-07-20: was aspect-ratio 4/3 (landscape, 1.33) - a real mismatch
   found via direct measurement against the live reference, where EVERY
   homepage card image (All the Latest, Top 10 Favorites, Watch Me Cook,
   Favorite Dinner Recipe, Delightful Beverages) measures 0.75 (portrait,
   3/4), matching the archive pages exactly. The old 4/3 crop was cutting
   much more off our (mostly portrait-sourced) real recipe photos than the
   reference ever does, and was inconsistent with our own archive cards. */
.lim-card__img-link { display: block; aspect-ratio: 3/4; overflow: hidden; position: relative; }
.lim-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease-in-out; }
.lim-card:hover .lim-card__img { transform: scale(1.05); }
.lim-card__body { padding: var(--lim-space-4); }
.lim-card__stars { color: var(--lim-accent); font-size: 14px; letter-spacing: 2px; margin-bottom: var(--lim-space-1); }
.lim-card__labels {
	font-family: var(--lim-font-heading); font-size: 12px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .5px; color: var(--lim-accent); margin-bottom: var(--lim-space-1);
}
.lim-card__labels a { color: var(--lim-accent); text-decoration: none; }
.lim-card__labels a:hover { text-decoration: underline; }
.lim-card__title {
	font-size: 17px; margin: 0; line-height: 1.3;
	/* Same 2-line clamp as archive cards - a long real post title shouldn't
	   stretch its card taller than its grid row-mates. */
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lim-card__title a { color: var(--lim-ink-dark); text-decoration: none; }
.lim-card__title a:hover { color: var(--lim-accent); }

/* Number badge centered ON THE SEAM between image and card body (MEASURED -
   first pass had a small corner overlay on the image itself) */
.lim-card--numbered { position: relative; }
.lim-card--numbered .lim-card__number {
	position: absolute; top: calc(75% - 20px); left: 50%; transform: translate(-50%, -50%); z-index: 2;
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--lim-accent); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--lim-font-heading); font-weight: 700; font-size: 16px;
	box-shadow: 0 2px 8px rgba(17,57,84,.25);
}
.lim-card--numbered .lim-card__body { padding-top: var(--lim-space-6); text-align: center; }

/* ---- Meet Amelia band: 3-column (photo / bio / connect card) ----
   MEASURED - the first pass had no photo column at all (2-col only) */
.lim-about { background: var(--lim-surface); padding: var(--lim-space-12) 20px; }
.lim-about__inner {
	max-width: var(--lim-container-wide); margin: 0 auto;
	display: grid; grid-template-columns: 1fr 1.8fr 1fr; gap: var(--lim-space-8); align-items: start;
}
.lim-about__photo { aspect-ratio: 3/4; border-radius: var(--lim-radius-button); overflow: hidden; }
.lim-about__photo img { width: 100%; height: 100%; object-fit: cover; }
.lim-about__text h2 { margin-bottom: var(--lim-space-3); }
/* Fix 2026-07-20 (owner-flagged, direct reference comparison): MEASURED the
   real panel - bookmark icon at top, buttons are white/soft-glow-shadow/3px
   radius (not a bordered outline), each with a left-aligned real platform
   icon, not bare text. */
.lim-about__social {
	position: relative;
	background: var(--lim-surface-alt); border-radius: var(--lim-radius-button); padding: var(--lim-space-8) var(--lim-space-6) var(--lim-space-6);
	border: 1px solid var(--lim-border);
	display: flex; flex-direction: column; gap: var(--lim-space-2);
}
.lim-about__social-bookmark {
	position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
	width: 20px; height: 26px; color: var(--lim-ink-dark);
}
.lim-about__social-bookmark svg { width: 100%; height: 100%; }
.lim-about__social h3 { text-align: center; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 var(--lim-space-2); }
.lim-about__social-btn {
	display: flex; align-items: center; justify-content: center; gap: var(--lim-space-2);
	text-align: center; background: var(--lim-surface); border: none;
	color: var(--lim-ink-dark); text-decoration: none; font-weight: 600; font-size: 14px;
	padding: 10px; border-radius: var(--lim-radius-small);
	box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
	transition: 0.2s;
}
.lim-about__social-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.lim-about__social-btn:hover { background: var(--lim-accent); color: #fff; }

/* ---- Featured-on logo bar (built as a full component + labeled placeholder) ---- */
.lim-featured-on {
	display: flex; align-items: center; justify-content: center; gap: var(--lim-space-8);
	flex-wrap: wrap; padding: var(--lim-space-8) 20px; max-width: var(--lim-container-wide); margin: 0 auto;
}
.lim-featured-on__label { font-family: var(--lim-font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--lim-ink-dark); font-size: 15px; }
.lim-featured-on img { max-height: 32px; width: auto; opacity: .7; }
.lim-featured-on__placeholder { font-size: 13px; color: var(--lim-ink-muted); font-style: italic; border: 1px dashed var(--lim-border); padding: var(--lim-space-2) var(--lim-space-4); border-radius: var(--lim-radius-button); }

/* ---- Shop my Favorite Kitchen Goodies (full-bleed band + placeholder) ---- */
.lim-shop {
	position: relative; text-align: center; padding: var(--lim-space-16) 20px;
	background: var(--lim-surface-alt);
	color: var(--lim-ink);
}
.lim-shop__eyebrow {
	display: inline-block; background: transparent; color: var(--lim-accent);
	font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
	padding: 6px 0; margin-bottom: var(--lim-space-4);
}
.lim-shop h2 { color: var(--lim-ink-dark); max-width: 600px; margin: 0 auto var(--lim-space-6); }
.lim-shop__placeholder-note { display: block; margin-top: var(--lim-space-4); font-size: 12px; opacity: .8; }

/* ---- Watch me cook: horizontal video cards (MEASURED - image left / text
   right, distinct from the vertical grid cards used elsewhere) ---- */
.lim-video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--lim-space-6); }
.lim-video-card { display: grid; grid-template-columns: 1fr 1fr; text-decoration: none; border: 1px solid var(--lim-border); border-radius: var(--lim-radius-button); overflow: hidden; }
.lim-video-card__img { position: relative; aspect-ratio: 1; overflow: hidden; }
.lim-video-card__img img { width: 100%; height: 100%; object-fit: cover; }
.lim-video-card__play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.85);
	display: flex; align-items: center; justify-content: center; color: var(--lim-ink-dark); font-size: 16px;
}
.lim-video-card__title { display: flex; align-items: center; padding: var(--lim-space-4); font-family: var(--lim-font-heading); font-weight: 600; color: var(--lim-ink-dark); }
.lim-videos__placeholder { text-align: center; font-size: 13px; color: var(--lim-ink-muted); font-style: italic; border: 1px dashed var(--lim-border); padding: var(--lim-space-6); border-radius: var(--lim-radius-button); }

/* ---- Scroll-to-top button (bottom offset clears the fixed Craving DNA bar) ---- */
.lim-scroll-top {
	position: fixed; bottom: 80px; right: 24px; z-index: 998;
	width: 44px; height: 44px; border-radius: 50%; background: var(--lim-accent); color: #fff;
	display: flex; align-items: center; justify-content: center; text-decoration: none;
	opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
	box-shadow: 0 4px 14px rgba(61, 110, 138,.35);
}
.lim-scroll-top.is-visible { opacity: 1; pointer-events: auto; }

@media (max-width: 1023px) {
	.lim-hero__grid { grid-template-columns: repeat(2, 1fr); }
	.lim-grid { grid-template-columns: repeat(2, 1fr); }
	.lim-grid--favorites { grid-template-columns: repeat(2, 1fr); }
	.lim-about__inner { grid-template-columns: 1fr; }
	.lim-about__photo { max-width: 280px; margin: 0 auto; }
	.lim-newsletter__inner { grid-template-columns: 1fr; text-align: center; }
	.lim-video-grid { grid-template-columns: 1fr; }
	.lim-scroll-top { bottom: 130px; }
}
@media (max-width: 600px) {
	.lim-hero__icons { gap: var(--lim-space-3); }
	/* MEASURED: reference drops the circles' white ring from 5px to 2px on
	   mobile and the label to a flat 12px. */
	.lim-hero__icon-img { width: min(84px, 100%); border-width: 2px; }
	.lim-hero__icon-label { font-size: 12px; }
	.lim-video-card { grid-template-columns: 1fr; }
}

/* Fix 2026-07-20 (owner-flagged, real-device mobile screenshots): two real
   bugs on narrow phones.
   1) .lim-hero__tagline (element supprime le 2026-08-31, note gardee pour
      l'historique) had a fixed 320px flex-basis with no mobile
      override - on a 390px viewport this left almost no room for
      .lim-hero__icons in the same flex row, so the icons effectively
      collapsed/became invisible while the row still reserved their space,
      showing as a huge empty gap under the tagline text.
   2) .lim-hero__tile-label (the "BREAKFAST" etc. pill) had no
      white-space:nowrap, so on the 2-column mobile grid the pill wrapped
      mid-word ("BREAKFAS" / "T") instead of shrinking its font or staying
      on one line.
   Updated 2026-07-22: the label is no longer an absolutely-positioned pill
   (see the tile rebuild above), so the top/left offsets are gone. It is now a
   centred bar, and its 48px side inset is far too wide on a ~180px-wide mobile
   tile - the reference narrows the whole tile to a 200px-tall box on mobile, so
   the inset comes down with it. */
@media (max-width: 767px) {
	.lim-hero__lower { flex-direction: column; align-items: stretch; gap: var(--lim-space-4); }
	/* Reference switches this inner row to `kt-mobile-layout-three-grid` on
	   mobile — 3 icons per row, not all 6 squeezed onto one line (which the
	   desktop nowrap rule would otherwise force down to ~55px circles). */
	.lim-hero__lower .lim-hero__icons { justify-content: center; flex-wrap: wrap; }
	.lim-hero__lower .lim-hero__icon { flex: 0 0 calc(33.333% - var(--lim-space-3)); }
	/* MEASURED: reference spacer is 300px desktop / 200px mobile, so the tile
	   becomes 41 + 7.2 + 200 - 3 ≈ 245px. The 48px side inset is impossible on a
	   ~180px-wide mobile tile (it would leave ~84px for the word), so it scales
	   down with the tile. */
	.lim-hero__tile { height: 245px; }
	.lim-hero__tile-label {
		white-space: nowrap; font-size: 12px; letter-spacing: 0.5px;
		margin-left: 16px; margin-right: 16px;
	}
}