/* ============================================================
   receptet.nu — grid system
   ============================================================

   Hierarchy:
     .page-content          — centered max-width wrapper
       .zone                — flex-column: header + one grid
         .zone__header      — full-width heading row
         .zone__grid        — declares page-level column split
           .zone__col       — flex-column: stacks card groups
             .card-grid     — grid for a group of same-type cards
               .card        — individual card, reflows via container query
   ============================================================ */


/* ------------------------------------------------------------
   Custom properties
   ------------------------------------------------------------ */
:root {
  --col-gap:   1.75rem;   /* gutter between page-level columns */
  --zone-gap:  2rem;      /* vertical gap between zones */
  --card-gap:  1rem;      /* gap between cards / card groups */
  --page-pad:  1.5rem;    /* horizontal page padding */
  --max-width: 1360px;
  --col-large: 34fr;
  --col-small: 21fr;
}


/* ------------------------------------------------------------
   Page wrapper
   ------------------------------------------------------------ */
.page-content {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--page-pad);
  display: flex;
  flex-direction: column;
  gap: var(--zone-gap);
  margin-top: 80px; /*topbar height*/
}


/* ------------------------------------------------------------
   Zone
   Flex-column so header always sits above the grid,
   regardless of what the grid contains.
   ------------------------------------------------------------ */
.zone {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}


/* ------------------------------------------------------------
   Zone grid
   Declares the page-level column structure only.
   No knowledge of card types.
   ------------------------------------------------------------ */
.zone__grid {
  display: grid;
  gap: var(--col-gap);
  container-type: inline-size;
}

.zone__grid--full    { grid-template-columns: 1fr; }
.zone__grid--split   { grid-template-columns: var(--col-large) var(--col-small); }
.zone__grid--split-reverse { grid-template-columns: var(--col-small) var(--col-large); }
.zone__grid--2up     { grid-template-columns: 1fr 1fr; }


/* ------------------------------------------------------------
   Zone column
   Flex-column container for card groups within a page column.
   Each direct child is either a single card or a .card-grid.
   ------------------------------------------------------------ */
.zone__col {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  container-type: inline-size;
}


/* ------------------------------------------------------------
   Card grids
   Used when multiple same-type cards share a row.
   Nested inside .zone__col or directly in .zone__grid--full.
   ------------------------------------------------------------ */
.card-grid {
  display: grid;
  gap: var(--card-gap);
  container-type: inline-size;

}

.card-grid--2col { grid-template-columns: 1fr 1fr; }
.card-grid--3col { grid-template-columns: repeat(3, 1fr); }
.card-grid--4col { grid-template-columns: repeat(4, 1fr); }

/* Last odd card spans full width in any multi-column card-grid */
.card-grid--2col > *:last-child:nth-child(odd),
.card-grid--3col > *:last-child:nth-child(odd),
.card-grid--4col > *:last-child:nth-child(odd) {
/*  grid-column: 1 / -1;*/
}

/* Persist modifier — keeps 2-col grid intact on mobile.
   Use on small-column card grids that should stay side by side. */
.card-grid--persist { grid-template-columns: 1fr 1fr; }


/* ------------------------------------------------------------
   Zone heading
   Pattern: [Title] [rule ————————————] [Visa alla →]
   Always a full-width block above the zone grid.
   ------------------------------------------------------------ */
.zone__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.zone__title {
  font-size: 1.5rem;
  font-weight: normal;
  color: var(--color-secondary-dark);
  white-space: nowrap;
  line-height: 2;
}

.zone__rule {
  flex: 1;
  height: 2px;
  background: var(--color-secondary);
  display: block;
  min-width: 1rem;
}

.zone__visa-alla {
  display: none; /*flex;*/
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  color: var(--color-secondary-dark);
  text-decoration: underline;
  white-space: nowrap;
  transition: color 0.15s;
}

.zone__visa-alla:hover {
  color: var(--color-main);
}

.zone__arrow {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
}


/* ------------------------------------------------------------
   Card reflow — container queries
   Cards respond purely to their own container width.
   No zone context involved.
   ------------------------------------------------------------ */

/* Large card + large banner: side-by-side → stacked */
@supports (container-type: inline-size) {
  @container (max-width: 520px) {
    .card--large,
    .card--banner-large {
      flex-direction: column;
    }
    .card--large .card__image,
    .card--banner-large .card__image {
      width: 100%;
      aspect-ratio: 5 / 3;
      min-height: unset;
    }
    .card--large .card__content,
    .card--banner-large .card__content {
      width: 100%;
      padding: 0.75rem 2.5rem 0.75rem 0.75rem;
    }
  }
}

/* Viewport fallback */
@media (max-width: 600px) {
  .card--large,
  .card--banner-large {
    flex-direction: column;
  }
  .card--large .card__image,
  .card--banner-large .card__image {
    width: 100%;
    aspect-ratio: 5 / 3;
    min-height: unset;
  }
  .card--large .card__content,
  .card--banner-large .card__content {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 0.75rem;
  }
}


/* ------------------------------------------------------------
   Mobile reflow
   ------------------------------------------------------------ */
@media (max-width: 767px) {

  :root {
    --col-gap:  1rem;
    --zone-gap: 1.25rem;
    --card-gap: 0.75rem;
    --page-pad: 1rem;
  }

  /* Page-level splits collapse to single column */
  .zone__grid--split,
  .zone__grid--split-reverse,
  .zone__grid--2up {
    grid-template-columns: 1fr;
    gap: var(--card-gap);
  }

  /* Card grids collapse to single column by default */
  .card-grid--2col,
  .card-grid--3col,
  .card-grid--4col {
    grid-template-columns: 1fr;
  }

  /* Reset odd-card span when single column */
  .card-grid--2col > *:last-child:nth-child(odd),
  .card-grid--3col > *:last-child:nth-child(odd),
  .card-grid--4col > *:last-child:nth-child(odd) {
    grid-column: auto;
  }

  /* Persist: stays 2-col on mobile, odd card still spans */
  .card-grid--persist {
    grid-template-columns: 1fr 1fr;
  }
  .card-grid--persist > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 400px) {
  .card-grid--persist {
    grid-template-columns: 1fr;
  }
  .card-grid--persist > *:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/* ============================================================
   FILTERRAD (recipes.php)
   ============================================================ */
#filter-bar {
    position: sticky;
    top: 70px;
    z-index: 900;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    padding: 10px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 36px;
}
.filter-group { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.filter-group label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
    margin-right: 2px;
    white-space: nowrap;
}
.filter-btn {
    padding: 4px 11px;
    border-radius: 20px;
    border: 1.5px solid var(--color-border);
    background: none;
    font-size: 0.78rem;
    font-family: var(--font-normal), sans-serif;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.filter-btn:hover        { border-color: var(--color-main); color: var(--color-main); }
.filter-btn.active       { background: var(--color-main); border-color: var(--color-main); color: #fff; }
.filter-btn.active:hover { background: var(--color-main-dark); }

#filter-search {
    margin-left: auto;
    display: flex;
    align-items: center;
    background: var(--color-secondary-light);
    border-radius: 20px;
    padding: 5px 14px;
    gap: 6px;
}
#filter-search input {
    border: none; background: none; outline: none;
    font-family: var(--font-normal), sans-serif;
    font-size: 0.85rem; color: var(--color-text); width: 150px;
}
#filter-search input::placeholder { color: var(--color-text-light); }
#layout-toggle {
    display: flex;
    gap: 4px;
    margin-left: 12px;
    border-left: 1px solid var(--color-border);
    padding-left: 12px;
}
.layout-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    background: none;
    color: var(--color-text-light);
    cursor: pointer;
    transition: all 0.15s;
    padding: 6px;
}
.layout-btn svg { width: 100%; height: 100%; }
.layout-btn:hover { border-color: var(--color-main); color: var(--color-main); }
.layout-btn.active { background: var(--color-main); border-color: var(--color-main); color: #fff; }
@media (max-width: 768px) {
    #page-content   { padding: 86px 12px 60px; }
    .page-with-topbar { padding-top: 86px; }
    #filter-bar     { padding: 8px 12px; gap: 6px;}
    #filter-search  { margin-left: 0; width: 100%; }
    #filter-search input { width: 100%; }
    .filter-group label { display: none; }
    .zone-header h2 { font-size: 1.15rem; }
    .recipe-zone    { margin-bottom: 40px; }
    .magazine-grid,
    .magazine-grid--reversed { margin-bottom: 0; }
}