/* ============================================================================
   FLIGHT — Part 1 "What's included" : asymmetric BENTO grid.
   Module tag: .bento-  |  reads window.FlightData.pillars (6)
   Glass surfaces, accent-as-emitted-light, cursor spotlight + capped 3D tilt.
   ============================================================================ */

.bento-wrap { position: relative; }

/* ---------- section header ---------- */
.bento-head {
  max-width: 52ch;
  margin-block-end: clamp(32px, 5vw, 64px);
}
.bento-head .eyebrow { margin-block-end: var(--space-4); }
.bento-eyebrow-mark {
  width: 20px; height: auto;
  filter: drop-shadow(0 2px 6px rgba(var(--red-rgb), 0.55));
}
.bento-lead-in {
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  color: var(--fg-1);
  max-width: 22ch;
}
.bento-lead-in .hl-yellow { color: var(--yellow-soft); }

/* ---------- the bento grid ---------- */
.bento-grid {
  display: grid;
  gap: clamp(12px, 1.4vw, 20px);
  grid-template-columns: 1fr;
  grid-template-areas: "p1" "p2" "p3" "p4" "p5" "p6";
}
@media (min-width: 680px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(190px, auto);
    grid-template-areas:
      "p1 p1"
      "p2 p3"
      "p4 p4"
      "p5 p6";
  }
}
@media (min-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(210px, auto);
    grid-template-areas:
      "p1 p1 p2 p3"
      "p1 p1 p4 p4"
      "p5 p6 p4 p4";
  }
}

.bento-area-1 { grid-area: p1; }
.bento-area-2 { grid-area: p2; }
.bento-area-3 { grid-area: p3; }
.bento-area-4 { grid-area: p4; }
.bento-area-5 { grid-area: p5; }
.bento-area-6 { grid-area: p6; }

/* ---------- accent maps (accent behaves as emitted light) ---------- */
.bento-tile--blue   { --acc: var(--blue);   --acc-rgb: var(--blue-rgb);   --acc-soft: var(--blue-soft); }
.bento-tile--green  { --acc: var(--green);  --acc-rgb: var(--green-rgb);  --acc-soft: var(--green-soft); }
.bento-tile--yellow { --acc: var(--yellow); --acc-rgb: var(--yellow-rgb); --acc-soft: var(--yellow-soft); }

/* ---------- tile ---------- */
.bento-tile {
  min-width: 0;               /* never overflow the grid track */
  border-radius: var(--r-lg);
}
.bento-tile--hero { border-radius: var(--r-xl); }

.bento-tile__inner {
  position: relative;
  isolation: isolate;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(20px, 2vw, 32px);
  border-radius: inherit;
  color: var(--fg-2);
  background: var(--panel-grad), var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-2);
  overflow: hidden;
  transform: perspective(900px) rotateX(0deg) rotateY(0deg);
  transition:
    transform var(--dur-2) var(--ease-out-expo),
    border-color var(--dur-2) ease,
    box-shadow var(--dur-2) ease;
}

/* ambient accent glow anchored bottom-right (emitted light) */
.bento-tile__inner::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: auto -18% -28% auto;
  width: 72%; height: 72%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--acc-rgb), 0.20), transparent 68%);
  filter: blur(10px);
  opacity: 0.55;
  transition: opacity var(--dur-2) ease;
  pointer-events: none;
}
.bento-tile--hero .bento-tile__inner::after { width: 86%; height: 86%; opacity: 0.7; }

/* cursor spotlight — follows --spot-x / --spot-y, revealed on hover */
.bento-tile__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: radial-gradient(
    260px 260px at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(var(--acc-rgb), 0.16),
    rgba(255, 255, 255, 0.05) 32%,
    transparent 62%);
  opacity: 0;
  transition: opacity var(--dur-2) ease;
  pointer-events: none;
}

.bento-tile:hover .bento-tile__inner {
  border-color: rgba(var(--acc-rgb), 0.5);
  box-shadow:
    inset 0 0 0 1px rgba(var(--acc-rgb), 0.16),
    0 24px 60px rgba(0, 0, 0, 0.45),
    0 0 52px rgba(var(--acc-rgb), 0.22);
}
.bento-tile:hover .bento-tile__inner::after { opacity: 0.92; }
.bento-tile:hover .bento-tile__inner::before { opacity: 1; }

/* ---------- tile content (sits above light layers) ---------- */
.bento-tile__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
}

.bento-chip {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  color: var(--acc);
  background: radial-gradient(120% 120% at 30% 20%, rgba(var(--acc-rgb), 0.30), rgba(var(--acc-rgb), 0.06));
  border: 1px solid rgba(var(--acc-rgb), 0.36);
  box-shadow: 0 0 24px rgba(var(--acc-rgb), 0.32), inset 0 0 12px rgba(var(--acc-rgb), 0.14);
}
.bento-chip svg { width: 26px; height: 26px; stroke-width: 2; }
.bento-tile--hero .bento-chip { width: 60px; height: 60px; }
.bento-tile--hero .bento-chip svg { width: 30px; height: 30px; }

.bento-tile__title {
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
  text-wrap: balance;
}
.bento-tile--hero .bento-tile__title { font-size: var(--fs-h2); }

.bento-tile__blurb {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-3);
  max-width: 54ch;
}

.bento-tile__meta {
  margin-block-start: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

/* stat pill */
.bento-stat {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 12px;
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: var(--fs-small);
  letter-spacing: 0.01em;
  color: var(--acc-soft);
  background: rgba(var(--acc-rgb), 0.10);
  border: 1px solid rgba(var(--acc-rgb), 0.28);
}
.bento-stat::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 10px rgba(var(--acc-rgb), 0.9);
}
.bento-tile--hero .bento-stat { font-size: var(--fs-body); padding: 9px 18px 9px 14px; }

/* note — accent keyline */
.bento-note {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg-2);
  padding-inline-start: 14px;
  border-inline-start: 2px solid rgba(var(--acc-rgb), 0.55);
}

/* offers list */
.bento-offers { list-style: none; display: flex; flex-direction: column; gap: 10px; width: 100%; }
.bento-offers li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--fg-2);
}
.bento-offers li svg { width: 17px; height: 17px; color: var(--acc); flex: 0 0 auto; }
.bento-offers li:last-child { color: var(--fg-3); }

/* ---------- flagship paper-airplane art (protagonist, tile 1) ---------- */
.bento-flagship-art {
  position: absolute;
  z-index: 0;
  top: -4%;
  right: -3%;
  width: min(56%, 250px);
  height: auto;
  opacity: 0.9;
  pointer-events: none;
  filter: drop-shadow(0 10px 28px rgba(var(--red-rgb), 0.5));
}
.bento-flagship-art .bento-trail { opacity: 0.45; }

/* paper-airplane mark paint (var() must live in CSS, not SVG attributes) */
.bento-plane-body { fill: var(--red); }
.bento-plane-fin  { fill: var(--red); fill: color-mix(in srgb, var(--red) 76%, #000); }
.bento-trail      { stroke: var(--red); }

/* ---------- perf hint only where motion + fine pointer apply ---------- */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .bento-tile__inner { will-change: transform; }
}

/* ---------- reduced motion: calm, static, fully legible ---------- */
@media (prefers-reduced-motion: reduce) {
  .bento-tile__inner { transition: none; transform: none; }
  .bento-tile__inner::before { display: none; }
  .bento-flagship-art { opacity: 0.85; }
}