/* ITEPL digital business card — "Alloy Spec-Sheet" direction.
   60% light alloy ground · 30% ink (gunmetal band + filled chips) · 10% orange/copper.
   Layout & composition only; brand values come from itepl-kit tokens. Motion on
   transform/opacity. */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

/* ---------------------------------------------------------------- the ground */
body.cardpage {
  min-height: 100svh;
  overflow: hidden;
  font-family: var(--ite-font-sans);
  color: var(--ite-color-text);
  /* light alloy + a real blueprint grid (48px major / 12px minor) so the
     ground reads as engineered drafting paper, not a plain white box. */
  background-color: var(--ite-color-bg-subtle);
  /* neutral drafting lines (ink at low alpha) — a 48px major / 12px minor grid */
  background-image:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(19, 20, 24, 0.02) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(19, 20, 24, 0.02) 47px 48px),
    repeating-linear-gradient(0deg, transparent 0 11px, rgba(19, 20, 24, 0.01) 11px 12px),
    repeating-linear-gradient(90deg, transparent 0 11px, rgba(19, 20, 24, 0.01) 11px 12px);
}
@supports (height: 100dvh) { body.cardpage { min-height: 100dvh; } }

/* full-bleed card shell */
.bizcard {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100svh;
  overflow: hidden;
}
@supports (height: 100dvh) { .bizcard { height: 100dvh; } }

/* --------------------------------------------------------------- header band */
.bizcard__band {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(12px, 2.4vh, 20px) clamp(18px, 5vw, 40px);
  color: var(--ite-gray-50);
  border-bottom: 2px solid transparent;
  border-image: var(--copper-base) 1;     /* copper hairline under the band */
  z-index: 0;
}
.bizcard__logo { height: clamp(46px, 7vh, 70px); width: auto; display: block; }
.bizcard__company {
  font-size: var(--ite-text-xs);
  letter-spacing: var(--ite-tracking-wide);
  text-transform: uppercase;
  color: var(--ite-gray-300);
  white-space: nowrap;
}

/* footer bookend — balances the top band, uses desktop vertical space */
.bizcard__foot {
  flex: 0 0 auto;
  display: none;                 /* mobile: hidden to protect the no-scroll fit */
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(10px, 1.8vh, 16px) clamp(18px, 5vw, 40px);
  font-size: var(--ite-text-xs);
  letter-spacing: var(--ite-tracking-wide);
  text-transform: uppercase;
  color: var(--ite-color-text-subtle);
  background: var(--ite-color-bg);
  border-top: 2px solid transparent;
  border-image: var(--copper-base) 1;
}
.bizcard__footweb { color: var(--ite-text-orange); font-weight: 600; }
@media (min-width: 720px) { .bizcard__foot { display: flex; } }

/* ---------------------------------------------------------------- card body */
.bizcard__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vh, 30px);
  padding: clamp(18px, 3vh, 36px) clamp(18px, 5vw, 40px) clamp(20px, 3.4vh, 40px);
}

/* identity */
.bizcard__identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(6px, 1.2vh, 12px);
  flex: 0 0 auto;
}
.bizcard__media {
  width: clamp(92px, 15vh, 132px);
  height: clamp(92px, 15vh, 132px);
  padding: 3px;
  margin-top: clamp(-46px, -7vh, -34px);   /* lift up to overlap the band */
  background: var(--copper-base);           /* copper frame */
  border-radius: var(--ite-radius-2xl);
  corner-shape: var(--ite-corner);
  box-shadow: var(--ite-shadow-lg);
  position: relative;
  z-index: 1;
}
.bizcard__photo, .bizcard__mono {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--ite-radius-2xl) - 3px);
  corner-shape: var(--ite-corner);
  display: block;
}
.bizcard__photo { object-fit: cover; }
.bizcard__mono {
  display: grid;
  place-items: center;
  background: var(--gun-sheen), var(--gun-brush), var(--gun-base);
  color: var(--ite-gray-50);
  font-family: var(--ite-font-display);
  font-weight: 700;
  letter-spacing: var(--ite-tracking-tight);
  font-size: clamp(var(--ite-text-2xl), 5vh, var(--ite-text-4xl));
}
.bizcard__name {
  margin: 4px 0 0;
  font-family: var(--ite-font-display);
  font-weight: 700;
  letter-spacing: var(--ite-tracking-display);
  line-height: var(--ite-leading-tight);
  font-size: clamp(var(--ite-text-2xl), 1rem + 3vh, var(--ite-text-4xl));
  color: var(--ite-color-text);
}
.bizcard__role {
  margin: 0;
  font-size: var(--ite-text-base);
  font-weight: 500;
  color: var(--ite-color-text-muted);
}
.bizcard__org {
  margin: 2px 0 0;
  max-width: 34ch;
  font-size: var(--ite-text-sm);
  font-weight: 600;
  line-height: var(--ite-leading-snug);
  color: var(--ite-color-text);
}
.bizcard__phone { margin: clamp(4px, 0.8vh, 10px) 0 0; }
.bizcard__phonelink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--ite-radius-pill);
  font-size: var(--ite-text-base);
  font-weight: 500;
  color: var(--ite-color-text);
  text-decoration: none;
  background: var(--ite-color-bg);
  box-shadow: inset 0 0 0 1px var(--ite-color-border);
  transition: color var(--ite-dur-fast) var(--ite-ease-standard);
}
.bizcard__phonelink:hover { color: var(--ite-text-orange); }
.bizcard__phoneic { display: inline-flex; width: 16px; height: 16px; color: var(--ite-text-orange); }
.bizcard__phoneic svg { width: 100%; height: 100%; display: block; }

/* actions */
.bizcard__actions {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vh, 18px);
  width: 100%;
  max-width: 420px;
  flex: 0 0 auto;
}

.bizcard__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(8px, 1.4vh, 12px);
}
@media (max-width: 360px) { .bizcard__grid { grid-template-columns: repeat(4, 1fr); } }

.vchip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1vh, 9px);
  text-decoration: none;
  color: var(--ite-color-text-muted);          /* label colour on the light ground */
  transition: color var(--ite-dur-fast) var(--ite-ease-standard);
}
.vchip__tile {                                 /* icon-only ink square */
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: clamp(50px, 8vh, 62px);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  border-radius: var(--ite-radius-lg);
  corner-shape: var(--ite-corner);
  background: var(--ite-color-text);           /* ink — never navy */
  color: var(--ite-gray-50);                   /* icon colour */
  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);
}
.vchip__tile::after {            /* copper keyline, revealed on hover/focus */
  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);
}
.vchip__ic { width: clamp(20px, 3.2vh, 24px); height: clamp(20px, 3.2vh, 24px); }
.vchip__ic svg { width: 100%; height: 100%; display: block; }
/* optical balance: brand marks fill their 24-box, so scale them down to match
   the interior padding of the generic filled glyphs */
.vchip__ic--whatsapp svg,
.vchip__ic--linkedin svg,
.vchip__ic--facebook svg,
.vchip__ic--instagram svg { transform: scale(0.86); }
.vchip__ic--x svg { transform: scale(0.8); }
.vchip__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));
  letter-spacing: var(--ite-tracking-normal);
  line-height: 1.1;
  text-align: center;
}
.vchip:hover { color: var(--ite-text-orange); }
.vchip:hover .vchip__tile { transform: translateY(-2px); color: var(--ite-orange-300); box-shadow: var(--ite-shadow-md); }
.vchip:hover .vchip__tile::after { opacity: 1; }
.vchip:focus-visible { outline: none; }
.vchip:focus-visible .vchip__tile { outline: var(--ite-focus-ring); outline-offset: 2px; }
.vchip:focus-visible .vchip__tile::after { opacity: 1; }
.vchip:active .vchip__tile { transform: translateY(0) scale(0.96); }

/* CTAs */
.bizcard__cta { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.4vh, 14px); }
.bizcard__cta .btn {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
  padding-inline: clamp(10px, 2vw, 18px);
  font-size: var(--ite-text-sm);
}
.btn__ic { display: inline-flex; width: 17px; height: 17px; flex: none; }
.btn__ic svg { width: 100%; height: 100%; display: block; }
/* Share = solid secondary (ink), pairs with the orange Save */
.bizcard__share {
  background: var(--ite-color-text);
  color: var(--ite-gray-50);
  border-color: transparent;
}
.bizcard__share:hover { background: var(--ite-gray-800); }
.bizcard__share:active { background: var(--ite-gray-900); }

/* ----------------------------------------------- desktop / wide: two columns */
@media (min-width: 720px) {
  .bizcard__body {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(28px, 5vw, 72px);
    padding-inline: clamp(36px, 7vw, 120px);
  }
  .bizcard__identity {
    align-items: flex-start;
    text-align: left;
    gap: clamp(8px, 1.6vh, 16px);
    padding-right: clamp(20px, 3vw, 44px);
    border-right: 2px solid transparent;
    border-image: var(--copper-base) 1;       /* copper divider between panes */
  }
  .bizcard__media { margin-top: 0; width: clamp(140px, 22vh, 200px); height: clamp(140px, 22vh, 200px); }
  .bizcard__name { font-size: clamp(var(--ite-text-4xl), 1rem + 3vw, var(--ite-text-6xl)); }
  .bizcard__role { font-size: var(--ite-text-lg); }
  .bizcard__actions { max-width: 560px; margin: 0 auto; width: 100%; }
  .bizcard__grid { gap: clamp(10px, 1.2vw, 16px); }
  .bizcard__org { font-size: var(--ite-text-base); }
  .vchip__tile { max-width: clamp(58px, 6vw, 76px); }
  .vchip__ic { width: clamp(22px, 2.2vw, 28px); height: clamp(22px, 2.2vw, 28px); }
}

/* very wide: keep the action column from over-stretching */
@media (min-width: 1200px) {
  .bizcard__body { padding-inline: clamp(80px, 10vw, 220px); }
  .bizcard__actions { max-width: 640px; }
}

/* short viewports (landscape phones): compact + drop the footer so the two-pane
   layout fits the limited height without clipping. Overrides the desktop sizes. */
@media (max-height: 600px) {
  .bizcard__foot { display: none; }
  .bizcard__logo { height: clamp(36px, 12vh, 52px); }
  .bizcard__media { width: clamp(84px, 26vh, 120px); height: clamp(84px, 26vh, 120px); margin-top: 0; }
  .bizcard__name { font-size: clamp(var(--ite-text-xl), 5.5vh, var(--ite-text-3xl)); }
  .bizcard__role { font-size: var(--ite-text-sm); }
  .bizcard__body { gap: clamp(14px, 3.5vw, 32px); padding-block: clamp(10px, 3vh, 18px); }
  .bizcard__band { padding-block: clamp(8px, 2.5vh, 14px); }
}

/* --------------------------------------------------------- chooser sheet */
.sheet[hidden] { display: none; }
.sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 600px) { .sheet { align-items: center; } }
.sheet__scrim {
  position: absolute; inset: 0;
  background: color-mix(in oklab, var(--ite-gray-900) 55%, transparent);
  opacity: 0; transition: opacity var(--ite-dur-fast) var(--ite-ease-standard);
}
.sheet__panel {
  position: relative; width: 100%; max-width: 440px;
  margin: 0 clamp(0px, 2vw, 16px);
  padding: clamp(16px, 3vw, 22px);
  /* long option lists must scroll inside the panel, never clip off-screen */
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  background: var(--ite-color-bg);
  border-radius: var(--ite-radius-2xl) var(--ite-radius-2xl) 0 0;
  corner-shape: var(--ite-corner);
  box-shadow: 0 0 0 1px var(--ite-color-border), var(--ite-shadow-xl);
  transform: translateY(12px); opacity: 0;
  transition: transform var(--ite-dur-base) var(--ite-ease-entrance),
              opacity var(--ite-dur-base) var(--ite-ease-entrance);
}
@media (min-width: 600px) {
  .sheet__panel { border-radius: var(--ite-radius-2xl); transform: translateY(8px) scale(0.98); }
}
.sheet.is-open .sheet__scrim { opacity: 1; }
.sheet.is-open .sheet__panel { transform: none; opacity: 1; }
.sheet__eyebrow { margin: 0 0 12px; color: var(--ite-text-orange); }
.sheet__list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sheet__list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 13px 14px; border-radius: var(--ite-radius-md); corner-shape: var(--ite-corner);
  text-decoration: none; color: var(--ite-color-text);
  background: var(--ite-color-bg-subtle);
  box-shadow: inset 0 0 0 1px var(--ite-color-border);
  transition: transform var(--ite-dur-fast) var(--ite-ease-standard);
}
.sheet__list .opt__label { font-weight: 600; flex-shrink: 0; }
.sheet__list .opt__value {
  font-size: var(--ite-text-sm); color: var(--ite-color-text-muted);
  /* email addresses can outgrow a 320px row — truncate, never overflow */
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sheet__list a:hover { transform: translateY(-1px); color: var(--ite-text-orange); }
.sheet__list a:hover .opt__value { color: var(--ite-text-orange); }
.sheet__list a:focus-visible { outline: var(--ite-focus-ring); outline-offset: 2px; }
.sheet__close {
  width: 100%; padding: 12px; font: inherit; font-family: var(--ite-font-sans);
  color: var(--ite-color-text-muted); background: transparent;
  border: 1px solid var(--ite-color-border); border-radius: var(--ite-radius-md);
  corner-shape: var(--ite-corner); cursor: pointer;
}
.sheet__close:hover { color: var(--ite-color-text); }
.sheet__close:focus-visible { outline: var(--ite-focus-ring); outline-offset: 2px; }

/* ------------------------------------------------------------------ toast */
.vctoast[hidden] { display: none; }
.vctoast {
  position: fixed; left: 50%; bottom: clamp(16px, 4vh, 32px);
  transform: translateX(-50%) translateY(8px); z-index: 60;
  padding: 10px 18px; font-size: var(--ite-text-sm);
  color: var(--ite-gray-50); background: var(--ite-color-text);
  border-radius: var(--ite-radius-pill); box-shadow: var(--ite-shadow-lg);
  opacity: 0;
  transition: opacity var(--ite-dur-fast) var(--ite-ease-standard),
              transform var(--ite-dur-fast) var(--ite-ease-standard);
}
.vctoast.is-open { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vchip, .vchip::after, .bizcard__phonelink, .sheet__scrim, .sheet__panel, .sheet__list a, .vctoast { transition: none; }
}