/* ITEPL business card — "stack" layout (KB Jain v2).
   Loaded AFTER card.css; reuses the ground, gunmetal band, identity, chooser
   sheet, toast and buttons, and replaces the action area with a hierarchy of
   tiers. UX: proximity (tight within a tier, more space between tiers), size +
   weight for hierarchy (Call/Toll-Free primary → socials tertiary), Fitts (big
   bottom CTA + large primary actions), serial-position (call first, save last). */

/* root: band (top) · main (fills) · cta (pinned bottom) */
.bizcard.stack { justify-content: flex-start; gap: 0; }

.stack__main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(12px, 2vh, 24px) clamp(16px, 6vw, 30px) clamp(6px, 1.2vh, 12px);
}

/* Top strip: the logo has moved into the medallion, so centre the heritage
   eyebrow as a balanced masthead (the copper rule under the band stays). */
.stack .bizcard__band { justify-content: center; padding-block: clamp(13px, 2.8vh, 20px); }
.stack .bizcard__company {
  color: var(--ite-gray-200);
  text-transform: none;                    /* keep the tagline's mixed casing */
  letter-spacing: normal;
  font-size: clamp(var(--ite-text-3xs), 2.7vw, var(--ite-text-xs));
}

/* compact identity, kept tight as ONE group so name/role/phone read together
   (law of proximity) instead of drifting apart on tall viewports. */
.stack__identity { flex: 0 0 auto; }
.stack .bizcard__identity { gap: clamp(2px, 0.5vh, 6px); }
.stack .bizcard__name { margin-top: clamp(2px, 0.6vh, 6px); }
.stack .bizcard__phone { margin-top: clamp(3px, 0.7vh, 7px); }

/* Identity medallion: the OFFICIAL logo on a clean white tile inside the copper
   frame (the frame from the photo version stays). Clear space is a PERCENTAGE of
   the tile, so the logo never collides with the frame at any size, and the tile
   sits fully below the band (no overlap) so it can't clash with the eyebrow. */
.stack .bizcard__media {
  width: clamp(92px, 12.5vh, 116px);
  height: clamp(92px, 12.5vh, 116px);
  margin-top: clamp(8px, 1.6vh, 14px);
}
.bizcard__media--mark { background: var(--copper-base); padding: 2px; }
.bizcard__marktile {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 7%;                             /* logo reaches near the frame; clear space scales with the tile */
  border-radius: calc(var(--ite-radius-2xl) - 2px);
  corner-shape: var(--ite-corner);
  background: var(--ite-gray-50);          /* solid white — no copper bleed onto the logo */
}
.bizcard__mark {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.stack .bizcard__name { font-size: clamp(var(--ite-text-xl), 1rem + 2.2vh, var(--ite-text-3xl)); }

/* Actions group — company name + buttons, kept together as ONE unit and centred
   in the space below the identity (proximity: the name labels its buttons). The
   buttons stay where they were; the name is NOT floated between phone and tiers. */
.stack__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(16px, 3.6vh, 30px);          /* company name -> buttons: the increased bottom padding */
}

/* Company name: large brand-orange display that spans the button width, sitting
   directly above its buttons. Kept inside the centred group so the identity
   above and the buttons below stay put when it grows. */
.stack__org {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
  font-family: var(--ite-font-sans);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: var(--ite-tracking-tight);
  font-size: clamp(var(--ite-text-xl), 7.2vw, var(--ite-text-3xl));
  color: var(--ite-color-text);           /* ink */
}
.stack__tiers {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.8vh, 24px);          /* BETWEEN tiers (group separation) */
}
.stack__tier { display: grid; gap: clamp(8px, 1.4vh, 12px); }   /* WITHIN a tier */
.stack__tier1 { grid-template-columns: 1fr 1fr; }
.stack__tier2 { grid-template-columns: repeat(4, 1fr); }
.stack__tier3 { grid-template-columns: repeat(4, 1fr); justify-items: center; }
/* director: six square tiles, three per row — pulled into a centred block where
   the tiles fill their columns, so horizontal and vertical spacing are even and
   the six read as one group (law of proximity). */
.stack__grid3 {
  grid-template-columns: repeat(3, 1fr);
  width: min(100%, 15rem);                /* widened so 2x column gaps don't shrink the tiles */
  margin-inline: auto;
  row-gap: clamp(11px, 2.4vh, 16px);
  column-gap: clamp(22px, 4.8vh, 32px);   /* 2x the row gap: more air left-right */
}

/* ---- Tier 1: Call + Toll-Free — wide, icon + text inside (primary) ---- */
.t1btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: clamp(52px, 7.2vh, 66px);
  padding: 0 16px;
  border-radius: var(--ite-radius-xl);
  corner-shape: var(--ite-corner);
  background: var(--ite-color-text);          /* ink — never navy */
  color: var(--ite-gray-50);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--ite-text-base);
  box-shadow: var(--ite-shadow-sm);
  overflow: hidden;
  transition: transform var(--ite-dur-fast) var(--ite-ease-standard),
              box-shadow var(--ite-dur-fast) var(--ite-ease-standard);
}
.t1btn::after {            /* copper keyline */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--copper-base); opacity: 0;
  transition: opacity var(--ite-dur-fast) var(--ite-ease-standard);
}
.t1btn__ic { display: inline-flex; width: clamp(20px, 3vh, 24px); height: clamp(20px, 3vh, 24px); flex: none; }
.t1btn__ic svg { width: 100%; height: 100%; display: block; }
/* the generic mail glyph has more interior padding than the WhatsApp mark — scale
   it up so the two tier-1 icons read at the same optical size. */
.t1btn__ic--mail svg { transform: scale(1.18); transform-origin: center; }
.t1btn:hover { transform: translateY(-2px); box-shadow: var(--ite-shadow-md); }
.t1btn:hover::after { opacity: 1; }
.t1btn:focus-visible { outline: var(--ite-focus-ring); outline-offset: 2px; }
.t1btn:focus-visible::after { opacity: 1; }
.t1btn:active { transform: translateY(0) scale(0.99); }

/* ---- Tier 2: WhatsApp / Email / Website / Map — icon tile + label below ---- */
.t2btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(5px, 0.9vh, 8px);
  text-decoration: none;
  color: var(--ite-color-text-muted);
  transition: color var(--ite-dur-fast) var(--ite-ease-standard);
}
.t2btn__tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: clamp(46px, 7vh, 58px);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  border-radius: var(--ite-radius-lg);
  corner-shape: var(--ite-corner);
  background: var(--ite-color-text);
  color: var(--ite-gray-50);
  box-shadow: var(--ite-shadow-xs);
  overflow: hidden;
  transition: transform var(--ite-dur-fast) var(--ite-ease-standard),
              box-shadow var(--ite-dur-fast) var(--ite-ease-standard),
              color var(--ite-dur-fast) var(--ite-ease-standard);
}
.t2btn__tile::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--copper-base); opacity: 0;
  transition: opacity var(--ite-dur-fast) var(--ite-ease-standard);
}
.t2btn__ic { width: clamp(19px, 2.9vh, 23px); height: clamp(19px, 2.9vh, 23px); }
.t2btn__ic svg { width: 100%; height: 100%; display: block; }
.t2btn__lb {
  font-family: var(--ite-font-sans);
  font-weight: 500;
  font-size: clamp(var(--ite-text-2xs), 0.55rem + 0.3vh, var(--ite-text-xs));
  line-height: 1.1;
  text-align: center;
}
.t2btn:hover { color: var(--ite-text-orange); }
.t2btn:hover .t2btn__tile { transform: translateY(-2px); color: var(--ite-orange-300); box-shadow: var(--ite-shadow-md); }
.t2btn:hover .t2btn__tile::after { opacity: 1; }
.t2btn:focus-visible { outline: none; }
.t2btn:focus-visible .t2btn__tile { outline: var(--ite-focus-ring); outline-offset: 2px; }
.t2btn:focus-visible .t2btn__tile::after { opacity: 1; }
.t2btn:active .t2btn__tile { transform: scale(0.96); }

/* ---- Tier 3: socials — round ghost, icon only (tertiary, de-emphasised) ---- */
.t3btn {
  display: grid;
  place-items: center;
  width: clamp(44px, 6.4vh, 52px);
  height: clamp(44px, 6.4vh, 52px);
  border-radius: var(--ite-radius-pill);       /* circles stay round per brand */
  background: var(--ite-color-bg);
  color: var(--ite-color-text);
  box-shadow: inset 0 0 0 1px var(--ite-color-border);
  text-decoration: none;
  transition: transform var(--ite-dur-fast) var(--ite-ease-standard),
              color var(--ite-dur-fast) var(--ite-ease-standard),
              box-shadow var(--ite-dur-fast) var(--ite-ease-standard);
}
.t3btn__ic { display: grid; place-items: center; width: clamp(18px, 2.7vh, 21px); height: clamp(18px, 2.7vh, 21px); }
.t3btn__ic svg { width: 100%; height: 100%; display: block; }
.t3btn:hover { transform: translateY(-2px); color: var(--ite-text-orange); box-shadow: inset 0 0 0 1px var(--ite-text-orange), var(--ite-shadow-sm); }
.t3btn:focus-visible { outline: var(--ite-focus-ring); outline-offset: 2px; }
.t3btn:active { transform: translateY(0) scale(0.95); }

/* ---- bottom CTA (Fitts: large, reachable) ---- */
.stack__cta {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1.4vh, 12px);
  padding: clamp(10px, 1.8vh, 16px) clamp(16px, 6vw, 30px) clamp(14px, 2.6vh, 22px);
}
.stack__cta .btn { width: 100%; justify-content: center; white-space: nowrap; }

/* desktop/tablet (tall enough): centre a phone-width column on the textured
   ground. card.css makes .bizcard full-bleed for its own two-column layout, so
   the stack opts back into a framed column here. Gated on min-height so short
   landscape phones stay full-bleed and never clip. */
@media (min-width: 600px) and (min-height: 600px) {
  body.cardpage { display: grid; place-items: center; padding: clamp(20px, 5vh, 56px); }
  .bizcard.stack {
    width: min(440px, 100%);
    height: auto;
    max-height: calc(100svh - clamp(22px, 5vh, 68px));
    border-radius: var(--ite-radius-2xl);
    corner-shape: var(--ite-corner);
    box-shadow: 0 0 0 1px var(--ite-color-border), var(--ite-shadow-xl);
    overflow: hidden;
  }
  .stack__main { flex: 0 0 auto; }
  /* match the top gap (identity -> name) to the bottom gap (name -> buttons) so
     the company name has equal space above and below on the framed column. */
  .stack__body { flex: 0 0 auto; margin-top: clamp(12px, 2.8vh, 26px); gap: clamp(12px, 2.8vh, 26px); }
  /* director's two-row grid: tighter rows so it fits the short framed column;
     columns stay 2x the row gap for the extra left-right air */
  .stack__grid3 { row-gap: clamp(8px, 1.6vh, 14px); column-gap: clamp(16px, 3.2vh, 28px); }
}

/* desktop: keep the centred-column identity centred (card.css left-aligns it
   for the two-column layout, which the stack doesn't use) */
@media (min-width: 720px) {
  .stack .bizcard__identity {
    align-items: center;
    text-align: center;
    padding-right: 0;
    border-right: 0;
  }
}

/* short / landscape: compress so the whole stack still fits with no scroll */
@media (max-height: 640px) {
  .stack .bizcard__band { padding-block: clamp(8px, 2vh, 13px); }
  .stack__tiers { gap: clamp(8px, 2vh, 14px); }
  .stack__body { gap: clamp(8px, 1.8vh, 14px); }
  .stack__org { font-size: clamp(var(--ite-text-base), 3.6vh, var(--ite-text-xl)); }
  .stack .bizcard__media { width: clamp(72px, 14vh, 92px); height: clamp(72px, 14vh, 92px); margin-top: clamp(5px, 1vh, 9px); }
  .t1btn { min-height: clamp(42px, 8vh, 52px); }
  .stack__main { padding-top: clamp(8px, 1.6vh, 16px); }
}

/* short landscape (a phone turned sideways): two columns — identity left,
   actions right — so the whole card fits a ~360px-tall viewport with no clip. */
@media (orientation: landscape) and (max-height: 560px) and (min-width: 560px) {
  .stack__main {
    flex-direction: row;
    align-items: center;
    gap: clamp(20px, 4vw, 52px);
    padding: clamp(8px, 2.5vh, 18px) clamp(24px, 6vw, 60px);
  }
  .stack__identity { flex: 0 1 38%; max-width: 320px; }
  .stack__body { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .t1btn, .t1btn::after, .t2btn, .t2btn__tile, .t2btn__tile::after, .t3btn { transition: none; }
}