/* ============================================================
   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) + tagline + 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;
}
.lim-hero__tile { position: relative; display: block; text-decoration: none; border-radius: var(--lim-radius-button); overflow: hidden; }
.lim-hero__tile-img { display: block; aspect-ratio: 3/4; overflow: hidden; position: relative; }
.lim-hero__tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease-in-out; }
.lim-hero__tile:hover .lim-hero__tile-img img { transform: scale(1.05); }
/* Fix 2026-07-20: reference darkens the tile image slightly on hover via an
   overlay (MEASURED: opacity 0.29 dark overlay), a second hover cue beyond
   the zoom we already had. */
.lim-hero__tile-img::after {
	content: ''; position: absolute; inset: 0; background: var(--lim-ink-dark);
	opacity: 0; transition: opacity 0.3s ease-in-out; pointer-events: none;
}
.lim-hero__tile:hover .lim-hero__tile-img::after { opacity: 0.15; }
.lim-hero__tile-label {
	position: absolute; top: 14px; left: 14px;
	background: var(--lim-steel-blue); color: #fff;
	font-family: var(--lim-font-heading); font-size: var(--lim-badge-size); font-weight: var(--lim-badge-weight);
	text-transform: uppercase; letter-spacing: var(--lim-badge-letter-spacing);
	padding: 7px 16px; border-radius: 20px;
	box-shadow: 0 2px 6px rgba(17, 57, 84, 0.15);
}

.lim-hero__lower {
	display: flex; align-items: center; gap: var(--lim-space-12);
	border-top: 1px solid var(--lim-border); border-bottom: 1px solid var(--lim-border);
	padding: var(--lim-space-6) 0;
}
/* Fix 2026-07-20: MEASURED from the live reference - the tagline is NOT a
   single uppercase italic run. It's a typewriter-style display font
   ("Special Elite") for the base text, uppercase, with 1-2 key words swapped
   to a handwritten script font ("Homemade Apple", lowercase, not italic) via
   <mark>. Ours now mirrors that exact mixed-font treatment instead of a
   single flat style. */
.lim-hero__tagline {
	flex: 0 0 320px; position: relative;
	text-align: left; font-family: 'Special Elite', var(--lim-font-heading);
	font-size: 18px; line-height: 1.5; color: var(--lim-ink); text-transform: uppercase; letter-spacing: .5px;
	margin: 0;
}
.lim-hero__tagline-icon { position: absolute; top: -28px; left: 0; font-size: 20px; }
.lim-script {
	background: none; font-family: 'Homemade Apple', cursive; text-transform: none;
	font-size: 1.4em; color: var(--lim-ink-dark); font-weight: 400;
}
.lim-hero__icons { display: flex; justify-content: flex-start; gap: var(--lim-space-6); flex-wrap: wrap; flex: 1; }
.lim-hero__icon { text-align: center; text-decoration: none; }
/* 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. */
.lim-hero__icon-img {
	display: block; width: 84px; height: 84px; 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.25s ease-in-out, box-shadow 0.25s ease-in-out;
}
.lim-hero__icon-img img { width: 100%; height: 100%; object-fit: cover; }
.lim-hero__icon:hover .lim-hero__icon-img {
	transform: scale(1.08);
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.22);
}
/* 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. */
.lim-hero__icon-label {
	display: block; font-family: var(--lim-font-body); font-size: 13px; font-weight: 400;
	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;
	background: var(--lim-ink-dark); color: #fff; padding: var(--lim-space-3) 20px;
	box-shadow: 0 -4px 12px rgba(0,0,0,.15);
}
.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: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); border-radius: 20px; padding: 6px 16px; font-size: 13px; }
.lim-craving-bar__text { flex: 1; min-width: 220px; margin: 0; color: rgba(255,255,255,.9); 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-bg); 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-bg); 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-ink-dark); }
.lim-newsletter__form button.lim-newsletter__submit--dark:hover { background: #000; }

/* ---- Buttons used across grid sections ---- */
.lim-btn--periwinkle { background: var(--lim-periwinkle); color: var(--lim-ink-dark); font-size: 13px; letter-spacing: 1px; }
.lim-btn--periwinkle:hover { background: var(--lim-steel-blue); color: #fff; }
.lim-btn--outline-light { background: transparent; color: #fff; border: 1.5px solid #fff; }
.lim-btn--outline-light:hover { background: #fff; color: var(--lim-ink-dark); }

/* ---- 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-ink-dark); 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-bg); 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-ink-dark); 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-steel-blue); font-style: italic; border: 1px dashed var(--lim-steel-blue); 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: linear-gradient(rgba(17,57,84,.55), rgba(17,57,84,.55)), var(--lim-steel-blue);
	color: #fff;
}
.lim-shop__eyebrow {
	display: inline-block; background: var(--lim-periwinkle); color: var(--lim-ink-dark);
	font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
	padding: 6px 16px; margin-bottom: var(--lim-space-4);
}
.lim-shop h2 { color: #fff; 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-steel-blue); font-style: italic; border: 1px dashed var(--lim-steel-blue); 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-ink-dark); 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 12px rgba(17,57,84,.25);
}
.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); }
	.lim-hero__icon-img { width: 64px; height: 64px; }
	.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 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. */
@media (max-width: 767px) {
	.lim-hero__lower { flex-direction: column; align-items: stretch; gap: var(--lim-space-4); }
	.lim-hero__lower .lim-hero__tagline { flex: 1 1 auto; text-align: center; }
	.lim-hero__lower .lim-hero__icons { justify-content: center; }
	.lim-hero__tile-label {
		white-space: nowrap; font-size: 12px; padding: 6px 12px;
		left: 10px; top: 10px; letter-spacing: 0.3px;
	}
}