/* layout.css — page shells, nav, header, footer, grid wrappers
 * Palette: Lagoon & Rose (light) + Blue Lagoon & Crimson (dark)
 */

.page-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

main { flex: 1; }

.container {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.container--narrow {
  max-width: var(--content-default);
}

/* ============================================================
   SCROLL FADE WRAP
   Dual-edge fade that responds to actual scroll position.
   JS sets data-scroll-left / data-scroll-right on the wrap.
   ============================================================ */
.scroll-fade-wrap {
  position: relative;
}

/* Shared pseudo-element base */
.scroll-fade-wrap::before,
.scroll-fade-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 220ms ease;
}

/* Left fade — shows when user can scroll back */
.scroll-fade-wrap::before {
  left: 0;
  background: linear-gradient(
    to right,
    color-mix(in oklab, var(--color-bg) 100%, transparent) 0%,
    color-mix(in oklab, var(--color-bg)  80%, transparent) 30%,
    color-mix(in oklab, var(--color-bg)  40%, transparent) 65%,
    color-mix(in oklab, var(--color-bg)   0%, transparent) 100%
  );
}

/* Right fade — shows when there is more content to scroll to */
.scroll-fade-wrap::after {
  right: 0;
  background: linear-gradient(
    to left,
    color-mix(in oklab, var(--color-bg) 100%, transparent) 0%,
    color-mix(in oklab, var(--color-bg)  80%, transparent) 30%,
    color-mix(in oklab, var(--color-bg)  40%, transparent) 65%,
    color-mix(in oklab, var(--color-bg)   0%, transparent) 100%
  );
}

.scroll-fade-wrap[data-scroll-left="true"]::before  { opacity: 1; }
.scroll-fade-wrap[data-scroll-right="true"]::after  { opacity: 1; }

/* ============================================================
   SITE HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  border-bottom: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: var(--color-primary-btn);
  box-shadow: 0 1px 0 oklch(0 0 0 / 0.20), var(--shadow-sm);
}

[data-theme="dark"] .site-header {
  background: var(--color-surface);
  box-shadow: 0 1px 0 var(--color-border), var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  gap: var(--space-4);
}

.header-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #ffffff;
  flex-shrink: 0;
  transition: opacity var(--transition-interactive);
}

.header-logo:hover { opacity: 0.85; }
.header-logo svg { height: 32px; width: auto; }

.header-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.btn-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition:
    color var(--transition-interactive),
    background var(--transition-interactive);
}

.btn-icon:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

/* ============================================================
   HERO BAR
   ============================================================ */
.hero-bar {
  /* Mobile: space-6 (1.5rem) → Desktop: space-20 (5rem) */
  padding-block: clamp(var(--space-6), 5vw, var(--space-20));
  text-align: center;
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-surface);
}

.hero-bar__wordmark {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-5);
}

.hero-wordmark {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  font-family: var(--font-display);
  line-height: 1;
  font-size: clamp(1.5rem, 5vw, 3rem);
}

.hero-wordmark__h {
  font-family: 'Playfair Display', serif;
  font-size: 2.3em;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary-btn);
  letter-spacing: -0.03em;
  margin-right: 0.05em;
  align-self: center;
}

[data-theme="dark"] .hero-wordmark__h { color: var(--color-primary); }

.hero-wordmark__rows {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.1em;
}

.hero-wordmark__row1 {
  display: flex;
  align-items: baseline;
  gap: 0.2em;
  line-height: 1;
}

.hero-wordmark__row2 { line-height: 1; }

.hero-wordmark__row1,
.hero-wordmark__row2 {
  font-family: 'Lora', serif;
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--color-text);
}

.hero-wordmark__amp {
  font-family: 'Playfair Display', serif;
  font-size: 0.85em;
  font-weight: 700;
  font-style: normal;
  color: var(--color-primary-btn);
  letter-spacing: -0.02em;
}

[data-theme="dark"] .hero-wordmark__amp { color: var(--color-primary); }

.hero-bar__tagline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-bar__search {
  max-width: 560px;
  margin-inline: auto;
}

/* ============================================================
   COLLECTION HERO (collection page)
   ============================================================ */
.collection-hero {
  /* Mobile: space-6 (1.5rem) → Desktop: space-20 (5rem) */
  padding-block: clamp(var(--space-6), 5vw, var(--space-20));
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-surface);
}

.collection-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.collection-hero__image {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 2/1;
  background: var(--color-surface-offset);
}

.collection-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.collection-hero__text { text-align: center; }

.collection-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  line-height: 1.2;
}

.collection-hero__description {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 60ch;
  margin-inline: auto;
  line-height: 1.6;
}

/* ============================================================
   SECTION LABEL WRAP
   ============================================================ */
.section-label-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  /* Mobile: space-3 */
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

@media (min-width: 640px) {
  .section-label-wrap {
    margin-bottom: var(--space-6);
  }
}

.section-label-wrap .section-label { margin-bottom: 0; }

/* ============================================================
   COLLECTIONS STRIP
   ============================================================ */
.collections-section {
  /* Mobile: space-5 (1.25rem) top & bottom */
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-divider);
}

@media (min-width: 640px) {
  .collections-section {
    padding-block: var(--space-8);
  }
}

.section-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  /* Mobile: space-3 */
  margin-bottom: var(--space-3);
}

@media (min-width: 640px) {
  .section-label {
    margin-bottom: var(--space-4);
  }
}

/* The strip itself extends to viewport edges via negative margin trick */
.collections-section .scroll-fade-wrap {
  margin-inline: 0;
}

.collections-strip {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-inline: var(--space-5);
  padding-bottom: var(--space-2);
}

.collections-strip::-webkit-scrollbar { display: none; }

.collection-card {
  flex: 0 0 auto;
  width: clamp(140px, 18vw, 190px);
  scroll-snap-align: start;
  text-decoration: none;
  color: var(--color-text);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  transition:
    transform var(--transition-interactive),
    box-shadow var(--transition-interactive);
}

.collection-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.collection-card:active { transform: translateY(0); }

.collection-card__thumb {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
}

.collection-card__title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-3);
  letter-spacing: 0.01em;
}

/* ============================================================
   BROWSE SECTION
   ============================================================ */
.browse-section {
  /* Mobile: space-5 top, space-10 bottom */
  padding-block: var(--space-5) var(--space-10);
}

@media (min-width: 640px) {
  .browse-section {
    padding-block: var(--space-8) var(--space-16);
  }
}

/* Filter bar */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  overflow: hidden;
}

.filter-bar__chips-wrap {
  flex: 1;
  min-width: 0;
}

.filter-bar__chips {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.filter-bar__chips::-webkit-scrollbar { display: none; }

.filter-bar__chips .chip {
  flex-shrink: 0;
  scroll-snap-align: start;
}

.filter-bar__clear {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 32px;
  transition:
    color var(--transition-interactive),
    background var(--transition-interactive);
}

.filter-bar__clear:hover {
  color: var(--color-text);
  background: var(--color-surface-offset);
}

.filter-bar__clear[hidden] { display: none; }

/* ============================================================
   RECIPE GRID
   ============================================================ */
.recipe-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .recipe-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .recipe-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-20) var(--space-8);
}

.empty-state__icon {
  width: 56px;
  height: 56px;
  color: var(--color-text-faint);
  margin-bottom: var(--space-5);
}

.empty-state__icon svg { width: 100%; height: 100%; }

.empty-state__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.empty-state__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 32ch;
  margin-bottom: var(--space-6);
  line-height: 1.6;
}

/* ============================================================
   SITE FOOTER
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--color-divider);
  padding-block: var(--space-8);
  background: var(--color-surface);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.footer-copy {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.back-link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  transition: color var(--transition-interactive);
}

.back-link:hover { color: var(--color-primary); }