/* ══════════════════════════════════════════
   EiGHT's CHiLi — MEDIA BLOCK SYSTEM
   ══════════════════════════════════════════ */

/* ══ HERO ══ */
.hero-ticker {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);   /* vertically centered in the hero */
  left: 0;
  right: 0;
  padding: var(--space-sm) 0;   /* height follows the logo */
  background: var(--color-grey-1);
  overflow: hidden;
  z-index: 1;
  display: flex;
  align-items: center;
}
.hero-ticker-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: ticker 18s linear infinite;
  font-size: var(--fs-body);
  color: var(--red);   /* same red as the logo, to harmonize */
  text-transform: uppercase;
}
.hero-ticker-track > * { padding-right: calc(var(--space-xl) * 4); }
.hero-ticker-logo { height: 40px; width: auto; display: block; }
.hero-ticker-track .media-title-sub { font-family: var(--font-body); font-style: normal; }
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-20%); }
}
.product-name,
.product-desc,
.product-price {
  color: var(--dark);
  text-decoration: none;
}
.product-heat { color: var(--red); }
.media-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.media-container--hero { height: var(--hero-h); }
.hero-section--fullbleed { margin-left: calc(-1 * var(--sidebar-width)); margin-right: calc(-1 * var(--space-md)); }
.hero-section--fullbleed .media-container--hero { height: 100vh; }
.media-controls {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding: 0 0 var(--space-sm) 0;
  font-size: var(--fs-body);
  color: var(--dark);
}
/* Fixed-width nav column — matches .section-header-info's title
   column — so the caption that follows always starts at the same x.
   Flex (not grid) because some rows have a 3rd child
   (.section-view-more) pushed to the far end via margin-left: auto,
   which a strict 2-column grid can't accommodate. */
.media-controls-nav {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  width: 190px;
  flex-shrink: 0;
}
.media-controls-prev,
.media-controls-next {
  cursor: pointer;
  text-transform: uppercase;
}
.media-controls-count { color: var(--dark); }
.media-block {
  display: flex;
  gap: var(--block-gap);
}
.media-item {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.media-section { margin-bottom: var(--space-xl); }
/* On homepage, sections are siblings in a flex column — gap replaces
   the individual margin-bottom above so spacing isn't duplicated. */
#pageSections {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
#pageSections > .media-section { margin-bottom: 0; }
.media-wrapper {
  position: relative;
  width: 100%;
}
/* Generic block-row spacing — every distinct row/block stacked inside a
   .media-wrapper (e.g. when these become separate Kirby blocks rendered
   in sequence) gets this for spacing from whatever came before it. */
.media-row {
  margin-top: var(--space-lg);
}
.media-row:first-child {
  margin-top: 0;
}

/* ══════════════════════════════════════════
   LAYOUT ROW / COLUMN
   Mirrors Kirby's Layout field: a row sits on a 12-column grid and is
   split into columns by ratio (1/1, 1/2+1/2, 1/3+2/3, 1/4+3/4, ...).
   Any block type can go inside any .layout-column — the column itself
   carries no content opinion, only width. A .layout-row is itself a
   row, so it takes .media-row for spacing from whatever came before it.
   ══════════════════════════════════════════ */
.layout-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--block-gap);   /* same gap as block items, so a span-8 column == a span-8 block (2 tiles + gap fit exactly) */
  row-gap: var(--space-lg);
  align-items: start;   /* top-align columns of unequal height; also lets a sticky column work */
}
.layout-column { min-width: 0; grid-column: span 12; }
.layout-column--1-4 { grid-column: span 3; }
.layout-column--1-3 { grid-column: span 4; }
.layout-column--1-2 { grid-column: span 6; }
.layout-column--2-3 { grid-column: span 8; }
.layout-column--3-4 { grid-column: span 9; }
.is-mobile .layout-row { grid-template-columns: 1fr; row-gap: var(--space-xl); }
.is-mobile .layout-column { grid-column: 1 / -1; }

/* Image block — a plain standalone image, sized to fill its column.
   Distinct from .media-block (the carousel's scrolling row of items) —
   this is one image, not a carousel. */
.image-block {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  position: relative;
}
/* Wide variant — a single full-width hero image (e.g. one real photo,
   no carousel needed), rather than a narrow portrait column image. */
.image-block--wide { aspect-ratio: 16 / 9; }
.image-block img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-block {
  display: flex;
  flex-direction: column;
}
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-sm);
  align-items: start;
  padding: var(--space-sm) 0 0 0;
  font-size: var(--fs-body);
}
.product-detail .product-name { grid-column: 1; grid-row: 1; padding-left: var(--space-xs); }
.product-detail .product-heat { grid-column: 1; grid-row: 2; padding-left: var(--space-xs); }
.product-detail .product-price { grid-column: 1; grid-row: 3; padding-left: var(--space-xs); }
.product-detail .add-btn { grid-column: 1 / -1; grid-row: 4; width: calc(100% - var(--space-xs) * 2); margin: var(--space-xs) auto 0; text-align: center; }
.product-detail .link-btn { grid-column: 1 / -1; grid-row: 4; }
.is-mobile .product-detail { grid-template-columns: 1fr; }
.is-mobile .product-detail .product-name { grid-column: 1; grid-row: 1; }
.is-mobile .product-detail .product-heat { grid-column: 1; grid-row: 2; }
.is-mobile .product-detail .product-price { grid-column: 1; grid-row: 3; }
.is-mobile .product-detail .add-btn { grid-column: 1; grid-row: 4; width: calc(100% - var(--space-xs) * 2); margin: var(--space-xs) auto 0; text-align: center; }
.product-detail .product-heat { color: var(--red); }

.media-title {
  padding: 0 0 var(--space-xs) 0;
  font-size: var(--fs-serif-headline);
  font-family: var(--font-serif);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.media-title--link {
  color: var(--dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 1px;
  cursor: pointer;
}
.media-title--link:hover { text-decoration: none; }
.media-title-desc {
  font-size: var(--fs-body);
  color: var(--dark);
  margin-bottom: var(--space-sm);
}
.media-title-sub {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
}
.media-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--color-grey-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: var(--fs-label);
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.media-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shop-section .media-ph {
  background: url('/img/chili-jar.jpg') center/cover no-repeat;
  color: transparent;
}
/* Carousel block (Kirby: carousel.yml) — the Post Template gallery
   shared by Recipe/Event/Collaboration. Matches the real app's
   CarouselBlock.tsx: a native horizontal scroll-snap strip. Item width is
   set by the --block-* scale (column-width-relative), not a fixed px value
   that ignores the column it sits in. */
.media-container--editorial {
  height: auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.media-container--editorial::-webkit-scrollbar { display: none; }
.media-container--editorial .media-block {
  align-items: flex-start;   /* portrait + landscape items differ in height — top-align */
}
/* Carousel media width by orientation, on the block module:
   portrait (default) = 1 span (--block-1-3); landscape = 2 spans
   (--block-2-3, = two portraits + the gap). */
.media-item--fit {
  flex: 0 0 var(--block-1-3);
  width: var(--block-1-3);
  height: auto;
  scroll-snap-align: start;
}
.media-item--fit.media-item--landscape {
  flex: 0 0 var(--block-2-3);
  width: var(--block-2-3);
}
/* A placeholder-only item (no real <img>) has no intrinsic size, and since
   .media-ph fills its container via position:absolute, height:auto would
   otherwise collapse to 0 — invisible, and excluded from the strip's
   scrollable width, making it unreachable. Give it a fallback ratio
   matching its portrait/landscape width instead. */
.media-item--fit:has(> .media-ph:only-child) {
  aspect-ratio: 3 / 4;
}
.media-item--fit.media-item--landscape:has(> .media-ph:only-child) {
  aspect-ratio: 16 / 9;
}
/* Column variant — for a carousel dropped into a half-width (1+1) layout
   column rather than the full content width. The --block-* units above are
   sized against the whole content column (container query on #mainRight),
   so they'd overflow a half-width column; this makes every item exactly
   100% of whatever column it's actually in instead, so the strip shows one
   image at a time. No JS changes needed — makeCarousel() already steps by
   the first item's rendered width, which is now the column's full width. */
.media-container--column .media-item--fit,
.media-container--column .media-item--fit.media-item--landscape {
  flex: 0 0 100%;
  width: 100%;
}
.media-item--fit img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: unset;
}
.is-mobile .media-item--fit { flex: 0 0 70%; width: 70%; }
.is-mobile .media-item--fit.media-item--landscape { flex: 0 0 90%; width: 90%; }
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--dark);
  font-size: var(--fs-hero);
  cursor: pointer;
  z-index: 2;
}

/* ══════════════════════════════════════════
   MOBILE OVERRIDES
   ══════════════════════════════════════════ */
.is-mobile .media-container { height: 100vw; }
.is-mobile .media-container--hero { height: var(--hero-h); }
.is-mobile .hero-section { margin-left: -24px; margin-right: calc(-1 * var(--space-md)); }
.is-mobile .media-block .media-item { flex: 0 0 100%; width: 100%; height: 100vw; }
.is-mobile .media-container--static > .product-block { flex: 0 0 calc((100% - var(--space-xs)) / 2); overflow: hidden; }
.is-mobile .product-block .media-item { height: var(--card-h-mobile); }

/* Mobile card height variable is set in variables.css */
/* ══════════════════════════════════════════
   EiGHT's CHiLi — PRODUCT GRID
   ══════════════════════════════════════════

   Two image variants per product block:
   - Portrait (default): aspect-ratio 2/3 (scales with column width)
   - Square (.media-item--square): aspect-ratio 1/1

   Container uses flex so blocks keep their own height
   — portrait and square items do NOT equalize.
*/

.media-container--static {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: var(--space-xs);
  row-gap: var(--space-md);
  height: auto !important;
  overflow: visible !important;
}

.media-container--static > .product-block {
  flex: 0 1 var(--block-1-3);   /* span 4 of 12 — 3 across; shrink allowed only to absorb sub-pixel rounding so tiles never wrap early */
  display: flex;
  flex-direction: column;
}

/* Portrait image — default
   aspect-ratio scales proportionally with column width */
.media-container--static .media-item {
  flex: none;
  width: 100%;
  aspect-ratio: 2 / 3;
  height: auto;
  position: relative;
  overflow: hidden;
}

/* Square image variant */
.media-container--static .media-item.media-item--square {
  aspect-ratio: 1 / 1;
  height: auto;
}

/* Mobile: 2 columns */
.is-mobile .media-container--static > .product-block {
  flex: 0 0 calc((100% - var(--space-xs)) / 2);
  overflow: hidden;
}
.is-mobile .media-container--static .media-item {
  aspect-ratio: 1 / 1;
  height: auto;
}