/* ======================================================================
   Sharchog – Intro (Grid + Showcase)
   Clean refactor: variables, paint order, adaptive cells (no icon shrink),
   SVG link overlay, compact label (only 2px top spacing on reveal).
   ====================================================================== */

/* ---------- Theme & constants ---------- */
:root{
  /* Grid */
  --cell: 4.5rem;

  /* Theme (fallbacks — wire to base.css tokens if available) */
  --text: #222;
  --surface: #fff;
  --border: #d6d6d6;
  --purple-verylight: #ffffff;   /* super light "purple" (currently white) */

  /* Typography (small, readable) */
  --label-size: clamp(0.62rem, 0.90vw, 0.75rem);  /* text under icons */
  --coord-size: clamp(0.60rem, 0.85vw, 0.72rem);  /* 1x1, 1x2, ... */

  /* Layout */
  --headerHeight: 84px;

  /* Effects & motion */
  --radius: 8px;
  --elev-shadow: 0 8px 20px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06);
  --t-fast: .20s ease;
  --t-med:  .25s ease;
}

/* ======================================================================
   Section layout
   ====================================================================== */
.intro-row.dual-layout{
  padding: 4rem 2rem 3rem;
  min-height: calc(100vh - var(--headerHeight));
  display: flex;
  flex-direction: column;
  position: relative;
  color: var(--text);
}

.intro-columns{
  display: flex;
  width: 100%;
  gap: 2rem;
  flex: 1;
  min-height: 0; /* allow children to stretch */
}

/* Left = 65% (grid), Right = 35% (showcase) */
.grid-zone{
  flex: 0 0 65%;
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 0;
}
.showcase-zone{
  flex: 1;
  min-height: 0;
  background: transparent;
}

/* Optional placeholder for Showcase (remove anytime) */
.showcase-zone::before{
  content: "Showcase";
  display: block;
  text-align: center;
  padding-top: 1.25rem;
  font-size: .9rem;
  color: var(--text);
  opacity: .4;
}

/* ======================================================================
   Grid (coordinates layer)
   ====================================================================== */
.cell-grid{
  display: grid;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 0; /* see Paint order */
}
.cell-grid .coord{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: .25rem;
  font-size: var(--coord-size);
  line-height: 1;
  color: var(--text);
  opacity: .45;
  user-select: none;
  /* outline: 1px dashed rgba(0,0,0,.12);  // debug */
}

/* ======================================================================
   Paint order (z-indexes)
   - coords (grid text)     : z=0
   - SVG link overlay (line): z=1
   - adaptive cells (items) : z=2
   Flip z-index values here if you want the line above the items.
   ====================================================================== */
.link-overlay{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;           /* line UNDER items by default */
  pointer-events: none; /* don't block interactions */
}
.fixed-layer{
  position: absolute;
  inset: 0;
  display: grid;        /* tracks synced via JS */
  z-index: 2;           /* items ABOVE line */
  pointer-events: none;
}
.fixed-layer .adaptive-cell{ pointer-events: auto; } /* make cards clickable */

/* Line style (SVG path) */
.link-overlay .flow-line{
  stroke: url(#flowGrad);
  stroke-width: 2;
  stroke-linecap: round;
}

/* ======================================================================
   Adaptive cell (reusable)
   - Base: outlined, transparent bg, radius
   - Hover: bg change, shadow, border off, slight lift
   - Icon: stroke→fill swap (NO scaling)
   - Label: reveal on hover / when .is-active, only 2px top spacing
   ====================================================================== */
.adaptive-cell{
  border: 1px solid rgba(0,0,0,.15);
  border-radius: var(--radius);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6%;
  box-sizing: border-box;

  /* IMPORTANT: no gap so there’s no space between icon & label */
  gap: 0;

  transition:
    background-color var(--t-med),
    box-shadow var(--t-med),
    border-color var(--t-fast),
    transform var(--t-fast);
}

/* Icon container & swap (no hover scaling) */
.adaptive-cell .icon-wrap{
  position: relative;
  width: 90%;
  height: 70%;                  /* reserves room for label */
  display: block;               /* ensure tight box */
}
.adaptive-cell .icon{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity .18s ease;
}
.adaptive-cell .icon.stroke{ opacity: 1; }
.adaptive-cell .icon.fill  { opacity: 0; }

/* Label (hidden by default, shown on hover or .is-active)
   No padding except 2px top padding when visible */
.adaptive-cell .adaptive-label{
  font-size: var(--label-size);
  margin: 0;                     /* remove any default margins */
  padding: 0;                    /* no padding by default */
  line-height: 1;

  opacity: 0;
  transform: translateY(4px) scaleY(0.98);
  transform-origin: top;
  max-height: 0;                 /* prevent layout jump */
  overflow: hidden;
  pointer-events: none;

  transition:
    opacity var(--t-fast),
    transform var(--t-fast),
    max-height var(--t-fast);
  will-change: opacity, transform, max-height;
}
.adaptive-cell:hover .adaptive-label,
.adaptive-cell.is-active .adaptive-label{
  opacity: 1;
  transform: translateY(0) scaleY(1);
  max-height: 2rem;              /* enough for a single line */
  pointer-events: auto;
  padding-top: 2px;              /* ONLY 2px top padding when visible */
}

/* Hover visuals + icon swap (no icon scaling) */
.adaptive-cell.hover-purple:hover{
  background: var(--purple-verylight);
  border-color: transparent;
  box-shadow: var(--elev-shadow);
  transform: translateY(-2px);
}
.adaptive-cell.hover-purple:hover .icon.stroke{ opacity: 0; }
.adaptive-cell.hover-purple:hover .icon.fill  { opacity: 1; }

/* ======================================================================
   Divider (center diamond)
   ====================================================================== */
.section-divider{
  position: relative;
  height: 0;
  border-top: 1px solid var(--border);
  margin: 3rem auto 0;
  width: 100%;
  flex-shrink: 0;
}
.diamond-box{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px; height: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ======================================================================
   Responsive
   ====================================================================== */
@media (max-width: 768px){
  .intro-columns{ flex-direction: column; }
  .grid-zone, .showcase-zone{ flex: 1 1 auto; }
  .cell-grid{ min-height: var(--cell); }
}