/* ==========================================================================
   Farm profile
   Mobile: full-bleed hero, content stack, sticky Directions/Call bar.
   Desktop: two columns, actions in the sidebar.
   ========================================================================== */

.farm-hero {
  position: relative;
  width: 100%;
  /* Sized by height, not aspect-ratio: `aspect-ratio` combined with a
     max-height makes the browser shrink the *width* instead, which stopped the
     hero spanning its container. min() keeps it roughly 4:3 in portrait while
     capping it in landscape. */
  height: min(75vw, 62vh);
  background: var(--cream-200);
  overflow: hidden;
  /* Full-bleed on mobile: cancel the container gutter rather than sit inside
     it with square corners, which reads as an unfinished inset. */
  margin-inline: calc(-1 * max(var(--gutter), var(--safe-left)));
}
.farm-hero img { width: 100%; height: 100%; object-fit: cover; }
.farm-hero__badges {
  position: absolute;
  inset: auto var(--space-4) var(--space-4) var(--space-4);
  display: flex;
  gap: var(--space-2);
}
@media (min-width: 48rem) {
  .farm-hero {
    /* A 21:9 hero at desktop width is nearly 600px tall and pushes the farm
       name, hours and Directions button below the fold. */
    height: clamp(17rem, 30vw, 26rem);
    border-radius: var(--radius-2xl);
    margin-top: var(--space-6);
    margin-inline: 0;
  }
}

.farm-layout {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-6) var(--space-12);
  grid-template-columns: 1fr;
}
@media (min-width: 64rem) {
  .farm-layout {
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: var(--space-12);
    align-items: start;
  }
}

.farm-head { display: flex; flex-direction: column; gap: var(--space-3); }
.farm-head h1 { font-size: var(--text-2xl); }
.farm-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.farm-section { padding-top: var(--space-8); }
.farm-section > h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}

.product-group + .product-group { margin-top: var(--space-6); }
.product-group__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--green-700);
}
.product-group__head h3 {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-700);
}

.product-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  overflow: hidden;
}
.product-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-4);
}
.product-item + .product-item { border-top: 1px solid var(--line); }
.product-item__name { font-weight: 600; color: var(--ink-900); }
.product-item__price {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--green-700);
}
.product-item__desc {
  flex: 1 0 100%;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hours-table th, .hours-table td { padding: var(--space-3) var(--space-4); text-align: left; }
.hours-table th { font-weight: 500; color: var(--text-muted); width: 45%; }
.hours-table td { font-weight: 600; color: var(--ink-900); text-align: right; }
.hours-table tr + tr th, .hours-table tr + tr td { border-top: 1px solid var(--line); }
.hours-table tr.is-today th { color: var(--green-700); }
.hours-table tr.is-today { background: var(--green-50); }

.info-card {
  padding: var(--space-5);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.contact-list { display: flex; flex-direction: column; gap: var(--space-1); }
.contact-list a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-2) var(--space-1);
  color: var(--ink-900);
  text-decoration: none;
  font-weight: 500;
}
.contact-list a:hover { color: var(--green-700); }
.contact-list .icon { color: var(--green-600); }

/* Sticky action bar: mobile only, inside thumb reach, above the home bar. */
.action-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-sheet);
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) max(var(--gutter), var(--safe-left))
           calc(var(--space-3) + var(--safe-bottom)) max(var(--gutter), var(--safe-right));
  background: color-mix(in srgb, var(--cream-50) 92%, transparent);
  border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.action-bar .btn--primary { flex: 1 1 auto; }
.action-bar__spacer { height: 5.5rem; }

@media (min-width: 64rem) {
  .action-bar { position: static; border: 0; padding: 0; background: none; backdrop-filter: none; flex-wrap: wrap; }
  .action-bar .btn { flex: 1 1 100%; }
  .action-bar__spacer { display: none; }
}

.sidebar-stack { display: flex; flex-direction: column; gap: var(--space-5); }
@media (min-width: 64rem) {
  .sidebar-stack { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}

.claim-cta {
  margin-top: var(--space-10);
  padding: var(--space-5);
  text-align: center;
  background: var(--surface-warm);
  border-radius: var(--radius-lg);
}
.claim-cta p { color: var(--ink-700); }


/* --------------------------------------------------------------------------
   Hero gallery
   Swiping is native: an overflow-x scroller with scroll-snap. JavaScript only
   adds the counter, the dots and arrow-key support, so a swipe still works if
   the script never loads.
   -------------------------------------------------------------------------- */
.gallery { position: relative; }

.gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  margin-inline: calc(-1 * max(var(--gutter), var(--safe-left)));
}
.gallery__track::-webkit-scrollbar { display: none; }

.gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  height: min(75vw, 62vh);
  background: var(--cream-200);
}
.gallery__slide img { width: 100%; height: 100%; object-fit: cover; }

.gallery__count {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  padding: 0.25rem var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(19, 32, 26, 0.62);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.gallery__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--space-3);
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}
.gallery__dot {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(19, 32, 26, 0.2);
  transition: background-color var(--t-fast) var(--ease-out), width var(--t-fast) var(--ease-out);
}
.gallery__dot[aria-current="true"] { background: #fff; width: 1.25rem; border-radius: var(--radius-pill); }
/* A dot is an 8px target, so give it an invisible 44px hit area. */
.gallery__dot::before { content: ""; position: absolute; inset: -1.125rem; }

@media (min-width: 48rem) {
  .gallery__track { margin-inline: 0; border-radius: var(--radius-2xl); }
  .gallery__slide { height: clamp(17rem, 30vw, 26rem); }
}

/* --------------------------------------------------------------------------
   Location minimap
   -------------------------------------------------------------------------- */
.minimap {
  position: relative;
  height: 11rem;
  margin-top: var(--space-3);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--cream-200);
  border: 1px solid var(--line);
  /* Leaflet's panes carry z-index 400-800; contain them. */
  isolation: isolate;
  z-index: 0;
}
.minimap .leaflet-container { width: 100%; height: 100%; font-size: 0.6875rem; }
.minimap .leaflet-control-attribution { font-size: 0.625rem; padding: 1px 4px; }
.minimap .leaflet-tile-pane { filter: saturate(0.78) brightness(1.04) contrast(0.96); }

/* --------------------------------------------------------------------------
   Secondary actions
   -------------------------------------------------------------------------- */
.more-menu { position: relative; flex: none; }
.more-menu__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-2));
  min-width: 13rem;
  padding: var(--space-2);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 2;
}
.more-menu__panel[hidden] { display: none; }
.more-menu__panel a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--ink-900);
  text-decoration: none;
  font-weight: 500;
}
.more-menu__panel a:hover { background: var(--green-50); color: var(--green-700); }
.more-menu__panel .icon { color: var(--green-600); }

@media (min-width: 64rem) {
  .more-menu__panel { bottom: auto; top: calc(100% + var(--space-2)); }
  /* In the sidebar the three actions are stacked, so More matches the others. */
  .more-menu { flex: 1 1 100%; }
  .more-menu > .btn { width: 100%; }
}