/* ==========================================================================
   KoruMatrix — Comprehensive Responsive Stylesheet
   Covers: Desktop ≥1024px | Tablet 768–1023px | Mobile ≤767px | Small ≤480px
   DO NOT: override animation-16z1uo4, animation-1sld7a4, animation-yjfgth
   DO NOT: break [data-animate] / .km-visible scroll-fade-in system
   ========================================================================== */

/* --------------------------------------------------------------------------
   KEYFRAMES — Staggered mobile card entrance (fade-in-up)
   Used only when cards collapse to single-column on mobile.
   -------------------------------------------------------------------------- */
@keyframes km-card-fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   GLOBAL — Prevent horizontal overflow at every breakpoint
   -------------------------------------------------------------------------- */
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* --------------------------------------------------------------------------
   SCROLL-TRIGGERED CARD ANIMATIONS — All breakpoints
   Cards start invisible; .km-grid-visible (added by gridObserver) triggers
   the staggered fade-in-up. Unified system replaces the old mobile-only
   km-card-fade-up keyframe animation.
   -------------------------------------------------------------------------- */

/* Default hidden state — all cards start invisible */
.css-1xexl9k,
.css-cpw5g3,
.css-16fgfqz {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reveal when grid container enters viewport */
.km-grid-visible .css-1xexl9k,
.km-grid-visible .css-cpw5g3,
.km-grid-visible .css-16fgfqz {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger by direct nth-child (flat grid structure) */
.km-grid-visible .css-1xexl9k:nth-child(1),
.km-grid-visible .css-cpw5g3:nth-child(1),
.km-grid-visible .css-16fgfqz:nth-child(1) { transition-delay: 0.00s; }

.km-grid-visible .css-1xexl9k:nth-child(2),
.km-grid-visible .css-cpw5g3:nth-child(2),
.km-grid-visible .css-16fgfqz:nth-child(2) { transition-delay: 0.12s; }

.km-grid-visible .css-1xexl9k:nth-child(3),
.km-grid-visible .css-cpw5g3:nth-child(3),
.km-grid-visible .css-16fgfqz:nth-child(3) { transition-delay: 0.24s; }

.km-grid-visible .css-1xexl9k:nth-child(4),
.km-grid-visible .css-cpw5g3:nth-child(4),
.km-grid-visible .css-16fgfqz:nth-child(4) { transition-delay: 0.36s; }

.km-grid-visible .css-1xexl9k:nth-child(5),
.km-grid-visible .css-cpw5g3:nth-child(5),
.km-grid-visible .css-16fgfqz:nth-child(5) { transition-delay: 0.48s; }

.km-grid-visible .css-1xexl9k:nth-child(6),
.km-grid-visible .css-cpw5g3:nth-child(6),
.km-grid-visible .css-16fgfqz:nth-child(6) { transition-delay: 0.60s; }

/* Stagger via smartLayoutCell wrappers (nested structure) */
.km-grid-visible .node-smartLayoutCell:nth-child(1) .css-1xexl9k,
.km-grid-visible .node-smartLayoutCell:nth-child(1) .css-cpw5g3,
.km-grid-visible .node-smartLayoutCell:nth-child(1) .css-16fgfqz { transition-delay: 0.00s; }

.km-grid-visible .node-smartLayoutCell:nth-child(2) .css-1xexl9k,
.km-grid-visible .node-smartLayoutCell:nth-child(2) .css-cpw5g3,
.km-grid-visible .node-smartLayoutCell:nth-child(2) .css-16fgfqz { transition-delay: 0.12s; }

.km-grid-visible .node-smartLayoutCell:nth-child(3) .css-1xexl9k,
.km-grid-visible .node-smartLayoutCell:nth-child(3) .css-cpw5g3,
.km-grid-visible .node-smartLayoutCell:nth-child(3) .css-16fgfqz { transition-delay: 0.24s; }

.km-grid-visible .node-smartLayoutCell:nth-child(4) .css-1xexl9k,
.km-grid-visible .node-smartLayoutCell:nth-child(4) .css-cpw5g3,
.km-grid-visible .node-smartLayoutCell:nth-child(4) .css-16fgfqz { transition-delay: 0.36s; }

.km-grid-visible .node-smartLayoutCell:nth-child(5) .css-1xexl9k,
.km-grid-visible .node-smartLayoutCell:nth-child(5) .css-cpw5g3,
.km-grid-visible .node-smartLayoutCell:nth-child(5) .css-16fgfqz { transition-delay: 0.48s; }

.km-grid-visible .node-smartLayoutCell:nth-child(6) .css-1xexl9k,
.km-grid-visible .node-smartLayoutCell:nth-child(6) .css-cpw5g3,
.km-grid-visible .node-smartLayoutCell:nth-child(6) .css-16fgfqz { transition-delay: 0.60s; }

/* --------------------------------------------------------------------------
   DESKTOP (≥1024px) — Hover effects on interactive card cells
   Subtle lift + shadow increase; respects existing animation keyframes.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

  /* Card grid items: hover lift — only when visible to avoid hover on hidden cards */
  .km-grid-visible .css-1xexl9k,
  .km-grid-visible .css-cpw5g3,
  .km-grid-visible .css-16fgfqz {
    /* transition already set globally; extend for box-shadow */
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
  }

  .km-grid-visible .css-1xexl9k:hover,
  .km-grid-visible .css-cpw5g3:hover,
  .km-grid-visible .css-16fgfqz:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  /* Clickable themed boxes already have hover via Chakra; reinforce smooth transition */
  .themed-clickable-box {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  /* Grid containers: ensure overflow visible so lift doesn't clip */
  .css-7o6zho,
  .css-1azkfln,
  .css-3ucpgn {
    overflow: visible !important;
  }
}

/* --------------------------------------------------------------------------
   TABLET (768px–1023px)
   3-col → 2-col | 2-col stays 2-col with more breathing room
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {

  /* 3-column grids → 2 columns */
  .css-7o6zho,
  .css-1azkfln {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    overflow: visible !important;
  }

  /* Force 3-col items to span 6 (half of 12 = 2 per row) */
  .css-7o6zho > * > [data-node-view-content-inner="smartLayout"] > *,
  .css-1azkfln > * > [data-node-view-content-inner="smartLayout"] > * {
    grid-column: span 6 !important;
  }

  .css-7o6zho .css-1xexl9k,
  .css-7o6zho .css-cpw5g3,
  .css-7o6zho .css-16fgfqz,
  .css-1azkfln .css-1xexl9k,
  .css-1azkfln .css-cpw5g3,
  .css-1azkfln .css-16fgfqz {
    grid-column: span 6 !important;
  }

  /* 2-col grids: stay 2-col, just more padding */
  .css-3ucpgn {
    overflow: visible !important;
    padding: 0 0.5em;
  }

  /* Card text: comfortable reading on tablet */
  .card-content .block-heading .heading[level="1"] {
    font-size: 1.75em;
  }

  /* Transition on grid items for hover — only when visible */
  .km-grid-visible .css-1xexl9k,
  .km-grid-visible .css-cpw5g3,
  .km-grid-visible .css-16fgfqz {
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
  }
}

/* --------------------------------------------------------------------------
   MOBILE (≤767px)
   ALL grids → single column | staggered fade-in-up | no horizontal scroll
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

  /* ── Prevent any horizontal scroll ── */
  html, body {
    overflow-x: hidden !important;
  }

  * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ── 3-column grid containers: collapse to 1-col ── */
  .css-7o6zho,
  .css-1azkfln {
    grid-template-columns: 1fr !important;
    overflow: visible !important;
    gap: 1em !important;
  }

  /* ── 2-column grid containers: collapse to 1-col ── */
  .css-3ucpgn {
    grid-template-columns: 1fr !important;
    overflow: visible !important;
    gap: 1em !important;
  }

  /* ── Grid items: full-width single column ── */
  .css-1xexl9k,
  .css-cpw5g3,
  .css-16fgfqz {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    /* Hover disabled on mobile; no box-shadow override needed */
    box-shadow: none !important;
    /* Global opacity/transform transition system handles reveal — no animation override */
  }

  /* Scroll-trigger stagger delays already defined globally above.
     On mobile the cards start opacity:0 / translateY(20px) and reveal
     when .km-grid-visible is added by the IntersectionObserver.
     NO km-card-fade-up keyframe used on mobile — unified system only. */

  /* ── Text: prevent word-break on full-width cards ── */
  .card-content *,
  .styled-grid-cell *,
  [data-node-view-content-inner="smartLayoutCell"] * {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
  }

  /* ── Gap & padding smoothing ── */
  .themed-shape-outside-text.css-7o6zho,
  .themed-shape-outside-text.css-1azkfln,
  .themed-shape-outside-text.css-3ucpgn {
    overflow: visible !important;
    padding: 0;
  }

  /* Card inner padding: reduce on mobile */
  .card-wrapper {
    --card-inner-padding-x: 1.5em !important;
    --card-inner-padding-y: 2.5em !important;
  }

  /* ── Preserve [data-animate] / km-visible scroll-fade-in ──
     Do NOT change opacity/transform here — those are owned by the
     IntersectionObserver. Only ensure the animation doesn't compete. */
  [data-animate]:not(.km-visible) {
    /* Already handles opacity:0 / translateY(20px) via inline <style> */
  }

  /* Images in grid: maintain aspect ratio, don't overflow */
  .css-1raaanm {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   MOBILE SMALL (≤480px)
   Font scaling | reduced padding | thumb-friendly card padding
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {

  /* ── Heading font scaling ── */
  .heading[level="1"],
  .title[level="1"] {
    font-size: clamp(1.6em, 6vw, 2.25em) !important;
  }

  .heading[level="2"] {
    font-size: clamp(1.3em, 5vw, 1.75em) !important;
  }

  .heading[level="3"] {
    font-size: clamp(1.1em, 4.5vw, 1.4em) !important;
  }

  .heading[level="4"] {
    font-size: clamp(1em, 4vw, 1.15em) !important;
  }

  /* ── Card inner padding: thumb-comfortable ── */
  .card-wrapper {
    --card-inner-padding-x: 1.1em !important;
    --card-inner-padding-y: 1.75em !important;
  }

  /* ── Section padding reduced ── */
  .card-content {
    padding-left: 0.25em;
    padding-right: 0.25em;
  }

  /* ── Grid items: keep border-radius, comfortable padding ── */
  .css-1xexl9k,
  .css-cpw5g3,
  .css-16fgfqz {
    border-radius: var(--box-border-radius);
  }

  .styled-grid-cell {
    padding: 0.85em !important;
  }

  /* ── Keep stagger on small screens (inherits ≤767px rules) ── */

  /* ── No horizontal scroll hard guarantee ── */
  html, body {
    overflow-x: hidden !important;
  }

  /* ── Label group: wrap gracefully ── */
  .css-1gphu8y {
    flex-wrap: wrap !important;
    gap: 0.4em !important;
  }
}