/* --------------------------------------------
   Basic styles for Recipe cards
----------------------------------------------- */

:root {
  view-transition-name: none;
}
body {
  font-family: -apple-system, -system-ui, roboto, helvetica, sans-serif;
  background: light-dark(#faf5f0, #2a2220);
}

/* --------------------------------------------
   Site header
----------------------------------------------- */

.site-header {
  padding: 0 calc(2vw + 1rem);
  text-align: center;
}
.site-brand h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  margin: 0;
  color: light-dark(#c6432a, #f4845f);
  letter-spacing: -0.02em;
}
.tagline {
  font-size: 1.1rem;
  color: light-dark(#666, #aaa);
  margin: 0.3rem 0 1.5rem;
}
.category-nav {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding-bottom: 1.5rem;
  border: none;
  margin: 0;
  input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  label {
    cursor: pointer;
    display: inline-block;
    padding: 0.35rem 1rem;
    border-radius: 2rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: light-dark(#555, #bbb);
    background: light-dark(#f0e8df, #3a3230);
    transition: background 0.15s, color 0.15s;
  }
  label:hover {
    background: light-dark(#e8ddd0, #4a4240);
  }
  label:has(> input[type="radio"]:checked) {
    background: #c6432a;
    color: white;
  }
}

/* --------------------------------------------
   Category filtering (pure CSS with :has())
----------------------------------------------- */

body:has(input[value="weeknight"]:checked) main .card:not([data-cat="weeknight"]),
body:has(input[value="vegetarian"]:checked) main .card:not([data-cat="vegetarian"]),
body:has(input[value="desserts"]:checked) main .card:not([data-cat="desserts"]),
body:has(input[value="soups"]:checked) main .card:not([data-cat="soups"]),
body:has(input[value="brunch"]:checked) main .card:not([data-cat="brunch"]),
body:has(input[value="healthy"]:checked) main .card:not([data-cat="healthy"]) {
  display: none;
}

/* --------------------------------------------
   Card styling
----------------------------------------------- */

figure {
  margin: 0;
  border-radius: 0.75rem;
  overflow: hidden;
  background: light-dark(#fff, #383030);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.08), 0 4px 16px rgb(0 0 0 / 0.04);
  display: block;
  transition: box-shadow 0.2s, transform 0.2s;
  &:hover {
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.12), 0 8px 24px rgb(0 0 0 / 0.08);
    transform: translateY(-2px);
  }
}
img {
  width: 100%;
  height: auto;
  display: block;
}
figcaption {
  padding: 0.75rem 1rem 1rem;
}
h2 {
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0.3rem 0 0.4rem;
  line-height: 1.3;
  color: light-dark(#222, #f0e8df);
}
p {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.5;
  color: light-dark(#555, #b0a8a0);
}
main {
  color: light-dark(#333, #ddd);
}

/* Tags */
.tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2em 0.6em;
  border-radius: 0.3rem;
}
.tag-weeknight {
  background: light-dark(#fff3e0, #5c3a10);
  color: light-dark(#b34800, #ffb74d);
}
.tag-healthy {
  background: light-dark(#e8f5e9, #1b4332);
  color: light-dark(#2e7d32, #81c784);
}
.tag-desserts {
  background: light-dark(#fce4ec, #4a1528);
  color: light-dark(#c62828, #ef9a9a);
}
.tag-vegetarian {
  background: light-dark(#f1f8e9, #2d3a1e);
  color: light-dark(#446e22, #aed581);
}
.tag-soups {
  background: light-dark(#fff8e1, #4a3c10);
  color: light-dark(#9c5208, #ffd54f);
}
.tag-brunch {
  background: light-dark(#ede7f6, #2a1f3a);
  color: light-dark(#5e35b1, #b39ddb);
}

/* Meta row */
.meta {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: light-dark(#6c6358, #a8a098);
  padding-top: 0.5rem;
  border-top: 1px solid light-dark(#f0e8df, #4a4240);
  span::before {
    display: inline;
  }
  span:first-child::before {
    content: "\1F552  ";
  }
  span:last-child::before {
    content: "\1F374  ";
  }
}


/* --------------------------------------------
   Variations on the layout
----------------------------------------------- */

/* ---- Multicolumn ---- */
body:has(option[value="one"]:checked) main {
  columns: 16rem;
  column-gap: 1.5rem;
  > header {
    column-span: all;
  }
  .card {
    break-inside: avoid;
    margin-bottom: 1.5rem;
    padding-block-end: 1px;
  }
}

/* ---- Grid level 1 (with truncated content) ---- */
body:has(option[value="two"]:checked) main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  grid-template-rows: auto;
  gap: 1.5rem;
  > header {
    grid-column: 1 / -1;
  }
  img {
    aspect-ratio: 1;
    object-fit: cover;
  }
  h2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}
@media (max-width: 768px) {
  body:has(option[value="two"]:checked) main {
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  }
}

/* ---- Grid Lanes (with fallback to Grid 1) ---- */
body:has(option[value="three"]:checked) main {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.5rem;
  flow-tolerance: 2rem;
  > header {
    grid-column: 1 / -1;
  }
}
@media (max-width: 768px) {
  body:has(option[value="three"]:checked) main {
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  }
}
@supports not (display: grid-lanes) {
  body:has(option[value="three"]:checked) main {
    display: grid;
    img {
      aspect-ratio: 1;
      object-fit: cover;
    }
    h2 {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    p {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }
}

/* ---- Grid Lanes Brick (horizontal scroll) ---- */
body:has(option[value="four"]:checked) {
  height: 100svh;
  display: flex;
  flex-flow: column;
  overflow: hidden;
  main {
    flex: 1;
    display: grid-lanes;
    grid-template-rows: repeat(3, minmax(10em, 1fr));
    gap: 1.5rem;
    overflow: auto;
    padding-bottom: 3rem;
  }
  main > header {
    grid-row: 1 / -1;
    width: min-content;
    padding-inline: 3%;
  }
  .category-nav {
    flex-flow: column;
    align-items: stretch;
    width: max-content;
    margin-inline: auto;
  }
  .card {
    display: flex;
    height: 100%;
    overflow: hidden;
    img {
      width: auto;
      height: 100%;
      flex-shrink: 0;
      border-radius: 0.75rem 0 0 0.75rem;
    }
    figcaption {
      flex: 1;
      min-width: min-content;
      width: max-content;
      max-width: min(40ch, 75vw);
      overflow: hidden;
      display: flex;
      flex-flow: column;
    }
    .tag {
      width: max-content;
    }
    p {
      flex: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      overflow: hidden;
    }
  }
}

/* ---- Scroll fade hint for horizontal layout ---- */
body:has(option[value="four"]:checked) main::after {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3rem;
  background: linear-gradient(to right, transparent, light-dark(#faf5f0, #2a2220));
  pointer-events: none;
  z-index: 50;
}


/* --------------------------------------------
   Counters marking items (when enabled)
----------------------------------------------- */

body {
  counter-reset: item-counter 0;
}
figure {
  position: relative;
  counter-increment: item-counter;
}
body:has(input[type="checkbox"]:checked) {
  figure::before,
  figure::after {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.1em 0.5em 0.3em;
    border-radius: 0 0.75rem 0 0;
    min-width: 2ch;
    text-align: right;
  }
  figure::after {
    counter-increment: counter(item-counter);
    content: counter(item-counter);
    background: rgba(65, 83, 47, 0.65);
    color: white;
    font-family: var(--font-text);
    font-size: 2rem;
  }
  figure::before {
    content: counter(item-counter);
    color: white;
    font-family: var(--font-text);
    font-size: 2rem;
  }
}