/*
 * Featured Grid — Concept D: Borderless Uniform Grid.
 *
 * Block style on core/group (section). Two parts:
 *   header  — kicker + H2 (left) | VIEW ALL CTA (right, align-bottom)
 *   grid    — 4 equal product cards (image 1:1 · title · price / quick-add)
 *
 * Desktop  ≥ 64em  — 4-col grid
 * Tablet   < 64em  — 2×2 grid
 * Mobile   < 40em  — 2×2 grid, tighter gap; header stacks
 *
 * Hover: CSS-only swap — price hidden → Quick Add shown.
 *   :focus-within also triggers so keyboard users get same cue.
 *
 * CSS ordering rule: lower-specificity selectors must precede
 * higher-specificity selectors for the same property/element.
 * All child > * resets are grouped here before the section-level > * reset
 * (which has higher specificity). Img base styles precede hover states.
 *
 * Tokens read:
 *   semantic.color.bg.base
 *   semantic.color.text.primary / muted
 *   color.terracotta.500              (kicker, quick-add, card-1 placeholder)
 *   color.green.500 / .700            (card-2 / card-3 placeholders)
 *   color.neutral.400                 (card-4 placeholder)
 *   font.family.display               (Cormorant Garamond — heading, title)
 *   semantic.typography.label.*       (Inter — kicker, price, CTA)
 *   space.1 / space.3 / space.4 / space.5 / space.7 / space.8 / space.9 / space.11
 *   duration.slow / base · easing.default
 *   semantic.color.interactive.focus
 */

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

.wp-block-group.is-style-wpdl-featured-grid {
  padding-inline: var(--wp--custom--space--7);  /* 32px */

  /* Background (bg-surface) and vertical padding are both buyer-editable:
     background via the block's style.color.background attribute (Color panel
     in Site Editor); padding via the Dimensions "Normal" spacingSizes preset. */
}

/* =========================================================================
   LOW-SPEC CHILD MARGIN RESETS
   Must appear before the section-level > * reset (spec 0,2,0) to satisfy
   no-descending-specificity. These target different elements (deeper nesting)
   but stylelint checks specificity values, not DOM depth.
   ========================================================================= */

/* Header's direct children (spec 0,1,0) */
.wpdl-featured-grid__header > * {
  margin-block: 0;
}

/* Header-left's direct children (spec 0,1,0) */
.wpdl-featured-grid__header-left > * {
  margin-block: 0;
}

/* Grid's direct card children (spec 0,1,0) */
.wpdl-featured-grid__grid > * {
  margin-block: 0;
}

/* Card's direct children (spec 0,1,0) */
.wpdl-featured-grid__card > * {
  margin-block: 0;
}

/* Grid base layout (spec 0,2,1 — before high-spec parent > grid rule) */
.wpdl-featured-grid__grid.wp-block-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--custom--space--8); /* 40px ≈ 36px spec */
}

/* =========================================================================
   HIGH-SPEC SECTION RESETS (after all lower-spec child rules above)
   ========================================================================= */

/* Section-level child margin reset (spec 0,2,0) */
.wp-block-group.is-style-wpdl-featured-grid > * {
  margin-block: 0;
}

/* Grid: 48px gap below header (spec 0,3,1 — highest; after all lower-spec) */
.wp-block-group.is-style-wpdl-featured-grid > .wpdl-featured-grid__grid.wp-block-group {
  margin-block-start: var(--wp--custom--space--9);
}

/* =========================================================================
   SECTION HEADER
   ========================================================================= */

.wpdl-featured-grid__header.wp-block-group {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--wp--custom--space--5);
}

/* Left group: kicker + heading stacked */
.wpdl-featured-grid__header-left.wp-block-group {
  display: flex;
  flex-direction: column;
  gap: var(--wp--custom--space--3);
}

.wpdl-featured-grid__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-featured-grid__heading {
  font-family: var(--wp--custom--font--family--display);
  font-size: clamp(1.375rem, 3.5vw, 2.375rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--wp--custom--semantic--color--text--primary);
  margin-block: 0;
}

/* VIEW ALL CTA: don't shrink so it stays right-aligned */
.wpdl-featured-grid__view-all.wp-block-button {
  flex-shrink: 0;
}

/* =========================================================================
   PRODUCT CARD
   ========================================================================= */

.wpdl-featured-grid__card.wp-block-group {
  display: flex;
  flex-direction: column;
}

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

/* Default placeholder colour + overlay base (overridden per nth-child below) */
.wpdl-featured-grid__img.wp-block-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: var(--wp--custom--semantic--color--brand--primary);
  margin-block: 0;
}

/* Overlay pseudo-element — transparent by default, fades to dark on hover */
.wpdl-featured-grid__img.wp-block-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / 0%);
  transition: background-color var(--wp--custom--duration--slow) var(--wp--custom--easing--default);
  pointer-events: none;
}

/* Per-card placeholder colours (matches Concept D design) */
.wpdl-featured-grid__card:nth-child(1) .wpdl-featured-grid__img.wp-block-image {
  background-color: var(--wp--custom--semantic--color--accent--primary);
}

.wpdl-featured-grid__card:nth-child(2) .wpdl-featured-grid__img.wp-block-image {
  background-color: var(--wp--custom--semantic--color--brand--primary);
}

.wpdl-featured-grid__card:nth-child(3) .wpdl-featured-grid__img.wp-block-image {
  background-color: var(--wp--custom--semantic--color--brand--primary);
}

.wpdl-featured-grid__card:nth-child(4) .wpdl-featured-grid__img.wp-block-image {
  background-color: var(--wp--custom--semantic--color--text--muted);
}

/* Base img styles — MUST precede hover transform */
.wpdl-featured-grid__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--wp--custom--duration--slow) var(--wp--custom--easing--default);
}

/* =========================================================================
   CARD TEXT
   ========================================================================= */

.wpdl-featured-grid__title {
  font-family: var(--wp--custom--font--family--display);
  font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--wp--custom--semantic--color--text--primary);
  margin-block-start: var(--wp--custom--space--5); /* 20px gap after image */
}

.wpdl-featured-grid__price {
  font-family: var(--wp--custom--semantic--typography--label--font-family);
  font-size: clamp(0.75rem, 1.1vw, 0.875rem);
  font-weight: 400;
  color: var(--wp--custom--semantic--color--text--muted);
  margin-block-start: var(--wp--custom--space--1); /* 4px title-price gap */
}

/* Quick Add: hidden by default, revealed on hover/focus-within (CSS swap) */
.wpdl-featured-grid__quick-add {
  display: none;
  font-family: var(--wp--custom--semantic--typography--label--font-family);
  font-size: clamp(0.75rem, 1.1vw, 0.875rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--custom--semantic--color--accent--primary);
  margin-block-start: var(--wp--custom--space--1);
}

/* =========================================================================
   HOVER / FOCUS STATES (after all base img and text styles)
   ========================================================================= */

.wpdl-featured-grid__card:is(:hover, :focus-within) .wpdl-featured-grid__img img {
  transform: scale(1.03);
}

.wpdl-featured-grid__card:is(:hover, :focus-within) .wpdl-featured-grid__img.wp-block-image::after {
  background-color: rgb(0 0 0 / 8%);
}

.wpdl-featured-grid__card:is(:hover, :focus-within) .wpdl-featured-grid__price {
  display: none;
}

.wpdl-featured-grid__card:is(:hover, :focus-within) .wpdl-featured-grid__quick-add {
  display: block;
}

/* =========================================================================
   CTA — text-link button (shared style; self-contained copy so this file
   works standalone without depending on category-tiles.css / gallery.css)
   ========================================================================= */

/* 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) {
  .wpdl-featured-grid__grid.wp-block-group {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wp--custom--space--7); /* 32px ≈ 28px spec */
  }
}

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

@media (width < 40em) {
  .wp-block-group.is-style-wpdl-featured-grid {
    padding-inline: var(--wp--custom--space--5); /* 20px */
  }

  /* Header: stack vertically (CTA moves below heading) */
  .wpdl-featured-grid__header.wp-block-group {
    flex-direction: column;
    align-items: flex-start;
  }

  .wpdl-featured-grid__grid.wp-block-group {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wp--custom--space--4); /* 16px */
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .wpdl-featured-grid__img img {
    transition: none;
  }

  .wpdl-featured-grid__card:is(:hover, :focus-within) .wpdl-featured-grid__img img {
    transform: none;
  }

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