/* =========================================================
   PINEFORGE COLLECTIVE — Editorial system
   Shared by the home page and the game library: tokens, section rhythm,
   headings, links, social cards, the trailer and the footer.
   ========================================================= */

:root {
  --ed-max:1240px;
  --ed-gutter:clamp(20px,5vw,64px);
  --ed-inline:max(var(--ed-gutter),calc((100% - var(--ed-max)) / 2));
  --ed-section-y:clamp(72px,8vw,120px);
  --ed-radius:22px;
  --ed-line:color-mix(in srgb,var(--text-primary) 10%,transparent);
  --ed-line-strong:color-mix(in srgb,var(--text-primary) 18%,transparent);
  --ed-card:color-mix(in srgb,var(--bg-secondary) 70%,transparent);
  --ed-card-strong:color-mix(in srgb,var(--bg-tertiary) 74%,transparent);
  --ed-ember:#e6a56c;
  --ed-heading-gradient:linear-gradient(100deg,#f3cb98 0%,#dc9a63 46%,#a9c99c 100%);
  --ed-shadow:0 30px 80px -36px rgba(0,0,0,.65);
}
:root[data-theme="light"] {
  --ed-line:color-mix(in srgb,var(--text-primary) 12%,transparent);
  --ed-line-strong:color-mix(in srgb,var(--text-primary) 22%,transparent);
  --ed-card:rgba(255,255,255,.58);
  --ed-card-strong:rgba(255,255,255,.82);
  --ed-ember:#9a5d34;
  --ed-heading-gradient:linear-gradient(100deg,#9a5d34 0%,#7d5c45 46%,#3f6a3b 100%);
  --ed-shadow:0 30px 70px -38px rgba(45,79,39,.45);
}

/* ---------------------------------------------------------
   Shared section language
   --------------------------------------------------------- */
.editorial main > section {
  position:relative;
  padding:var(--ed-section-y) var(--ed-inline);
}
.editorial main > section h2 {
  margin:0;
  max-width:16ch;
  font:500 clamp(36px,4.5vw,62px)/1.02 var(--font-display);
  letter-spacing:-.045em;
  text-wrap:balance;
}
.editorial main > section h2 span { color:var(--accent-soft); }
.editorial main p { text-wrap:pretty; }

.section-head {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);
  align-items:end;
  gap:28px clamp(32px,6vw,96px);
}
.section-head-aside { display:grid; gap:18px; justify-items:start; }
.section-head-aside p { margin:0; max-width:42ch; color:var(--text-secondary); font-size:16px; line-height:1.7; }

.text-link {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding-bottom:6px;
  border-bottom:1px solid var(--ed-line-strong);
  color:var(--text-primary);
  font:600 13px/1 var(--font-display);
  letter-spacing:.01em;
  transition:border-color .3s ease,gap .3s var(--ease);
}
.text-link span { color:var(--ed-ember); transition:transform .3s var(--ease); }
.text-link:hover { gap:14px; border-color:var(--ed-ember); }
.text-link:hover span { transform:translate(2px,-2px); }

.editorial .button-primary {
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:16px 24px;
  font:600 13px/1 var(--font-display);
  letter-spacing:.01em;
}

/* Small game icons come from one sprite in catalogue order (--icon: 0–7). */
.game-tile-icon {
  width:44px;
  height:44px;
  border-radius:12px;
  background:url("../assets/home/game-icons.webp") calc(var(--icon,0) * -44px) 0 / 352px 44px no-repeat;
  box-shadow:0 8px 18px rgba(0,0,0,.26);
}

/* ---------------------------------------------------------
   Trailer card
   --------------------------------------------------------- */
.trailer-card { min-width:0; }
.trailer-poster {
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  margin:0;
  padding:0;
  overflow:hidden;
  border:1px solid var(--ed-line);
  border-radius:calc(var(--ed-radius) + 4px);
  background:#0a140e;
  box-shadow:var(--ed-shadow);
  cursor:pointer;
  isolation:isolate;
}
.trailer-poster img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.1s var(--ease),filter .5s ease;
}
.trailer-poster::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(3,8,5,.82),rgba(3,8,5,.1) 46%,transparent);
  pointer-events:none;
}
.trailer-play {
  position:absolute;
  z-index:2;
  left:clamp(18px,3vw,30px);
  bottom:clamp(18px,3vw,30px);
  width:clamp(52px,5vw,64px);
  height:clamp(52px,5vw,64px);
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f4f2e9;
  color:#0b140e;
  box-shadow:0 0 0 8px rgba(244,242,233,.12);
  transition:transform .4s var(--ease),box-shadow .4s ease;
}
.trailer-play svg { width:22px; height:22px; fill:currentColor; margin-left:3px; }
.trailer-caption {
  position:absolute;
  z-index:2;
  left:calc(clamp(18px,3vw,30px) + clamp(52px,5vw,64px) + 18px);
  bottom:clamp(18px,3vw,30px);
  height:clamp(52px,5vw,64px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  color:#f4f2e9;
  text-align:left;
}
.trailer-caption small { color:rgba(244,242,233,.72); font:600 10px/1 var(--font-display); letter-spacing:.16em; text-transform:uppercase; }
.trailer-caption b { font:600 clamp(16px,1.6vw,20px)/1.1 var(--font-display); letter-spacing:-.02em; }
.trailer-poster:hover img { transform:scale(1.035); }
.trailer-poster:hover .trailer-play { transform:scale(1.07); box-shadow:0 0 0 12px rgba(244,242,233,.16); }
.trailer-poster:focus-visible { outline:2px solid var(--ed-ember); outline-offset:4px; }

/* ---------------------------------------------------------
   Social cards
   --------------------------------------------------------- */
.social-link {
  position:relative;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  overflow:hidden;
  border:1px solid var(--ed-line);
  border-radius:18px;
  background:var(--ed-card);
  transition:transform .4s var(--ease),border-color .3s ease;
}
.social-icon {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:color-mix(in srgb,var(--text-primary) 8%,transparent);
  color:var(--text-primary);
  font:700 15px/1 var(--font-display);
}
.social-icon svg { width:22px; height:22px; stroke:currentColor; stroke-width:1.6; }
.social-copy { display:grid; gap:5px; min-width:0; }
.social-copy small { color:var(--text-secondary); font:600 10px/1 var(--font-display); letter-spacing:.14em; text-transform:uppercase; }
.social-copy b { font:600 16px/1.1 var(--font-display); }
.social-link em { color:var(--ed-ember); font-style:normal; transition:transform .3s var(--ease); }
.social-link:hover { transform:translateY(-3px); border-color:var(--ed-line-strong); }
.social-link:hover em { transform:translate(2px,-2px); }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.site-footer {
  position:relative;
  inset:auto;
  z-index:1;
  display:block;
  color:var(--text-primary);
  font-size:inherit;
  padding:clamp(56px,7vw,88px) var(--ed-inline) 28px;
  border-top:1px solid var(--ed-line);
  background:color-mix(in srgb,var(--bg-primary) 55%,transparent);
}
.footer-main {
  display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:40px;
}
.site-footer .footer-brand { color:inherit; transform:none; }
.site-footer > div > p:last-child,
.site-footer .footer-brand p { justify-self:auto; }
.site-footer > .footer-bottom > p { display:block; }
.footer-brand .brand { color:var(--text-primary); }
.footer-brand p { margin:20px 0 0; max-width:34ch; color:var(--text-secondary); font-size:14px; line-height:1.7; }
.footer-mail { display:inline-block; margin-top:18px; color:var(--text-primary); font:600 14px/1 var(--font-display); border-bottom:1px solid var(--ed-line-strong); padding-bottom:5px; }
.footer-mail:hover { border-color:var(--ed-ember); }
.footer-column { display:grid; align-content:start; gap:12px; }
.footer-column h2 {
  margin:0 0 6px;
  color:var(--text-secondary);
  font:600 10.5px/1 var(--font-display);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.footer-column a,
.footer-column button {
  width:max-content;
  max-width:100%;
  margin:0;
  padding:0;
  border:0;
  background:none;
  color:var(--text-primary);
  font:500 14px/1.4 var(--font-body);
  text-align:left;
  cursor:pointer;
  opacity:.86;
  transition:opacity .25s ease,color .25s ease;
}
.footer-column a:hover,
.footer-column button:hover { opacity:1; color:var(--ed-ember); }
.footer-bottom {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px 24px;
  margin-top:clamp(44px,6vw,72px);
  padding-top:22px;
  border-top:1px solid var(--ed-line);
  color:var(--text-secondary);
  font-size:12px;
}
.footer-bottom p { margin:0; }

/* ---------------------------------------------------------
   Trailer dialog
   --------------------------------------------------------- */
.trailer-dialog {
  width:min(1120px,calc(100vw - 32px));
  max-width:none;
  max-height:calc(100dvh - 32px);
  margin:auto;
  padding:0;
  border:0;
  background:transparent;
  color:#f4f2e9;
  overflow:visible;
}
.trailer-dialog::backdrop { background:rgba(3,8,5,.84); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.trailer-dialog-frame {
  overflow:hidden;
  border:1px solid rgba(244,242,233,.14);
  border-radius:20px;
  background:#050a07;
  box-shadow:0 40px 120px rgba(0,0,0,.6);
}
.trailer-dialog header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 12px 12px 20px;
}
.trailer-dialog header p { display:flex; align-items:center; gap:10px; margin:0; font:600 12px/1.3 var(--font-display); letter-spacing:.04em; }
.trailer-dialog header p i { width:7px; height:7px; border-radius:50%; background:#e6a56c; box-shadow:0 0 12px #e6a56c; }
.trailer-close {
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid rgba(244,242,233,.18);
  border-radius:50%;
  background:transparent;
  color:#f4f2e9;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.trailer-close:hover { background:rgba(244,242,233,.1); }
.trailer-dialog video { display:block; width:100%; height:auto; max-height:calc(100dvh - 110px); aspect-ratio:16 / 9; background:#000; }

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width:1099px) {
  .section-head { grid-template-columns:1fr; align-items:start; }
  .footer-main { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .footer-brand { grid-column:1 / -1; }
}

@media (max-width:719px) {
  .editorial main > section h2 { font-size:clamp(34px,10vw,44px); }
  .section-head-aside p { font-size:15px; }
  .trailer-poster {
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    aspect-ratio:auto;
    background:var(--ed-card);
  }
  .trailer-poster img { position:relative; grid-column:1 / -1; aspect-ratio:16 / 9; height:auto; }
  .trailer-poster::after { display:none; }
  .trailer-play {
    position:relative;
    left:auto;
    bottom:auto;
    width:48px;
    height:48px;
    margin:14px 0 14px 14px;
    box-shadow:0 0 0 6px color-mix(in srgb,var(--text-primary) 10%,transparent);
  }
  .trailer-play svg { width:18px; height:18px; }
  .trailer-caption { position:relative; left:auto; bottom:auto; height:auto; padding:0 16px; color:var(--text-primary); }
  .trailer-caption small { color:var(--text-secondary); }
  .footer-main { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 20px; }
  .footer-bottom { flex-direction:column; }
}

@media (prefers-reduced-motion:reduce) {
  .trailer-poster img,
  .social-link { transition:none !important; }
}

@media (forced-colors:active) {
  .social-link { border-color:CanvasText; }
}

@media print {
  .trailer-card { display:none !important; }
}