/*
 * Category Tiles — Concept D: Editorial Grid + Hero Tile.
 *
 * Block style on core/group (section). CSS Grid:
 *   desktop  → 2fr 1fr 1fr 1fr (single row)
 *   tablet   → 2-col, hero spans full width
 *   mobile   → 1-col, fully stacked
 *
 * Each tile: image above (4:3 hero / 1:1 standard) → heading → description → text-link CTA.
 * No border, no radius, no shadow (flat editorial per design tokens).
 * Image hover: scale 1.03; reduced-motion: instant state, no animation.
 *
 * Tokens read:
 *   semantic.color.bg.base
 *   semantic.color.text.primary / muted
 *   color.terracotta.500              (section label)
 *   font.family.display               (Cormorant Garamond — headings)
 *   semantic.typography.label.*       (Inter — label, desc, CTA)
 *   space.1 / space.2 / space.3 / space.5 / space.6 / space.7 / space.8 / space.11
 *   duration.base / slow · easing.default
 *   semantic.color.interactive.focus
 */

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

.wp-block-group.is-style-wpdl-category-tiles {
  background-color: var(--wp--custom--semantic--color--background--canvas);
  padding-inline: var(--wp--custom--space--7);  /* 32px inner inset */

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

/* --- Section header ------------------------------------------------------- */

.wpdl-category-tiles__header {
  display: flex;
  flex-direction: column;
  gap: var(--wp--custom--space--1); /* 4px: tight label-to-heading */
  margin-block-end: var(--wp--custom--space--8); /* 40px gap to grid */
}

/* Reset WP is-layout-flow margins that break the flex gap */
.wp-block-group.is-style-wpdl-category-tiles .wpdl-category-tiles__header > * {
  margin-block: 0;
}

.wpdl-category-tiles__label {
  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-category-tiles__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;
}

/* --- Grid ----------------------------------------------------------------- */

.wpdl-category-tiles__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--wp--custom--space--6); /* 24px */
  align-items: start;
}

/* Reset WP is-layout-flow margins on grid children */
.wp-block-group.is-style-wpdl-category-tiles .wpdl-category-tiles__grid > * {
  margin-block: 0;
}

/* --- Tablet (< 64em = 1024px): hero full-width + 3 tiles 2-up ------------ */

@media (width < 64em) {
  .wpdl-category-tiles__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--wp--custom--space--5); /* 20px */
  }

  .wpdl-category-tiles__tile--hero {
    grid-column: 1 / -1;
  }
}

/* --- Mobile (< 40em = 640px): fully stacked ------------------------------- */

@media (width < 40em) {
  .wpdl-category-tiles__grid {
    grid-template-columns: 1fr;
    gap: var(--wp--custom--space--7); /* 32px — more breathing room stacked */
  }

  .wpdl-category-tiles__tile--hero {
    grid-column: auto;
  }
}

/* --- Tile ----------------------------------------------------------------- */

.wpdl-category-tiles__tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Reset WP is-layout-flow margins on tile children */
.wp-block-group.is-style-wpdl-category-tiles .wpdl-category-tiles__tile > * {
  margin-block: 0;
}

/* --- Image ---------------------------------------------------------------- */

.wpdl-category-tiles__tile .wp-block-image {
  margin-block: 0;
  overflow: hidden;
  flex-shrink: 0;
}

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

/* Hero tile: 4:3 */
.wpdl-category-tiles__tile--hero .wp-block-image img {
  aspect-ratio: 4 / 3;
}

/* Standard tiles: 1:1 square */
.wpdl-category-tiles__tile:not(.wpdl-category-tiles__tile--hero) .wp-block-image img {
  aspect-ratio: 1 / 1;
}

/* Hover: subtle scale */
.wpdl-category-tiles__tile:hover .wp-block-image img {
  transform: scale(1.03);
}

/* --- Content group -------------------------------------------------------- */

.wpdl-category-tiles__content {
  padding-block-start: var(--wp--custom--space--5); /* 20px — image-to-text gap */
  display: flex;
  flex-direction: column;
  gap: var(--wp--custom--space--2); /* 8px uniform between title / desc / buttons */
  flex: 1;
}

/* Reset WP is-layout-flow margins inside the content group */
.wp-block-group.is-style-wpdl-category-tiles .wpdl-category-tiles__content > * {
  margin-block: 0;
}

/* --- Tile heading --------------------------------------------------------- */

.wpdl-category-tiles__title {
  font-family: var(--wp--custom--font--family--display);
  font-weight: 500;
  line-height: 1.2;
  color: var(--wp--custom--semantic--color--text--primary);
  margin-block: 0;
}

.wpdl-category-tiles__tile--hero .wpdl-category-tiles__title {
  font-size: clamp(1.1875rem, 2.2vw, 1.625rem);
}

.wpdl-category-tiles__tile:not(.wpdl-category-tiles__tile--hero) .wpdl-category-tiles__title {
  font-size: clamp(1.0625rem, 1.8vw, 1.3125rem);
}

/* --- Description ---------------------------------------------------------- */

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

/* --- CTA: text-link block style on core/button ---------------------------- */

/* Extra top gap between desc and the CTA button group */
.wpdl-category-tiles__content .wp-block-buttons {
  margin-block-start: var(--wp--custom--space--3); /* 12px */
}

/* 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; /* no token for stroke widths */
  text-underline-offset: var(--wp--custom--space--1); /* space.1 = 4px */
  /* stylelint-disable-next-line unit-disallowed-list */
  min-block-size: 44px; /* a11y touch target — WCAG 2.5.5 constant */
  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: 2px;
}

/* --- Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .wpdl-category-tiles__tile .wp-block-image img {
    transition: none;
  }

  .wpdl-category-tiles__tile:hover .wp-block-image img {
    transform: none;
  }

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