/**
 * FLAMINGO — Adaptive Brand Layout Engine (CSS)
 *
 * Layout Priority controls text ↔ image balance via CSS variables.
 * Image Frame Engine still owns crop / zoom / focus inside the slot.
 *
 * Text column is protected with minmax(--fl-text-min, 1fr).
 *
 * @package Flamingo_Liqueur
 */

.fl-layout-grid {
  --fl-text-min: 420px;
  --fl-image-min: 280px;
  --fl-image-col: 1fr;
  --fl-layout-gap: clamp(3rem, 8vw, 6.5rem);
  --fl-layout-frame: 100%;

  display: grid;
  gap: var(--fl-layout-gap);
  align-items: center;
}

/* Mobile / narrow: stack. Text keeps readable width. */
.fl-layout-grid .fl-story__copy,
.fl-layout-grid .fl-product__copy {
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 900px) {
  /*
   * Adaptive grid:
   * text column never drops below --fl-text-min
   * image column grows/shrinks via --fl-image-col
   */
  .fl-layout-grid--media-end,
  .fl-story__grid.fl-layout-grid--media-end {
    grid-template-columns:
      minmax(var(--fl-text-min), 1fr)
      minmax(var(--fl-image-min), var(--fl-image-col));
  }

  .fl-layout-grid--media-start,
  .fl-product__grid.fl-layout-grid--media-start,
  .fl-story__grid.fl-layout-grid--media-start {
    grid-template-columns:
      minmax(var(--fl-image-min), var(--fl-image-col))
      minmax(var(--fl-text-min), 1fr);
  }
}

/* Frame scale from Layout Priority (Image Frame width still applies inside) */
.fl-layout-grid .fl-image-frame {
  width: var(--fl-layout-frame);
  max-width: 100%;
  justify-self: center;
}

/* Text-only: ignore image column */
.fl-story--text-only .fl-layout-grid,
.fl-story--text-only .fl-layout-grid--media-end,
.fl-story--text-only .fl-layout-grid--media-start {
  grid-template-columns: 1fr;
  max-width: 40rem;
}

/* Hero: Layout Priority adjusts content measure only (full-bleed media stays) */
.fl-hero.fl-layout {
  --fl-hero-content-max: 34rem;
}

.fl-hero.fl-layout .fl-hero__content {
  max-width: var(--fl-hero-content-max);
}

/* Product home centering: keep copy readable when image column grows */
.fl-product.fl-layout .fl-product__copy {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Card / editorial grids (How To Enjoy, Gallery, Shop, News)
   Layout Priority adjusts gap + media frame scale.
   Image Frame controls crop inside each card media slot.
   -------------------------------------------------------------------------- */

.fl-how-to-enjoy.fl-layout .fl-how-to-enjoy__grid,
.fl-gallery.fl-layout .fl-gallery__grid,
.fl-shop.fl-layout .fl-shop__grid,
.fl-news.fl-layout .fl-news__grid {
  gap: var(--fl-layout-gap);
}

.fl-how-to-enjoy.fl-layout .fl-how-to-enjoy__media.fl-image-frame,
.fl-shop.fl-layout .fl-shop__media.fl-image-frame,
.fl-news.fl-layout .fl-news__media.fl-image-frame {
  width: var(--fl-layout-frame);
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: var(--fl-frame-ar);
}

.fl-gallery.fl-layout .fl-gallery__figure.fl-image-frame {
  width: 100%;
  max-width: 100%;
}

/* Preserve hover polish with zoom var */
.fl-how-to-enjoy__card:hover .fl-image-frame .fl-how-to-enjoy__img {
  transform: scale(calc(var(--fl-img-zoom, 1) * 1.04));
}

.fl-news__card:hover .fl-image-frame .fl-news__img {
  transform: scale(calc(var(--fl-img-zoom, 1) * 1.03));
}

.fl-how-to-enjoy.fl-layout .fl-how-to-enjoy__body,
.fl-shop.fl-layout .fl-shop__body,
.fl-news.fl-layout .fl-news__body {
  min-width: 0;
}

.fl-how-to-enjoy.fl-layout .fl-how-to-enjoy__header,
.fl-gallery.fl-layout .fl-gallery__header,
.fl-shop.fl-layout .fl-shop__header,
.fl-news.fl-layout .fl-news__header {
  max-width: min(40rem, 100%);
}

@media (max-width: 899px) {
  .fl-layout-grid--media-end,
  .fl-layout-grid--media-start {
    grid-template-columns: 1fr;
  }

  .fl-layout-grid .fl-image-frame {
    width: min(100%, var(--fl-layout-frame));
  }
}