/* L4-18: split-flap tiles (shared by the departures board, the gates, the Radar hub, Arrivals and, L4-28, the two research
   pages), the three gate signs on the home page and the My stack band. The Radar hub itself: tower.css.
   Tiles are dark in both themes, like a real airport board. --tw = tile width, --g = gap between tiles. */
.flap{display:flex;gap:var(--g,3px)}
.flap i {
  position:relative;
  display:grid;
  place-items:center;
  width:var(--tw);
  height:calc(var(--tw)*1.42);
  overflow:hidden;
  border-radius:3px;
  background:linear-gradient(var(--bd-tile,#2a2620) 50%,var(--bd-tile-2,#211d18) 50%);
  box-shadow:inset 0 1px 0 #ffffff12,0 1px 1px #000;
  font:500 calc(var(--tw)*.88)/1 var(--mono);
  font-style:normal;
  white-space:pre;
}
.flap i::after{content:'';position:absolute;left:0;right:0;top:calc(50% - .5px);height:1px;background:#000c}
/* One flip: the top half falls away and shows the new letter. Two names so each change restarts the animation. */
.flap i::before {
  content:'';
  position:absolute;
  inset:0 0 50%;
  z-index:1;
  background:linear-gradient(#3a342c,var(--bd-tile,#2a2620));
  transform-origin:50% 100%;
  transform:perspective(160px) rotateX(-90deg);
}
.flap i.fa::before{animation:flap-a .085s linear}
.flap i.fb::before{animation:flap-b .085s linear}
@keyframes flap-a{from{transform:perspective(160px) rotateX(0)}to{transform:perspective(160px) rotateX(-90deg)}}
@keyframes flap-b{from{transform:perspective(160px) rotateX(0)}to{transform:perspective(160px) rotateX(-90deg)}}

/* Gates: three big links, each an airport sign over a gate. Sign = dark bar, amber gate code, name, pictogram.
   The sticker stands on a dashed "floor" line; under it the live number on tiles, the promise and the way in. */
.gates{padding-top:80px}
.gates-head{margin-bottom:28px}
.gates-head .lead{margin:0}
.gate-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.gate {
  display:flex;
  flex-direction:column;
  height:100%;
  border-radius:22px;
  background:var(--bg-2);
  border:1px solid var(--line);
  color:var(--ink);
  text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.gate:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}
.gate:focus-visible{outline-offset:6px;border-radius:22px}
.gate-sign {
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  border-radius:21px 21px 0 0;
  background:#0b0907;
  color:#ffbf47;
  border-bottom:4px solid #ffbf47;
}
.gate-code{display:grid;place-items:center;min-width:52px;height:38px;padding:0 8px;border-radius:6px;background:#ffbf47;color:#0b0907;
  font:600 18px/1 var(--mono);letter-spacing:.04em}
.gate-name{flex:1;font:800 26px/1 var(--display);letter-spacing:-.02em;color:#fff4de}
.gate-picto{width:32px;height:32px;flex:none}
.gate-body{display:flex;flex-direction:column;gap:14px;flex:1;padding:0 24px 24px}
.gate-art{align-self:center;width:auto;max-width:100%;height:150px;object-fit:contain;object-position:center bottom;margin-top:18px}
.gate-art-a3{height:118px;margin-top:50px}
.gate-live{display:flex;flex-direction:column;gap:10px;padding-top:18px;border-top:2px dashed var(--line-2);color:#ffbf47;--tw:38px;--g:3px}
.gate-unit{font:700 17px/1.3 var(--sans);color:var(--ink)}
.gate-promise{font-size:16px;line-height:1.5;color:var(--ink-2)}
.gate-note{font-size:13px;line-height:1.45;color:var(--ink-3)}
.gate-go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:6px;min-height:44px;font-weight:700;color:var(--link)}
.gate:hover .gate-go{text-decoration:underline}
@media(prefers-reduced-motion:reduce) {
  .gate,.gate:hover{transition:none;transform:none}
}

/* My stack band (L3-02): one compact row (home, after the gates; Radar hub, at the end). */
.stack-band {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px 32px;
  margin-top:40px;
  padding:24px 28px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--bg-2);
}
.stack-band h2{margin:0 0 6px}
.stack-band p{margin:0;color:var(--ink-2)}
.stack-band .eyebrow{margin-bottom:8px;color:var(--ink-3)}
.stack-band .btn{flex:none}
@media(max-width:700px) {
  .stack-band{flex-direction:column;align-items:flex-start;padding:20px}
}
/* One column: number on the left, sticker on the right, both standing on the dashed floor line. */
@media(max-width:980px) {
  .gate-list{grid-template-columns:1fr;gap:20px}
  .gate-body{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:12px;align-items:end}
  .gate-art,.gate-art-a3{grid-column:2;grid-row:1;height:120px;margin:16px 0 0}
  .gate-art-a3{height:92px;max-width:210px}
  .gate-live{grid-column:1;grid-row:1;align-self:end;padding:0;border:0}
  .gate-promise{padding-top:16px;border-top:2px dashed var(--line-2)}
  .gate-promise,.gate-note,.gate-go{grid-column:1/-1}
}
@media(max-width:820px) {
  .gates{padding-top:56px}
}
@media(max-width:560px) {
  .gate-sign{padding:12px 14px;gap:12px}
  .gate-name{font-size:23px}
  .gate-body{padding:0 18px 20px}
  .gate-art{height:96px}
  .gate-art-a3{height:64px;max-width:140px}
  .gate-live{--tw:32px}
}