/* Styles specific to the homepage. Ported from _design/index.html's
   inline <style> block (the shared stylesheet doesn't define .loc-grid,
   same pattern as archive-locations.css / breakfast-menu.css). */

/* 3-up so 5 real cafes + 1 "suggest a location" card lands as a clean
   3-then-2 layout instead of 5 (or 6) cramped into one row. */
.loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 720px)  { .loc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .loc-grid { grid-template-columns: 1fr; } }

/* "Suggest a location" — 6th slot, deliberately bold instead of blending
   into the 5 dark photo cards: a solid raspberry "postcard" so it reads
   as a genuine invitation, not a leftover empty box. Mirrors the real
   cards' own rhythm (photo-zone → marker number → title → copy → link)
   so it still feels like a natural 6th member of the set. Real
   destination: the actual @berryfresh.cafe Instagram, same account
   used sitewide. */
.loc-card-suggest {
  border: 1px solid var(--bf-raspberry);
  background: var(--bf-raspberry);
}
.loc-card-suggest:hover { border-color: var(--bf-yellow); transform: translateY(-4px); }

.loc-suggest-decor {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  background: color-mix(in oklch, var(--bf-raspberry) 84%, black 16%);
  overflow: hidden;
}
/* Faint dashed route line, evoking "plot the next pin" */
.loc-suggest-decor::before {
  content: '';
  position: absolute; inset: -10% -10% -10% 40%;
  border: 2px dashed rgba(255,255,255,0.22);
  border-radius: 50%;
  transform: rotate(-18deg);
}
.loc-suggest-pin {
  position: relative; z-index: 1;
  width: 56px; height: 56px;
  color: var(--bf-yellow);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25));
}
.loc-suggest-scribble {
  position: absolute; top: 14px; right: 18px; z-index: 1;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(22px, 2vw, 28px);
  color: var(--bf-cream);
  transform: rotate(-9deg);
}

.loc-suggest-body { padding: var(--space-5); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.loc-suggest-marker { font-family: var(--font-display); font-size: 14px; color: var(--bf-yellow); letter-spacing: 0.1em; }
.loc-card-suggest h3 { color: var(--bf-white); font-family: var(--font-display); font-size: 22px; text-transform: uppercase; font-weight: 400; letter-spacing: 0.005em; line-height: 1.1; }
.loc-suggest-copy { color: rgba(255,255,255,0.82); font-size: 14px; line-height: 1.5; margin-top: 2px; }
.loc-suggest-link { color: var(--bf-yellow); font-weight: 700; font-size: 14px; margin-top: auto; padding-top: var(--space-3); }
.loc-suggest-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ══════════════════════════════════════════════════════════════════
   PILLARS + AWARDS — Aug 2026 pass
   ══════════════════════════════════════════════════════════════════ */

/* Top-align the two columns. Centred, the photo floated in the middle of
   a copy column twice its height, leaving ~510px of dead space beneath
   it; aligned to the top it starts level with the "Family-owned since
   2009" eyebrow and the two columns share a baseline. */
.pillars-row { align-items: start; }

/* The source photo's own ratio, written as its literal pixel dimensions:
   pillars-kitchen.png is 941x1672, so this crops nothing at all. The
   square box it replaced was discarding roughly 44% of the frame. It also
   closes most of the dead space beside the copy column — 510px before
   this pass, ~90px after. */
.pillars-photo { aspect-ratio: 941 / 1672; }

/* .grid-2 collapses to one column at 900px, where a full-width 1:1.5
   portrait becomes an enormous slab on a phone. Flatten it there — the
   dead-space problem it solves only exists in the two-column layout. */
@media (max-width: 900px) {
  .pillars-row { align-items: stretch; }
  .pillars-photo { aspect-ratio: 4 / 3; }
}

/* The awards strip is proof you pass on the way down, not a destination.
   The band itself is ~192px; the generic .section padding was taking the
   whole block to 440px. Roughly halved, so it still breathes without
   pushing the page's real content below the fold. */
.awards-strip {
  padding-top: clamp(28px, 3.5vw, 44px);
  padding-bottom: clamp(28px, 3.5vw, 44px);
}