/* ================================
   QVII — Initials / Letter Cells
   ================================ */

/* Global knobs (you can override per-container with classes below) */
:root {
  --initials-cell-w: 38px;   /* default width  */
  --initials-cell-h: 42px;   /* default height */
  --initials-gap: 2px;      /* gap between cells */
  --initials-font: 36px;     /* glyph font size */
  --initials-base: #dbcfb1;  /* cell fill */
  --initials-edge: #d6c7a3;  /* edge color for outset border */
  --initials-text: white;  /* glyph color */
}

/* Row that holds the letter cells
   - Support both id-only (#initials) and old combo (#initials.initials-bar)
   - If you keep using class "initials-bar" in layout, you're still covered */
#initials,
#initials.initials-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;                  /* wraps nicely on small screens */
  gap: var(--initials-gap);
  line-height: 0px;
  margin: 10px 0 6px;               /* Increased top margin from 4px to 10px to protect blurb area */
  max-width: 95%;                   /* constrain to stay within visible area */
  margin-left: auto;
  margin-right: auto;

  /* Auto-shrink when content is too wide using container queries fallback */
  container-type: inline-size;
}

/* Optional size presets (apply to the #initials div via className)
   Example: html.Div(id="initials", className="initials-lg") */
#initials.initials-sm { --initials-cell-w: 30px; --initials-cell-h: 42px; --initials-font: 22px; }
#initials.initials-md { --initials-cell-w: 40px; --initials-cell-h: 54px; --initials-font: 28px; } /* default */
#initials.initials-lg { --initials-cell-w: 50px; --initials-cell-h: 66px; --initials-font: 34px; }

/* Force every space token to create a new line */
.initials-gap {
  display: block;
  width: 100%;   /* pushes following letters to the next line */
  height: 4px; /* optional: keep vertical rhythm aligned with cells */
  content: "";   /* ensures it renders even with no glyph */
}

/* The per-letter backdrop cell */
.letter-cell {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  /* Use CSS variables for dynamic sizing - no hard minimums */
  width: var(--initials-cell-w);
  height: var(--initials-cell-h);

  background: var(--initials-base);     /* base color */
  border: 4px outset var(--initials-edge);
  border-radius: 10px;
  box-sizing: border-box;

  /* text */
  font-weight: 700;
  font-size: var(--initials-font);
  line-height: 1;
  color: var(--initials-text);
  padding: 0;                            /* pure box; glyph centered */
}

/* Punctuation cell is slightly narrower (still a box for alignment consistency) */
.letter-cell.letter-punct {
  width: calc(var(--initials-cell-w) * 0.66);
}

/* Inner span for the glyph; handy if you want transforms later */
.letter-glyph {
  display: inline-block;
  transform: translateY(1px);   /* subtle optical centering */
}

/* === Life-based colors for letter glyphs === */
/* All life-based styling is now in base-letter.css */
/* This file only contains layout and sizing for letter cells */

/* Future: highlight the active letter cell (toggle this class from your callback) */
.letter-cell.is-current {
  outline: 3px solid rgba(0,0,0,0.12);
  box-shadow: 0 0 0 3px rgba(214,199,163,0.35) inset;
}

/* Keep gap consistent on small screens */
@media (max-width: 380px) {
  :root {
    --initials-gap: 2px;
  }
}

/* Auto-shrink tiles for long names to prevent overflow */
/* These media queries check viewport width and adjust tile size accordingly */
@media (max-width: 600px) {
  :root {
    --initials-cell-w: 34px;
    --initials-cell-h: 38px;
    --initials-font: 32px;
  }
}

@media (max-width: 500px) {
  :root {
    --initials-cell-w: 30px;
    --initials-cell-h: 34px;
    --initials-font: 28px;
  }
}

@media (max-width: 400px) {
  :root {
    --initials-cell-w: 26px;
    --initials-cell-h: 30px;
    --initials-font: 24px;
  }
}

/* JavaScript-based dynamic scaling (add class via callback for very long names) */
#initials.auto-shrink-xs {
  --initials-cell-w: 22px;
  --initials-cell-h: 26px;
  --initials-font: 20px;
}

#initials.auto-shrink-xxs {
  --initials-cell-w: 18px;
  --initials-cell-h: 22px;
  --initials-font: 16px;
}

/* ==== Carved / Letterpress variables (DISABLED - was overriding life-based colors) ==== */
/*
:root {
  --carve-light: rgba(255,255,255,0.45);
  --carve-dark:  rgba(0,0,0,0.35);
  --carve-midL:  rgba(255,255,255,0.25);
  --carve-midD:  rgba(0,0,0,0.20);
  --carve-stroke: rgba(0,0,0,0.18);
}

.letter-glyph {
  transform: translateY(1px);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  -webkit-text-stroke: 0.5px var(--carve-stroke);
  text-shadow:
    -1px -1px 0 var(--carve-light),
     1px  1px 0 var(--carve-dark),
     0   -1px 0 var(--carve-midL),
     0    1px 0 var(--carve-midD);
}
*/

/* Optional: a stronger carve you can toggle with a class */
.letter-glyph.carved-strong {
  -webkit-text-stroke: 0.6px rgba(0,0,0,0.28);
  text-shadow:
    -1px -1px 0 rgba(255,255,255,0.55),
     1px  1px 0 rgba(0,0,0,0.45),
     0   -1px 0 rgba(255,255,255,0.35),
     0    1px 0 rgba(0,0,0,0.28),
    -2px -2px 1px rgba(255,255,255,0.12),
     2px  2px 1px rgba(0,0,0,0.12);
}

/* Animation keyframes are defined in base-letter.css */