/* FlyNumber SIP product shot — "FlyNumber SIP Marketing Image" from the Claude
 * Design project (artboard 1060x790). Every design px is written as
 * calc(N * var(--u)) where --u = 1 artboard px, derived from the container
 * width with container-query units, so the composition scales like an image
 * but stays crisp text/vectors. Same construction as home-collage.css.
 *
 * Treatment (product-shot rule): the cards carry the site's sticker shell —
 * 2px #333 border, 5px hard shadow, square corners — the back cards keep a
 * ±2° tilt, the front card is straight. The artwork sits UNFRAMED on the page;
 * the hero grid around it is the :has(.sip-collage) rule in custom.css.
 *
 * Tokens are the panel's design-system tokens (colors_and_type.css), scoped
 * to .sip-collage so nothing leaks into the rest of the site.
 */

.sip-collage {
  --foreground: 222.2 84% 4.9%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --border: 214.3 31.8% 91.4%;
  --primary: 221.2 83.2% 53.3%;
  --success: 142.4 71.8% 29.2%;
  --success-subtle: 140.6 84.2% 92.5%;
  --success-border: 141.7 76.6% 73.1%;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji",
               "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  container-type: inline-size;
  width: 100%;
  font-family: var(--font-sans);
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  line-height: 1.3;
  text-align: left;
}
.sip-collage * { box-sizing: border-box; }

/* ───────── Scaling frame ─────────────────────────────────────────────── */
.sipc-board {
  --u: calc(100cqw / 1060);
  position: relative;
  width: 100%;
  height: calc(600 * var(--u));
  overflow: visible;
}

/* ───────── Cards: the sticker shell ──────────────────────────────────── */
.sipc-card {
  position: absolute;
  background: #fff;
  border: 2px solid #333;
  border-radius: 0;
  box-shadow: 5px 5px 0 #333;
  padding: calc(22 * var(--u));
}
.sipc-card--in   { left: calc(24 * var(--u));  top: calc(64 * var(--u));  width: calc(380 * var(--u)); transform: rotate(-2deg); }
.sipc-card--out  { left: calc(656 * var(--u)); top: calc(36 * var(--u));  width: calc(380 * var(--u)); transform: rotate(2deg); }
.sipc-card--main { left: calc(230 * var(--u)); top: calc(250 * var(--u)); width: calc(600 * var(--u)); padding: calc(30 * var(--u)) calc(32 * var(--u)) calc(32 * var(--u)); z-index: 2; }

/* ───────── Shared bits ───────────────────────────────────────────────── */
.sipc-head { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-bottom: calc(14 * var(--u)); }
.sipc-head-text { display: flex; flex-direction: column; gap: calc(1 * var(--u)); min-width: 0; }
.sipc-title { font-size: calc(14 * var(--u)); font-weight: 600; }
.sipc-sub, .sipc-place { font-size: calc(12 * var(--u)); color: hsl(var(--muted-foreground)); }
.sipc-place { font-size: calc(11.5 * var(--u)); }
.sipc-badge-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 9999px;
}
.sipc-badge-icon svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.sipc-badge-icon--in  { background: hsl(var(--success-subtle)); border: 1px solid hsl(var(--success-border)); color: hsl(var(--success)); }
.sipc-badge-icon--out { background: hsl(var(--primary) / 0.08); border: 1px solid hsl(var(--primary) / 0.2); color: hsl(var(--primary)); }

.sipc-field {
  display: flex; align-items: center; gap: calc(10 * var(--u));
  border-radius: calc(12 * var(--u)); border: 1px solid hsl(var(--border));
  background: hsl(var(--muted)); padding: calc(11 * var(--u)) calc(13 * var(--u));
  margin-bottom: calc(11 * var(--u));
}
.sipc-field--callerid { justify-content: space-between; }
.sipc-flag-disc {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 9999px;
  background: #fff; box-shadow: inset 0 0 0 1px hsl(var(--border)); overflow: hidden;
}
.sipc-flag { font-size: calc(15 * var(--u)); line-height: 1; }
.sipc-flag--sm { font-size: calc(13 * var(--u)); }
.sipc-number { font-size: calc(17 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; }
.sipc-number--sm { font-size: calc(16 * var(--u)); letter-spacing: 0; }
.sipc-label { font-size: calc(10.5 * var(--u)); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--muted-foreground)); }
.sipc-foot { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(12.5 * var(--u)); color: hsl(var(--muted-foreground)); }
.sipc-foot-icon { width: calc(14 * var(--u)); height: calc(14 * var(--u)); flex-shrink: 0; }
.sipc-foot-icon--ok { color: hsl(var(--success)); }
.sipc-foot-icon--primary { color: hsl(var(--primary)); }

.sipc-pill {
  display: inline-flex; align-items: center; gap: calc(6 * var(--u)); flex-shrink: 0;
  height: calc(24 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: 9999px;
  font-size: calc(11.5 * var(--u)); font-weight: 500; white-space: nowrap;
}
.sipc-pill--muted   { background: #fff; border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); }
.sipc-pill--primary { background: hsl(var(--primary) / 0.08); border: 1px solid hsl(var(--primary) / 0.25); color: hsl(var(--primary)); font-weight: 600; font-size: calc(12.5 * var(--u)); height: calc(28 * var(--u)); padding: 0 calc(12 * var(--u)); }
.sipc-pill--success { background: hsl(var(--success-subtle)); border: 1px solid hsl(var(--success-border)); color: hsl(var(--success)); }
.sipc-pill--sm { height: calc(20 * var(--u)); padding: 0 calc(8 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 500; }

/* ───────── Front card ────────────────────────────────────────────────── */
.sipc-main-head { display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--u)); margin-bottom: calc(8 * var(--u)); }
.sipc-brand { display: flex; align-items: center; gap: calc(14 * var(--u)); min-width: 0; }
.sipc-logo {
  width: calc(44 * var(--u)); height: calc(44 * var(--u)); flex-shrink: 0;
  border-radius: calc(8 * var(--u)); border: 1px solid hsl(var(--border));
  box-shadow: none; padding: 0; margin: 0; max-width: none;
}
.sipc-brand-name { font-size: calc(24 * var(--u)); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; line-height: 1.15; }
.sipc-tagline { font-size: calc(13 * var(--u)); color: hsl(var(--muted-foreground)); }
.sipc-lead { font-size: calc(13.5 * var(--u)); color: hsl(var(--muted-foreground)); line-height: 1.5; margin-bottom: calc(20 * var(--u)); }
.sipc-creds { border: 1px solid hsl(var(--border)); border-radius: calc(12 * var(--u)); overflow: hidden; margin-bottom: calc(16 * var(--u)); }
.sipc-cred {
  display: grid; grid-template-columns: calc(130 * var(--u)) 1fr; gap: calc(10 * var(--u)); align-items: center;
  padding: calc(12 * var(--u)) calc(16 * var(--u)); font-size: calc(13 * var(--u));
}
.sipc-cred + .sipc-cred { border-top: 1px solid hsl(var(--border)); }
.sipc-cred-k { color: hsl(var(--muted-foreground)); }
.sipc-cred-v { font-weight: 500; }
.sipc-tabular { font-variant-numeric: tabular-nums; }
.sipc-cred-v--pw { display: flex; align-items: center; gap: calc(8 * var(--u)); letter-spacing: 0.2em; }
.sipc-eye { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: hsl(var(--muted-foreground)); letter-spacing: normal; }
.sipc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); }
.sipc-tile { border: 1px solid hsl(var(--border)); border-radius: calc(12 * var(--u)); padding: calc(13 * var(--u)) calc(15 * var(--u)); }
.sipc-tile-head { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); margin-bottom: calc(10 * var(--u)); }
.sipc-tile-head .sipc-label { font-size: calc(11 * var(--u)); }
.sipc-tile-body { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(12.5 * var(--u)); color: hsl(var(--muted-foreground)); }
.sipc-tile-icon { width: calc(15 * var(--u)); height: calc(15 * var(--u)); flex-shrink: 0; }

/* Neutralise site-wide element styles that would otherwise leak in
   (custom.css boxes every li, adds ✦ to .text-section p, shadows images). */
.sip-collage img { box-shadow: none; }
.sip-collage span, .sip-collage div { background-clip: padding-box; }

/* ───────── Click to inspect (assets/js/collage-zoom.js) ─────────────
   A clicked card lifts to the front, straightens and scales up from its
   centre; click again, click elsewhere or Esc shrinks it. */
.sipc-card { transition: transform 220ms ease, box-shadow 220ms ease; cursor: zoom-in; }
.sipc-card:focus-visible { outline: 3px solid #2f7de1; outline-offset: 3px; }
.sipc-card.is-zoomed {
  transform: rotate(0deg) scale(1.35);
  z-index: 10;
  box-shadow: 7px 7px 0 #333;
  cursor: zoom-out;
}
@media (max-width: 720px) {
  .sipc-card.is-zoomed { transform: rotate(0deg) scale(1.9); }
}