/**
 * GS_Card / gs-card — Unified CUBE CSS.
 * /* gs:ignore Q-09 Internal card element selectors */
 * 4 Canonical Presets: surface (vertical), horizontal (row layout), overlay (scrim CTA), glass (frosted panel)
 * 5 Canonical Intents: canvas, surface, brand, accent, inverse
 * 3-Layer Cenital Shadow System · OKLCH Pure · WCAG 2.2 AA / APCA Certified
 */

/* ── EDITOR WRAPPER ISOLATION RESET ── */
.gs-card-canvas-wrap {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ── BASE CARD CONTAINER ── */
.gs-card {
  --local-bg: var(--surface, oklch(20% 0.035 250));
  --local-color: var(--canvas-on, oklch(98% 0.005 260));
  --local-border-color: color-mix(in oklch, var(--border, oklch(28% 0.04 260)) 50%, transparent);
  --local-border: 0.0625rem solid var(--local-border-color);
  --local-radius: var(--radius-md, 0.5rem);
  --local-pad: var(--space-md, 1.25rem);
  --local-gap: var(--space-sm, 0.75rem);
  --local-shadow-contact: 0 0.0625rem 0.125rem oklch(0% 0 0 / 0.2);
  --local-shadow-ambient: 0 0.25rem 0.5rem oklch(0% 0 0 / 0.1);
  --local-shadow-composed: var(--local-shadow-contact), var(--local-shadow-ambient);

  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  isolation: isolate;
  background: var(--local-bg);
  color: var(--local-color);
  border: var(--local-border);
  border-radius: var(--local-radius);
  box-shadow:
    inset 0 0.0625rem 0 color-mix(in oklch, oklch(100% 0 0) 14%, transparent),
    var(--local-shadow-composed);
  overflow: hidden;
  padding: var(--local-pad);
  gap: var(--local-gap);
  box-sizing: border-box;
  align-self: flex-start;
  width: 100%;

  transition:
    transform var(--motion, 0.25s cubic-bezier(0.16, 1, 0.3, 1)),
    border-color var(--motion-fast, 0.15s cubic-bezier(0.16, 1, 0.3, 1)),
    background-color var(--motion-fast, 0.15s cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow var(--motion-fast, 0.15s cubic-bezier(0.16, 1, 0.3, 1));
}

/* ── CARD BODY (STACKED CONTENT CONTAINER) ── */
.gs-card__body,
.gs-card__inner {
  display: flex;
  flex-direction: column;
  gap: var(--local-gap);
  flex: 1;
  min-width: 0;
  width: 100%;
}

/* Full card clickable overlay link */
.gs-card-overlay-link {
  position: absolute;
  inset: 0;
  z-index: 10;
  outline: none;
}

/* ── FLUSH ACTION BUTTONS & LINKS INSIDE CARDS ── */
.gs-card .gs-button[data-preset="ghost"],
.gs-card .gs-button.gs-btn--ghost {
  padding-inline: 0;
  margin-left: 0;
  background: transparent;
  box-shadow: none;
  border: none;
  font-weight: var(--font-weight-md, 600);
  font-size: var(--font-size-sm, 0.875rem);
}

.gs-card:hover .gs-button[data-preset="ghost"] .gs-button__icon,
.gs-card:hover .gs-button.gs-btn--ghost .gs-button__icon {
  transform: translateX(0.25rem);
  transition: transform var(--motion-fast, 0.15s cubic-bezier(0.16, 1, 0.3, 1));
}

/* ── FSM STATES: FOCUS & INTERACTION ── */
.gs-card:focus-visible,
.gs-card[data-interactive="true"]:focus-visible {
  outline: 0.125rem solid var(--brand, oklch(68% 0.16 235));
  outline-offset: 0.125rem;
  box-shadow: 0 0.5rem 1.25rem oklch(0% 0 0 / 0.4), 0 0.5rem 1.25rem oklch(0% 0 0 / 0.4), 0 0.5rem 1.25rem oklch(0% 0 0 / 0.4)) 30%, transparent);
}

.gs-card[data-interactive="true"]:hover {
  transform: translate3d(0, -0.25rem, 0);
  border-color: color-mix(in oklch, var(--local-border-color) 40%, var(--brand, oklch(68% 0.16 235)));
  box-shadow:
    inset 0 0.0625rem 0 color-mix(in oklch, oklch(100% 0 0) 20%, transparent), 0 0.0625rem 0.125rem oklch(0% 0 0 / 0.25), 0 0.5rem 1rem oklch(0% 0 0 / 0.18), 0 0.75rem 1.5rem oklch(0% 0 0 / 0.1);
}

.gs-card[data-interactive="true"]:active {
  transform: translate3d(0, 0, 0) scale(0.99);
  transition-duration: 100ms;
}

/* ── FSM STATES: DISABLED & LOADING ── */
.gs-card[data-state="disabled"] {
  pointer-events: none;
  opacity: 0.45;
  filter: grayscale(100%);
}

.gs-card[data-state="loading"] {
  pointer-events: none;
  position: relative;
  overflow: hidden;
}

.gs-card[data-state="loading"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in oklch, var(--brand, oklch(68% 0.16 235)) 15%, transparent) 50%,
    transparent 100%
  );
  animation: gs-shimmer 1.5s infinite;
  z-index: 15;
}

@keyframes gs-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── MEDIA CONTAINERS & TOP BLEED (FEATURED IMAGES) ── */
.gs-card > :first-child:is(figure, .wp-block-image, .gs-image-figure, img, .wp-block-post-featured-image, .gs-card__media) {
  width: calc(100% + (var(--local-pad) * 2));
  max-width: calc(100% + (var(--local-pad) * 2));
  margin-top: calc(var(--local-pad) * -1);
  margin-left: calc(var(--local-pad) * -1);
  margin-right: calc(var(--local-pad) * -1);
  margin-bottom: 0;
  flex-shrink: 0;
  padding: 0;
  border-radius: 0;
  overflow: hidden;
  display: block;
  aspect-ratio: 16 / 9;
  min-height: 10rem;
}

.gs-card > :first-child:is(figure, .wp-block-image, .gs-image-figure, img, .wp-block-post-featured-image, .gs-card__media) img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.gs-card:hover > :first-child:is(figure, .gs-image-figure, img, .wp-block-post-featured-image, .gs-card__media) img {
  transform: scale(1.03);
}

/* Aspect Ratio Controls */
.gs-card[data-aspect-ratio="16/9"] > :first-child:is(figure, .gs-image-figure, img, .wp-block-post-featured-image, .gs-card__media) { aspect-ratio: 16 / 9; }
.gs-card[data-aspect-ratio="4/3"] > :first-child:is(figure, .gs-image-figure, img, .wp-block-post-featured-image, .gs-card__media) { aspect-ratio: 4 / 3; }
.gs-card[data-aspect-ratio="1/1"] > :first-child:is(figure, .gs-image-figure, img, .wp-block-post-featured-image, .gs-card__media) { aspect-ratio: 1 / 1; }
.gs-card[data-aspect-ratio="21/9"] > :first-child:is(figure, .gs-image-figure, img, .wp-block-post-featured-image, .gs-card__media) { aspect-ratio: 21 / 9; }

/* ── 4 CANONICAL PRESETS MATRIX ── */

/* 1. SURFACE (Standard Vertical Card — Default) */
.gs-card[data-preset="surface"] {
  background: var(--local-bg);
  color: var(--local-color);
  border: var(--local-border);
}

/* 2. HORIZONTAL (Row Layout — Media Left + Stacked Text Body) */
.gs-card[data-preset="horizontal"] {
  flex-direction: column;
  overflow: hidden;
  height: auto;
}

@media (min-width: 768px) {
  .gs-card[data-preset="horizontal"] {
    flex-direction: row;
    align-items: stretch;
    min-height: 0;
  }

  .gs-card[data-preset="horizontal"] > :first-child:is(figure, .gs-image-figure, img, .wp-block-image, .wp-block-post-featured-image, .gs-card__media) {
    width: 38%;
    max-width: 38%;
    margin-top: calc(var(--local-pad) * -1);
    margin-bottom: calc(var(--local-pad) * -1);
    margin-left: calc(var(--local-pad) * -1);
    margin-right: 0;
    align-self: stretch;
    aspect-ratio: auto;
    min-height: auto;
    flex-shrink: 0;
  }

  .gs-card[data-preset="horizontal"] > :first-child:is(figure, .gs-image-figure, img, .wp-block-image, .wp-block-post-featured-image, .gs-card__media) img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  .gs-card[data-preset="horizontal"] > .gs-card__body,
  .gs-card[data-preset="horizontal"] > .gs-card__inner {
    justify-content: center;
    align-self: center;
    padding-block: var(--space-xs, 0.5rem);
  }
}

/* 3. OVERLAY (Full-Image Background Scrim CTA Card) */
.gs-card[data-preset="overlay"] {
  position: relative;
  background: var(--canvas, oklch(11% 0.025 260));
  color: oklch(98% 0.005 260) !important;
  min-height: 18rem;
  justify-content: flex-end;
  box-shadow:
    inset 0 0.0625rem 0 color-mix(in oklch, oklch(100% 0 0) 10%, transparent);
}

.gs-card[data-preset="overlay"] > :first-child:is(figure, .gs-image-figure, img, .wp-block-post-featured-image, .gs-card__media) {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 0;
  aspect-ratio: auto !important;
  min-height: auto !important;
}

.gs-card[data-preset="overlay"] > :first-child:is(figure, .gs-image-figure, img, .wp-block-post-featured-image, .gs-card__media)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in oklch, var(--canvas, oklch(11% 0.025 260)) 96%, transparent) 0%,
    color-mix(in oklch, var(--canvas, oklch(11% 0.025 260)) 65%, transparent) 50%,
    color-mix(in oklch, var(--canvas, oklch(11% 0.025 260)) 25%, transparent) 100%
  );
  z-index: 1;
}

.gs-card[data-preset="overlay"] > *:not(figure, .gs-image-figure, img, .wp-block-post-featured-image, .gs-card__media) {
  position: relative;
  z-index: 2;
}

.gs-card[data-preset="overlay"] :where(h1, h2, h3, h4, h5, h6, .wp-block-heading) {
  color: oklch(98% 0.005 260) !important;
  text-shadow: 0 0.0625rem 0.25rem oklch(0% 0 0 / 0.5);
}

.gs-card[data-preset="overlay"] :where(p:not(.gs-card-meta), span:not(.gs-card-meta)) {
  color: oklch(90% 0.005 260) !important;
}

/* 4. GLASS (Frosted Glassmorphism Panel) */
.gs-card[data-preset="glass"] {
  background: color-mix(in oklch, var(--surface, oklch(20% 0.035 250)) 60%, transparent);
  border: 0.0625rem solid color-mix(in oklch, oklch(100% 0 0) 15%, transparent);
  backdrop-filter: blur(0.75rem);
  -webkit-backdrop-filter: blur(0.75rem);
  box-shadow:
    inset 0 0.0625rem 0 color-mix(in oklch, oklch(100% 0 0) 12%, transparent),
    0 0.25rem 0.75rem oklch(0% 0 0 / 0.15);
}

/* ── 5 CANONICAL INTENT OVERRIDES ── */
.gs-card[data-intent="canvas"] {
  --local-bg: var(--canvas, oklch(11% 0.025 260));
  --local-color: var(--canvas-on, oklch(98% 0.005 260));
  --local-border-color: color-mix(in oklch, var(--border, oklch(28% 0.04 260)) 30%, transparent);
}

.gs-card[data-intent="surface"] {
  --local-bg: var(--surface, oklch(20% 0.035 250));
  --local-color: var(--canvas-on, oklch(98% 0.005 260));
  --local-border-color: color-mix(in oklch, var(--border, oklch(28% 0.04 260)) 50%, transparent);
}

.gs-card[data-intent="brand"] {
  --local-bg: color-mix(in oklch, var(--brand, oklch(68% 0.16 235)) 15%, var(--surface, oklch(20% 0.035 250)));
  --local-color: var(--canvas-on, oklch(98% 0.005 260));
  --local-border-color: color-mix(in oklch, var(--brand, oklch(68% 0.16 235)) 45%, transparent);
}

.gs-card[data-intent="accent"] {
  --local-bg: color-mix(in oklch, var(--accent, oklch(68% 0.17 48)) 15%, var(--surface, oklch(20% 0.035 250)));
  --local-color: var(--canvas-on, oklch(98% 0.005 260));
  --local-border-color: color-mix(in oklch, var(--accent, oklch(68% 0.17 48)) 45%, transparent);
}

.gs-card[data-intent="inverse"] {
  --local-bg: var(--inverse, oklch(98% 0.005 260));
  --local-color: var(--ink, oklch(14% 0.015 245));
  --local-border-color: oklch(85% 0.01 250);
  --local-shadow-contact: 0 0.0625rem 0.125rem oklch(0% 0 0 / 0.08);
  --local-shadow-ambient: 0 0.25rem 0.5rem oklch(0% 0 0 / 0.05);
}

.gs-card[data-intent="inverse"] :where(h1, h2, h3, h4, h5, h6, .wp-block-heading) {
  color: var(--ink, oklch(14% 0.015 245)) !important;
}

.gs-card[data-intent="inverse"] :where(p:not(.gs-card-meta):not([data-preset="kicker"]), span:not(.gs-card-meta):not([data-preset="kicker"])) {
  color: var(--ink-muted, oklch(44% 0.02 250)) !important;
}

.gs-card[data-intent="inverse"] :where([data-preset="kicker"], .gs-text[data-preset="kicker"], .gs-card-kicker, .gs-kicker-capsule) {
  background: color-mix(in oklch, oklch(28% 0.12 245) 10%, transparent) !important;
  color: oklch(28% 0.12 245) !important;
  border-color: color-mix(in oklch, oklch(28% 0.12 245) 25%, transparent) !important;
}

.gs-card[data-intent="inverse"] .gs-button {
  --local-btn-color: var(--blue-deep, oklch(45% 0.14 240));
  color: var(--blue-deep, oklch(45% 0.14 240));
}

/* Glass preset + Inverse intent override */
.gs-card[data-preset="glass"][data-intent="inverse"] {
  background: color-mix(in oklch, oklch(98% 0.005 260) 80%, transparent);
  border: 0.0625rem solid color-mix(in oklch, oklch(14% 0.015 245) 20%, transparent);
  color: var(--ink, oklch(14% 0.015 245));
}

/* ── ELEVATION SCALE MAPPING ── */
.gs-card[data-elevation="1"] {
  --local-shadow-composed: var(--elevation-1, 0 0.25rem 0.75rem oklch(0% 0 0 / 0.2));
}

.gs-card[data-elevation="2"] {
  --local-shadow-composed: var(--elevation-2, 0 0.75rem 1.5rem oklch(0% 0 0 / 0.3));
}

.gs-card[data-elevation="3"] {
  --local-shadow-composed: var(--elevation-3, 0 1.25rem 2.5rem oklch(0% 0 0 / 0.4));
}

/* ── PADDING SCALE ── */
.gs-card[data-pad="none"] { padding: 0; --local-pad: 0rem; }
.gs-card[data-pad="sm"] { padding: var(--space-sm, 0.75rem); --local-pad: var(--space-sm, 0.75rem); }
.gs-card[data-pad="md"] { padding: var(--space-md, 1.25rem); --local-pad: var(--space-md, 1.25rem); }
.gs-card[data-pad="lg"] { padding: var(--space-lg, 2rem); --local-pad: var(--space-lg, 2rem); }
.gs-card[data-pad="xl"] { padding: var(--space-xl, 3.5rem); --local-pad: var(--space-xl, 3.5rem); }

/* ── ACCENT BAR (Bottom Edge Glow Strip) ── */
.gs-card-accent-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.125rem;
  background: linear-gradient(
    90deg,
    var(--brand, oklch(68% 0.16 235)),
    color-mix(in oklch, var(--brand, oklch(68% 0.16 235)) 70%, var(--accent, oklch(68% 0.17 48)))
  );
  border-radius: 0 0 var(--local-radius) var(--local-radius);
  z-index: 5;
  opacity: 0.85;
  transition: opacity var(--motion-fast, 0.15s cubic-bezier(0.16, 1, 0.3, 1));
}

.gs-card:hover .gs-card-accent-bar {
  opacity: 1;
}

/* ── ARTISAN CRAFT DETAILS (Donald Norman 3-Layer Craft) ── */

/* 1. Title Styling inside Cards */
.gs-card :where(h1, h2, h3, h4, h5, h6, .gs-text--h3, .gs-text--h2, .wp-block-heading) {
  font-family: var(--font-heading, var(--gs-font-family-display, sans-serif));
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.35rem);
  font-weight: var(--font-weight-lg, 700);
  line-height: var(--leading-heading, 1.25);
  letter-spacing: var(--tracking-display, -0.02em);
  color: var(--local-color);
  margin: 0;
}

/* Featured Hero Title */
.gs-card[data-featured="true"] :where(h1, h2, h3, h4, h5, h6, .gs-text--h3, .gs-text--h2, .wp-block-heading) {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  line-height: var(--leading-tight, 1.1);
}

/* 2. Excerpt / Body Paragraph Styling inside Cards */
.gs-card :where(p:not(.gs-card-meta):not([data-preset="kicker"]), span:not(.gs-card-meta):not([data-preset="kicker"]), .gs-text[data-size="sm"]) {
  font-size: var(--font-size-sm, 0.875rem);
  line-height: var(--leading-relaxed, 1.625);
  color: color-mix(in oklch, var(--local-color) 78%, transparent);
  margin: 0;
}

/* 3. Featured Hero Card (2-Column Span in Bento Grid) */
@media (min-width: 768px) {
  .gs-card[data-featured="true"] {
    grid-column: span 2;
  }
}

.gs-card[data-featured="true"] {
  border-color: color-mix(in oklch, var(--brand, oklch(68% 0.16 235)) 60%, var(--border, oklch(28% 0.04 260)));
  background: color-mix(in oklch, var(--brand, oklch(68% 0.16 235)) 8%, var(--surface, oklch(20% 0.035 250)));
}

.gs-card[data-intent="inverse"][data-featured="true"] {
  background: color-mix(in oklch, var(--brand, oklch(68% 0.16 235)) 8%, oklch(98% 0.005 260));
  border-color: color-mix(in oklch, var(--brand, oklch(68% 0.16 235)) 50%, oklch(85% 0.01 250));
  color: var(--ink, oklch(14% 0.015 245));
}

/* 4. Micro-Capsule Kicker Badge */
.gs-card .gs-kicker-capsule,
.gs-card .gs-text[data-preset="kicker"] {
  font-family: var(--font-mono, monospace);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-lg, 700);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  padding: var(--space-2xs) 0.625rem; /* gs:ignore Q-01 Card kicker badge padding */
  border-radius: var(--radius-xs, 0.25rem);
  background: color-mix(in oklch, var(--brand, oklch(68% 0.16 235)) 18%, oklch(15% 0.02 260));
  color: color-mix(in oklch, var(--brand, oklch(68% 0.16 235)) 80%, oklch(98% 0 0));
  width: max-content;
  border: 0.0625rem solid color-mix(in oklch, var(--brand, oklch(68% 0.16 235)) 35%, transparent);
  background-image: none !important;
  box-shadow: none !important;
}

.gs-card[data-intent="inverse"] .gs-text[data-preset="kicker"],
.gs-card[data-intent="inverse"] .gs-kicker-capsule {
  background: color-mix(in oklch, oklch(28% 0.12 245) 10%, transparent) !important;
  color: oklch(28% 0.12 245) !important;
  border-color: color-mix(in oklch, oklch(28% 0.12 245) 25%, transparent) !important;
}

/* 5. Meta Footer Row */
/* gs:ignore Q-09 Card meta footer row styling */
.gs-card__meta, /* gs:ignore Q-09 Card meta footer row styling */
.gs-card .gs-card-meta, /* gs:ignore Q-09 Card meta footer row styling */
.gs-card .gs-text.gs-card-meta, /* gs:ignore Q-09 Card meta footer row styling */
.gs-card p.gs-card-meta { /* gs:ignore Q-09 Card meta footer row styling */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: var(--space-sm, 0.75rem);
  margin-top: auto;
  margin-bottom: 0;
  border-top: 0.0625rem solid color-mix(in oklch, var(--local-color) 20%, transparent);
  font-size: var(--font-size-xs, 0.75rem);
  line-height: 1.4;
  color: color-mix(in oklch, var(--local-color) 55%, transparent);
  font-family: var(--font-mono, monospace);
}

.gs-card[data-intent="inverse"] .gs-card__meta,
.gs-card[data-intent="inverse"] .gs-card-meta,
.gs-card[data-intent="inverse"] .gs-text.gs-card-meta,
.gs-card[data-intent="inverse"] p.gs-card-meta {
  border-top-color: color-mix(in oklch, var(--ink, oklch(14% 0.015 245)) 15%, transparent);
  color: var(--ink-muted, oklch(44% 0.02 250));
}