/*
 * recipes.css — the public recipe section (/recipes, /recipes/<dish>, and the
 * collection pages). Loaded after chrome.css, which supplies the brand tokens,
 * the header, the footer, the App Store badge, and the QR hand-off dialog.
 *
 * Every page here is generated by scripts/build_recipes.py; edit the classes,
 * not the HTML.
 *
 * The grid deliberately tracks the iOS app's size classes so the two read as
 * one product: the app uses an adaptive grid of 160–240pt columns in the
 * compact size class and 220–280pt in regular, which lands at ~2 columns on an
 * iPhone and 3–4 on an iPad. The breakpoints below reproduce that, with the
 * desktop window treated as a landscape iPad rather than as its own thing.
 */
:root {
  --site-max: 1200px;
  --prose-max: 720px;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-solid: rgba(255, 255, 255, 0.94);
  --surface-border: rgba(40, 44, 52, 0.08);
  --radius-md: 20px;
  --card-radius: 24px;
}

.recipes-shell {
  padding: 20px 24px 48px;
}

.topbar,
.recipes-shell main,
.site-footer {
  max-width: var(--site-max);
  margin: 0 auto;
}

.site-footer {
  margin-top: 48px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Hero + breadcrumb ------------------------------------------------- */
.recipes-hero {
  padding: 34px 0 22px;
  max-width: 780px;
}
.recipes-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.recipes-lede {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--text-soft);
}
.recipes-hero-collection {
  padding-top: 8px;
}

.breadcrumb {
  padding: 22px 0 0;
  font-size: 0.9rem;
  color: var(--text-soft);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb li + li::before {
  content: "/";
  margin-right: 6px;
  opacity: 0.45;
}
.breadcrumb a {
  color: var(--green-deep);
}
.breadcrumb a:hover {
  text-decoration: underline;
}
.breadcrumb [aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

/* --- Search and filters ------------------------------------------------
   One row of dropdowns rather than six rows of chips. The chip rails were
   ~380px tall and pushed the grid off the first screen, making the controls
   the page; a facet that shows only its current value is the same information
   in a fraction of the height. Built on <details>, so the disclosure works
   with scripting off. */
.recipe-controls {
  margin: 0 0 22px;
}

.control-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* The facets are their own group so a phone can scroll them sideways while the
   search box keeps a full line to itself. */
.facet-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Full width of the controls, aligned with the facet row beneath it. Capping it
   at 440px left it floating short of the row's right edge, which read as
   misalignment rather than as a deliberate size. It keeps its own line: sharing
   with the facets left it ~180px and resized it on every pick. */
.recipe-search {
  flex: 1 1 100%;
  min-width: 0;
}
.recipe-search input {
  width: 100%;
  min-height: 42px;
  padding: 0 16px;
  font: inherit;
  font-size: 0.98rem;
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--surface-border);
  border-radius: 999px;
}
.recipe-search input:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 1px;
}

.facet {
  position: relative;
  flex: 0 0 auto;
}
.facet > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--surface-border);
  background: var(--surface-solid);
  font-size: 0.9rem;
  color: var(--text-soft);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.facet > summary::-webkit-details-marker {
  display: none;
}
.facet > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin: -3px 0 0 2px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.5;
}
.facet[open] > summary::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}
.facet > summary:hover {
  border-color: rgba(58, 161, 103, 0.45);
}
.facet > summary:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}
/* A floor on the whole button, not just the value: picking a filter changed
   "Any" to a longer word and shoved every pill to its right. Sized so the
   common values fit without growing; the longest still nudge, which is a much
   smaller price than truncating them to "Middl…". */
.facet > summary {
  min-width: 10.2em;
  justify-content: space-between;
}
.facet-value {
  font-weight: 650;
  color: var(--text);
}
/* An active facet is legible at a glance from the row alone — that is the
   whole point of collapsing the chips away. */
.facet.is-active > summary {
  background: var(--green);
  border-color: var(--green);
  color: rgba(255, 255, 255, 0.78);
}
.facet.is-active .facet-value {
  color: #fff;
}

.facet-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  min-width: 208px;
  max-height: min(58vh, 420px);
  overflow-y: auto;
  padding: 6px;
  border-radius: 16px;
  /* Fully opaque, not --surface-solid: this floats over the grid, and at 94%
     the cards underneath show through the options. */
  background: #fff;
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-md);
}
.facet-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.92rem;
  color: var(--text-soft);
  cursor: pointer;
  white-space: nowrap;
}
.facet-option:hover {
  background: rgba(24, 32, 25, 0.05);
}
.facet-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.facet-option:has(input:checked) {
  color: var(--text);
  font-weight: 650;
}
.facet-option:has(input:checked)::before {
  content: "✓";
  color: var(--green-deep);
  margin-right: -2px;
}
.facet-option:has(input:focus-visible) {
  outline: 2px solid var(--green);
}
.facet-count {
  margin-left: auto;
  padding-left: 12px;
  font-size: 0.8rem;
  font-weight: 400;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.facet-option.is-empty {
  opacity: 0.35;
}

/* Held in the layout rather than added to it: appearing on first selection
   pushed the whole row sideways. */
.recipe-reset[hidden] {
  display: inline-flex;
  visibility: hidden;
  pointer-events: none;
}

.sort-control select,
.recipe-reset {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--surface-border);
  background: var(--surface-solid);
  font: inherit;
  font-size: 0.9rem;
  color: var(--text-soft);
  cursor: pointer;
}
.recipe-reset:hover,
.sort-control select:hover {
  color: var(--text);
  border-color: rgba(24, 32, 25, 0.2);
}

.recipe-result-count {
  margin: 12px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-soft);
}

/* --- The grid ---------------------------------------------------------- */
.recipe-grid {
  display: grid;
  /* iPhone / compact: ~2 columns. */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.recipe-card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--card-radius);
  background: var(--surface-solid);
  border: 1px solid var(--surface-border);
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.recipe-card > a:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.recipe-card > a:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}
.recipe-card-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--green-pale);
}
.recipe-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 16px;
}
.recipe-card-title {
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.22;
  letter-spacing: -0.015em;
  /* Two lines, like the app's card, so titles of different lengths still line
     the grid up. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recipe-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.recipe-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(24, 32, 25, 0.06);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-soft);
}
/* Cuisine is a nicety the phone has no room for; the app omits it too. */
.recipe-chip-cuisine {
  display: none;
}
.recipe-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 5px;
  border-radius: 7px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
}
/* Tints mirror RecipeTagBadge in the iOS app. */
.recipe-tag-vegan { background: #3d9447; }
.recipe-tag-vegetarian { background: #599e4a; }
.recipe-tag-gluten_free { background: #dba130; }
.recipe-tag-dairy_free { background: #2e91b8; }
.recipe-tag-keto { background: #8f59c2; }
.recipe-tag-high_protein { background: #d4543b; }
.recipe-tag-low_carb { background: #707070; }

.recipe-empty {
  margin: 32px 0;
  text-align: center;
  color: var(--text-soft);
}

/* --- Load more ---------------------------------------------------------- */
.recipe-more {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.load-more {
  min-height: 44px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid var(--surface-border);
  background: var(--surface-solid);
  box-shadow: var(--shadow-sm);
  font: inherit;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.load-more:hover {
  border-color: rgba(58, 161, 103, 0.45);
}
.load-more:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

/* --- Collections index ------------------------------------------------- */
.recipe-collections {
  margin-top: 44px;
}
.recipe-collections h2 {
  margin: 0 0 14px;
  font-size: 1.3rem;
}
.recipe-collections ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.recipe-collections a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  font-size: 0.92rem;
  color: var(--text-soft);
}
.recipe-collections a:hover {
  color: var(--text);
  border-color: rgba(58, 161, 103, 0.4);
}

/* --- Recipe detail ----------------------------------------------------- */
.recipe-detail {
  display: grid;
  gap: 26px;
  margin-top: 22px;
}
.recipe-figure {
  margin: 0;
}
.recipe-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--green-pale);
}
.recipe-figure figcaption {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--text-soft);
}
.recipe-detail-body h1 {
  margin: 0 0 14px;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
}
.recipe-description {
  margin: 0 0 26px;
  max-width: var(--prose-max);
  font-size: 1.08rem;
  line-height: 1.62;
  color: var(--text-soft);
}
.recipe-meta-heading {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-deep);
}
.recipe-meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin: 0 0 30px;
}
.recipe-meta-row {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-solid);
  border: 1px solid var(--surface-border);
}
.recipe-meta dt {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.recipe-meta dd {
  margin: 4px 0 0;
  font-size: 1rem;
  font-weight: 600;
}

.recipe-handoff,
.recipe-cta {
  margin: 0;
  padding: 26px;
  border-radius: var(--radius-lg);
  background: var(--green-pale);
  border: 1px solid rgba(58, 161, 103, 0.22);
}
.recipe-handoff h2,
.recipe-cta h2 {
  margin: 0 0 10px;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}
.recipe-handoff p,
.recipe-cta p {
  margin: 0 0 18px;
  max-width: var(--prose-max);
  line-height: 1.6;
  color: var(--text-soft);
}
.recipe-handoff-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* "Open in the app" — touch only, and the media query is what makes that safe to do in CSS.
   The link hops through app.kitchenpantri.com so iOS can intercept it as a Universal Link; on a
   desktop pointer there is no app to intercept and it would just redirect to the listing the badge
   beside it already points at. A media query re-evaluates on rotation, resize and DevTools device
   mode, which is exactly the bug the App Store hand-off hit by caching the pointer answer in JS. */
.open-in-app {
  display: none;
}
@media (pointer: coarse) {
  .open-in-app {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid rgba(58, 161, 103, 0.35);
    background: #fff;
    color: var(--green-deep);
    font-weight: 600;
    transition: transform 180ms ease, box-shadow 180ms ease;
  }
  .open-in-app:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }
  .open-in-app:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 3px;
  }
}

.recipe-cta {
  margin-top: 48px;
  text-align: center;
}
.recipe-cta p {
  margin-left: auto;
  margin-right: auto;
}

.recipe-related {
  margin-top: 48px;
}
.recipe-related h2 {
  margin: 0 0 16px;
  font-size: 1.4rem;
}

/* --- Phone: stack each facet label above its row ------------------------
   An 84px label column costs a quarter of a 375px screen and leaves the chips
   with a keyhole to scroll through. Stacking gives the row the full width. */
@media (max-width: 639px) {
  /* Search takes the first line; the facets scroll sideways underneath it, the
     way the app's chip row does. Wrapping them instead cost three rows of
     height on the screen with the least of it. */
  .recipe-search {
    flex: 1 0 100%;
  }
  /* Wrap rather than scroll sideways. The scrolling row matched the app, but on
     the web there is no momentum cue at rest — the cut-off chip just read as a
     broken layout, and half the filters were effectively undiscoverable. Three
     short rows cost ~90px and hide nothing. */
  .facet-row {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }
  .facet > summary {
    min-width: 0;
  }
  .control-row {
    gap: 6px;
  }
  /* A dropdown anchored to a chip inside a horizontal scroller gets clipped by
     the scroller and can sit off-screen. On a phone the app opens a sheet
     rather than a dropdown anyway, so do that: position: fixed escapes the
     scroll container, and a bottom sheet is reachable by thumb. */
  .facet-panel {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    min-width: 0;
    max-height: 60vh;
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
  }
  .facet-option {
    padding: 12px 12px;
    font-size: 1rem;
  }
}

/* --- iPad portrait: ~3 columns ----------------------------------------- */
@media (min-width: 640px) {
  .recipe-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
  }
  .recipe-card-title {
    font-size: 1.06rem;
  }
  .recipe-chip-cuisine {
    display: inline-flex;
  }
}

/* --- iPad landscape / desktop: 4+ columns, nothing behind a swipe ------- */
@media (min-width: 1024px) {
  .recipe-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
  }
  /* Room to show every filter at once — the scrolling row is a phone
     affordance and hides options that a desktop reader could simply see. */
  .filter-chips {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .recipe-detail {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 40px;
    align-items: start;
  }
  .recipe-figure {
    position: sticky;
    top: 108px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .recipe-card > a {
    transition: none;
  }
  .recipe-card > a:hover {
    transform: none;
  }
}