/* =============================================================================
   Section: #culinary (קולינריה — gallery, NOT a hall)
   Owner  : Agent 08 (Phase 4b — Hall Sections Engineer)
   --------------------------------------------------------------------------
   Layout : Header + responsive 3-col gallery; each item aspect-ratio 4/5.
            Captions overlay revealed on hover/focus-within. Mobile shows
            captions always (no hover available).
   Rules  : Logical properties only. Tokens for every value.
   ========================================================================== */

/* Wrapper: when used as a .scroll-scene (Agent 17), no padding/background
   on the outer <section> — the sticky stage paints its own background and
   the post-content paints its own. When used as a plain (legacy) gallery
   without .scroll-scene, the original padding+ink-deep wash kicks in via
   the :not() guard. */
.culinary {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.culinary:not(.scroll-scene) {
  background-color: var(--ink-deep);
  color: var(--fg-on-dark);
  padding-block: var(--section-pad);
}

/* Post-content (gallery after the scrub) gets the ink-deep background so it
   contrasts properly with the rest of the page — single-source via tokens. */
.culinary__post {
  background-color: var(--ink-deep);
  color: var(--fg-on-dark);
  padding-block: var(--section-pad);
  padding-inline: var(--gutter);
}

.culinary__container {
  max-inline-size: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Inside the post-content the gallery should still be width-constrained. */
.culinary__post .culinary__grid {
  max-inline-size: var(--container-wide);
  margin-inline: auto;
}

/* HEADER --------------------------------------------------------------- */
.culinary__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-end: var(--space-16);
  max-inline-size: var(--container-narrow);
}

.culinary__eyebrow {
  font-family: var(--font-body);
  /* Size + weight aligned to the global .section-header__eyebrow (was
     --text-sm / --fw-medium) so eyebrows read identically site-wide.
     Color stays --brass-glow: --brass is too dim on this section's dark
     ink-deep background (documented on-dark exception). 2026-06-15. */
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brass-glow);
  margin: 0;
}

.culinary__title {
  font-family: var(--font-display-he);
  font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ivory);
  margin: 0;
  text-wrap: balance;
}

.culinary__body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-loose);
  color: var(--ivory);
  opacity: 0.85;
  max-inline-size: 56ch;
  margin: 0;
}

/* ---------------------------------------------------------------------- *
 *  GRID — 1 → 2 → 3 columns                                               *
 * ---------------------------------------------------------------------- */
.culinary__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 560px) {
  .culinary__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .culinary__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
  }
}

/* ITEM ----------------------------------------------------------------- */
.culinary__item {
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--ink-medium);
  isolation: isolate;
}

.culinary__item picture,
.culinary__item img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.culinary__item img {
  object-fit: cover;
  transition:
    transform var(--dur-cinema) var(--ease-out-cinema),
    filter var(--dur-deluxe) var(--ease-out-cinema);
}

/* CAPTION ----------------------------------------------------------------
   Skin + always-on visibility now come from the canonical .media-caption
   component (css/components/media-caption.css), applied in markup alongside
   the legacy .culinary__item-* hooks (kept for mobile overrides). Captions
   are no longer hover-gated — they read for keyboard/touch/AT users without
   interaction (2026-06-15 unify pass). `.culinary__item-desc` keeps only its
   section-specific measure cap. */
.culinary__item-desc { max-inline-size: 36ch; }

/* Image hover-zoom — pure enhancement on top of the always-visible caption. */
@media (hover: hover) and (pointer: fine) {
  .culinary__item:hover img,
  .culinary__item:focus-within img {
    transform: scale(1.05);
    filter: brightness(0.92);
  }
}

/* Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .culinary__item img { transition: none; }
  .culinary__item:hover img,
  .culinary__item:focus-within img {
    transform: none;
    filter: none;
  }
}