/*
 * Gallery — Concept B: Split Story.
 *
 * Block style on core/group (section). Two rows:
 *   story-row  — 1fr image | 1fr text, gap space.10 (56px)
 *   support-row — 3 equal landscape images, gap space.6 (24px)
 *
 * Tablet (< 64em): story row stacks (img top / text below); support row 2-up,
 *   3rd image spans full width.
 * Mobile (< 40em): all stacked 1-col.
 *
 * CSS ordering rule: lower-specificity selectors always precede
 * higher-specificity selectors for the same property/element.
 * All img base styles precede hover states.
 *
 * Tokens read:
 *   semantic.color.bg.base
 *   semantic.color.text.primary / muted
 *   color.terracotta.500              (kicker)
 *   font.family.display               (Cormorant Garamond — heading)
 *   semantic.typography.label.*       (Inter — kicker, body, CTA)
 *   space.1 / space.3 / space.5 / space.6 / space.7 / space.10 / space.11
 *   duration.base / slow · easing.default
 *   semantic.color.interactive.focus
 */

/* --- Section container ---------------------------------------------------- */

.wp-block-group.is-style-wpdl-gallery {
  padding-inline: var(--wp--custom--space--7);

  /* Vertical padding is buyer-editable via the Dimensions "Normal" preset
     (spacingSizes 60) applied in the pattern markup — not hardcoded here. */
}

/* --- Story row base (low specificity — must precede any high-spec rule) --- */

.wpdl-gallery__story-row.wp-block-columns {
  gap: var(--wp--custom--space--10); /* 56px between image col and text col */
  align-items: center;
}

/* --- Support row base (low specificity — must precede the margin override) - */

.wpdl-gallery__support-row.wp-block-columns {
  gap: var(--wp--custom--space--6); /* 24px ≈ 28px spec */
  align-items: stretch;
}

/* --- Direct-child margin resets (WP flow/constrained layout adds margins) -- */

.wp-block-group.is-style-wpdl-gallery > * {
  margin-block: 0;
}

/* Row gap: re-applied with higher specificity AFTER the reset and AFTER the
   low-spec support-row rule above. Correct order: low spec → high spec. */
.wp-block-group.is-style-wpdl-gallery > .wpdl-gallery__support-row.wp-block-columns {
  margin-block-start: var(--wp--custom--space--10); /* 56px */
}

/* =========================================================================
   IMAGES — base styles before hover states (no-descending-specificity rule)
   ========================================================================= */

.wpdl-gallery__main-img-col.wp-block-column {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.wpdl-gallery__main-img.wp-block-image {
  margin-block: 0;
  overflow: hidden;

  /* aspect-ratio on figure so the placeholder is visible even without an img */
  aspect-ratio: 5 / 4;
  background-color: var(--wp--custom--semantic--color--brand--primary);
}

.wpdl-gallery__main-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--wp--custom--duration--slow) var(--wp--custom--easing--default);
}

/* Support image col */
.wpdl-gallery__support-col.wp-block-column {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.wpdl-gallery__support-img.wp-block-image {
  margin-block: 0;
  overflow: hidden;

  /* aspect-ratio on figure so colored placeholder is visible without img */
  aspect-ratio: 4 / 3;
}

/* Varied placeholder colours per support column (replaced by real photos at P9) */
.wpdl-gallery__support-row .wpdl-gallery__support-col:nth-child(1) .wpdl-gallery__support-img.wp-block-image { background-color: var(--wp--custom--semantic--color--accent--primary); }
.wpdl-gallery__support-row .wpdl-gallery__support-col:nth-child(2) .wpdl-gallery__support-img.wp-block-image { background-color: var(--wp--custom--semantic--color--brand--primary); }
.wpdl-gallery__support-row .wpdl-gallery__support-col:nth-child(3) .wpdl-gallery__support-img.wp-block-image { background-color: var(--wp--custom--semantic--color--text--muted); }

/* Support images: landscape — base BEFORE any hover state */
.wpdl-gallery__support-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--wp--custom--duration--slow) var(--wp--custom--easing--default);
}

/* --- Hover states (after all base img rules) ------------------------------ */

.wpdl-gallery__main-img-col:hover .wpdl-gallery__main-img img {
  transform: scale(1.03);
}

.wpdl-gallery__support-col:hover .wpdl-gallery__support-img img {
  transform: scale(1.03);
}

/* =========================================================================
   STORY TEXT COLUMN
   ========================================================================= */

.wpdl-gallery__story-col.wp-block-column {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;

  /* Center the story content against the tall image. WP core forces
     align-items:normal on .wp-block-columns, so the row-level align-items:center
     is lost and this column stretches full height — justify-content:center
     re-centers the content vertically without fighting WP's override. */
  justify-content: center;
  gap: var(--wp--custom--space--5); /* 20px between kicker / heading / body / cta */
}

/* Reset WP is-layout-flow margins that would break the flex gap */
.wp-block-group.is-style-wpdl-gallery .wpdl-gallery__story-col > * {
  margin-block: 0;
}

.wpdl-gallery__kicker {
  font-family: var(--wp--custom--semantic--typography--label--font-family);
  font-size: clamp(0.625rem, 0.85vw, 0.75rem);
  font-weight: var(--wp--custom--semantic--typography--label--font-weight);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--wp--custom--semantic--color--accent--primary);
  margin-block: 0;
}

.wpdl-gallery__heading {
  font-family: var(--wp--custom--font--family--display);
  font-size: clamp(1.5rem, 3.5vw, 2.375rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--wp--custom--semantic--color--text--primary);
  margin-block: 0;
}

.wpdl-gallery__body {
  font-family: var(--wp--custom--semantic--typography--label--font-family);
  font-size: clamp(0.8125rem, 1.1vw, 0.875rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--wp--custom--semantic--color--text--muted);
  margin-block: 0;
}

/* Extra gap above CTA */
.wpdl-gallery__story-col .wp-block-buttons {
  margin-block-start: var(--wp--custom--space--3);
}

/* =========================================================================
   CTA — text-link button style (shared with category-tiles)
   CSS duplicated here so gallery.css is self-contained.
   ========================================================================= */

/* stylelint-disable declaration-no-important */
.wp-block-button.is-style-wpdl-text-link .wp-block-button__link {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding-block: 0 !important;
  padding-inline: 0 !important;
  box-shadow: none !important;
  color: var(--wp--custom--semantic--color--text--primary);
  font-family: var(--wp--custom--semantic--typography--label--font-family);
  font-size: clamp(0.6875rem, 0.9vw, 0.75rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  /* stylelint-disable-next-line unit-disallowed-list */
  text-decoration-thickness: 1.5px;
  text-underline-offset: var(--wp--custom--space--1);
  /* stylelint-disable-next-line unit-disallowed-list */
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  transition: letter-spacing var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wp-block-button.is-style-wpdl-text-link .wp-block-button__link:hover {
  background-color: transparent !important;
  letter-spacing: 0.15em;
}
/* stylelint-enable declaration-no-important */

.wp-block-button.is-style-wpdl-text-link .wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--custom--semantic--color--focus--ring);
  outline-offset: var(--wp--custom--space--1);
}

/* =========================================================================
   TABLET  (< 64em = 1024px)
   ========================================================================= */

@media (width < 64em) {
  /* Story row: image on top, text below */
  .wp-block-group.is-style-wpdl-gallery .wpdl-gallery__story-row.wp-block-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wp--custom--space--7);
  }

  .wp-block-group.is-style-wpdl-gallery .wpdl-gallery__story-row .wp-block-column {
    flex: unset;
    min-width: 0;
  }

  /* Switch to wider landscape when image is full-width at tablet */
  .wpdl-gallery__main-img.wp-block-image {
    aspect-ratio: 3 / 2;
  }

  /* Support row: 2-up, 3rd spans full width */
  .wp-block-group.is-style-wpdl-gallery .wpdl-gallery__support-row.wp-block-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wp--custom--space--5);
  }

  .wp-block-group.is-style-wpdl-gallery .wpdl-gallery__support-row .wp-block-column {
    flex: unset;
    min-width: 0;
  }

  .wp-block-group.is-style-wpdl-gallery .wpdl-gallery__support-row .wp-block-column:last-child {
    grid-column: 1 / -1;
  }
}

/* =========================================================================
   MOBILE  (< 40em = 640px)
   ========================================================================= */

@media (width < 40em) {
  .wp-block-group.is-style-wpdl-gallery .wpdl-gallery__support-row.wp-block-columns {
    grid-template-columns: 1fr;
    gap: var(--wp--custom--space--6);
  }

  .wp-block-group.is-style-wpdl-gallery .wpdl-gallery__support-row .wp-block-column:last-child {
    grid-column: auto;
  }
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .wpdl-gallery__main-img img,
  .wpdl-gallery__support-img img {
    transition: none;
  }

  .wpdl-gallery__main-img-col:hover .wpdl-gallery__main-img img,
  .wpdl-gallery__support-col:hover .wpdl-gallery__support-img img {
    transform: none;
  }

  .wp-block-button.is-style-wpdl-text-link .wp-block-button__link {
    transition: none;
  }
}