/* Clash Zayed: the sections page. PC and PlayStation are the two big doors; food and simulators are
   narrower panels that only open a few words. Dark seams keep the four apart. Loads after style.css. */

.hub { display: grid; grid-template-rows: auto 1fr; height: calc(100svh - var(--bar-full)); padding: 0 var(--margin) var(--margin); gap: 20px; }
.hub-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.75em; }
.hub-title h1 { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(3.5rem, 1.5rem + 6.5vw, 8.5rem); line-height: 0.85; letter-spacing: -0.01em; text-transform: uppercase; }
.hub-sub { color: var(--muted); font-weight: 600; }
.hub-actions { margin-inline-start: auto; }

.cards { display: flex; gap: 6px; min-height: 0; }
.card {
  position: relative; flex: 1.6 1 0; min-width: 0; overflow: hidden;
  display: grid; padding: 0; border: 0; margin: 0; background: var(--surface);
  color: var(--ink); text-align: start; text-decoration: none; font: inherit; cursor: pointer;
  container-type: inline-size;
  transition: flex-grow 800ms var(--ease-out), filter 800ms ease;
}
.card-info { flex-grow: 0.8; }
.card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), filter 800ms ease; }
.card-info > img { filter: saturate(0.55) brightness(0.62); }
/* the team colour is only the 4px edge of the box under the words */
.card-pc { --team: var(--red); }
.card-ps { --team: var(--blue-strong); }

/* a flat band under the words so they read on any photograph */
.card-copy {
  position: relative; align-self: end; display: grid; gap: 4px; justify-items: start;
  margin: 12px; padding: clamp(16px, 2vw, 28px);
}
.card-main .card-copy { background: var(--bg); border-inline-start: 4px solid var(--team); margin: 10px; padding: clamp(14px, 1.6vw, 24px); }
.card-main .card-go svg { color: var(--team); }
.card-info .card-copy { background: var(--bg); margin: 10px; padding: clamp(14px, 1.4vw, 22px); }
/* sized by the card, so PLAYSTATION still fits when its door is the narrow one */
.card-name { font-family: "Barlow Condensed", "Cairo", sans-serif; font-weight: 700; font-size: clamp(2rem, 15cqi, 4.5rem); line-height: 0.95; text-transform: uppercase; }
/* PC is two letters, so it stands at monument size; PLAYSTATION fills its band */
.card-info .card-name { font-family: "Cairo", sans-serif; font-weight: 800; font-size: var(--step-lead); line-height: 1.3; text-transform: none; }
[lang="en"] .card-info .card-name { font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); line-height: 1; }
.card-line { font-weight: 600; max-width: 30ch; }
.card-go { margin-top: 10px; display: inline-flex; align-items: center; gap: 10px; font-weight: 800; }
.card-go svg { width: 22px; height: 22px; transition: translate 240ms var(--ease-out); }
[dir="rtl"] .card-go svg { scale: -1 1; }
.card-here { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--step-small); font-weight: 600; }
.card-here::after { content: "+"; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.4rem; line-height: 1; color: var(--ink); transition: rotate 400ms var(--ease-out); }

/* the few words: folded away until the panel is pointed at, focused or tapped */
.card-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 600ms var(--ease-out); }
.card-more > span { overflow: hidden; min-height: 0; font-size: var(--step-small); line-height: 1.6; max-width: 34ch; }
.card-more > span::before { content: ""; display: block; height: 10px; }
.card-info.is-open { flex-grow: 1.3; }
.card-info.is-open > img { filter: none; }
.card-info.is-open .card-more { grid-template-rows: 1fr; }
.card-info.is-open .card-here::after { rotate: 45deg; }
.card-info:focus-visible { outline-offset: -3px; }

@media (hover: hover) and (pointer: fine) {
  .cards:hover .card-main { filter: brightness(0.85); }
  .cards .card-main:hover { filter: none; flex-grow: 2.2; }
  .card-main:hover > img { transform: scale(1.05); }
  .card-main:hover .card-go svg { translate: 6px 0; }
  [dir="rtl"] .card-main:hover .card-go svg { translate: -6px 0; }
  .card-info:hover { flex-grow: 1.3; }
  .card-info:hover > img { filter: none; }
  .card-info:hover .card-more { grid-template-rows: 1fr; }
  .card-info:hover .card-here::after { rotate: 45deg; }
}

/* ---------- arriving: the four panels rise one after another ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .card { animation: card-in 600ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms + 60ms); }
  .js .card:nth-child(2) { --i: 1; } .js .card:nth-child(3) { --i: 2; } .js .card:nth-child(4) { --i: 3; }
  .js .hub-title { animation: title-in 450ms var(--ease-out) both; }
  /* inside each panel: the photograph settles and the words rise after the panel opens */
  .js .card > img { animation: photo-in 1000ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 60ms + 60ms); }
  .js .card-copy { animation: title-in 450ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 60ms + 320ms); }
}
@keyframes card-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes photo-in { from { transform: scale(1.14); } to { transform: none; } }
@keyframes title-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- leaving: the chosen door takes the row, then the page dims to dark ---------- */
.is-leaving .card { transition: flex-grow 450ms cubic-bezier(0.65, 0, 0.35, 1), filter 200ms ease; }
.is-leaving .card.is-chosen { flex-grow: 1; filter: none; }
.is-leaving .card:not(.is-chosen) { flex-grow: 0; }
.is-leaving .card-copy { opacity: 0; transition: opacity 150ms ease; }
.sheet { position: fixed; inset: 0; z-index: 70; pointer-events: none; background: var(--bg); opacity: 0; visibility: hidden; }
.sheet.is-on { opacity: 1; visibility: visible; transition: opacity 260ms ease; }

/* ---------- tablet: PC and PlayStation on top, the two small panels below ---------- */
@media (max-width: 1080px) {
  .hub { height: auto; min-height: calc(100svh - var(--bar-full)); }
  .cards { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(52svh, auto) minmax(30svh, auto); }
  .card-info > img { filter: saturate(0.55) brightness(0.55); }
  .is-leaving .card.is-chosen { filter: none; }
}

/* ---------- phone: one door per row, then food and simulators side by side ---------- */
@media (max-width: 720px) {
  .bar-actions .branch-switch { display: inline-block; }
  .hub { gap: 14px; }
  .cards { grid-template-rows: 44svh 44svh auto; }
  .card-main { grid-column: 1 / -1; }
  .card-info { min-height: 34svh; }
  .card-copy { margin: 8px; }
  .card-info .card-copy { margin: 6px; padding: 12px; }
  .hub-title h1 { font-size: clamp(3rem, 17vw, 4.5rem); }
  .card-main .card-name { font-size: clamp(2.25rem, 12vw, 3rem); }
  .card-info .card-name { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .card > img, .card-more, .sheet.is-on { transition: none; }
}