/* =============================================================================
   Almaty Bars — «След Барса» (/trail/, /kk/trail/, /en/trail/)
   =============================================================================
   Loaded AFTER landing.css and relies on it for everything shared with the
   home page: the floating header, language switcher, the gold .cta-play pill,
   the native <dialog> sheets, the footer, the tokens and the gold. This file
   adds only what this page itself needs and overrides nothing on the landing.

   THE PHOTOGRAPH IS ITS OWN ASSET. img/trail/hero-barys-v3.jpg (+ -m.jpg mobile crop of the same pixels) is the owner's
   exact image; no text, logo or button is baked into it. Desktop lays it on the
   right and dissolves its left, top and bottom edges into --deep with gradients
   (the left of the frame is dark rock and dark sky, so the text column reads on
   it). Below 1180px the photo is never cropped and never overlaid: it is its
   own block under the header, at its natural 16:9, and the copy follows it.
   ============================================================================= */

body.trail{--hdr:92px}

/* ---------- hero ------------------------------------------------------------ */
.tr-hero{position:relative;isolation:isolate;overflow:clip;display:flow-root;background:var(--deep)}

/* The hero photograph is ONE full-bleed canvas (the approved, only slightly toned picture:
   img/trail/hero-barys-v4.jpg desktop+tablet, hero-barys-v4-m.jpg phone). It starts at the very
   top of the hero under the header — no dark top band, no strip, no inset frame. */
.tr-hero-media{position:relative;isolation:isolate;margin:0}
.tr-hero-media img{display:block;width:100%;height:auto;aspect-ratio:1672/941;max-width:none;object-fit:cover}
.tr-hero-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,var(--deep) 0,rgba(7,10,16,.55) 8%,rgba(7,10,16,0) 26%);
}
/* phone: the vertical approved picture, framed on the animal, the tower and the city */
@media (max-width:699px){
  .tr-hero-media img{aspect-ratio:941/1250;object-position:50% 42%}
  .tr-hero-media::after{background:linear-gradient(to top,var(--deep) 0,rgba(7,10,16,.5) 7%,rgba(7,10,16,0) 22%)}
}

.tr-hero-copy{
  --col:560px;
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  max-width:1440px;margin-inline:auto;padding:6px var(--lp-pad) 46px;
}
.tr-hero-copy > *{max-width:var(--col)}
/* below 1180px the copy is one column under the photograph. The buttons come
   right after the first paragraph so they sit on the first phone screen; the
   rest of the copy follows them in its original order, and the four steps close
   the block. From 1180px the DOM order is simply the reading order. */
@media (max-width:1179px){
  .tr-hero-copy > *{order:2}
  .tr-hero-copy > h1,
  .tr-hero-copy > .tr-lead,
  .tr-hero-copy > .tr-p1,
  .tr-hero-copy > .tr-cta{order:1}
  .tr-hero-copy > .tr-steps{order:3}
}

.tr-hero h1{
  font-size:clamp(44px,12vw,58px);line-height:1.06;letter-spacing:-.005em;
  color:var(--ice);margin:0 0 14px;
}
.tr-lead{
  font:600 clamp(21px,5.6vw,27px)/1.28 var(--font-display);color:var(--au-hi);
  margin:0 0 18px;
}
.tr-hero-copy p:not(.tr-lead):not(.tr-strong):not(.tr-sign){
  color:rgba(230,236,243,.84);font-size:16.5px;line-height:1.62;margin:0 0 14px;
}
.tr-strong{font:600 17.5px/1.5 var(--font-text);color:var(--au-hi);margin:6px 0 14px}
.tr-sign{font:600 17.5px/1.5 var(--font-text);color:var(--au-hi);margin:2px 0 4px}

/* buttons: the primary is the site's own .cta-play; the secondary is its
   outlined sibling, same 54px height, same pill, same type */
.tr-cta{display:flex;flex-wrap:wrap;gap:12px 14px;margin:6px 0 20px}
.tr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 26px;border-radius:999px;cursor:pointer;text-decoration:none;
  font:600 15px/1 var(--font-text);letter-spacing:.01em;color:var(--ice);
  background:rgba(230,236,243,.05);border:1px solid rgba(230,236,243,.26);
  transition:border-color .2s,background .2s,color .2s;
}
.tr-btn svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.tr-btn:hover{background:rgba(170,131,50,.16);border-color:var(--au)}}
.tr-btn:active{background:rgba(170,131,50,.26);border-color:var(--au)}

/* Посмотри → Разберись → Сними своё → Передай */
.tr-steps{
  list-style:none;margin:8px 0 0;padding:20px 0 0;width:100%;max-width:640px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  border-top:1px solid rgba(230,236,243,.10);
}
.tr-steps li{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
  font:500 13.5px/1.25 var(--font-text);color:rgba(230,236,243,.86)}
.tr-steps svg{width:27px;height:27px;stroke:var(--au);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- desktop: copy on the left, the animal on the right ---------------
   Starts at 1180px: below that the Kazakh and English copy runs into the tail. */
@media (min-width:1180px){
  .tr-hero{min-height:clamp(700px,54vw,860px)}
  /* The photo starts at the very top of the hero, under the header: the sky then
     rises straight into the header's own dark scrim instead of stopping 250-300px
     down against a black band, and the dark rock below dissolves into the page. */
  .tr-hero-media{position:absolute;inset:0;margin:0;width:auto}
  .tr-hero-media img{width:100%;height:100%;aspect-ratio:auto;object-position:72% 38%}   /* frame leans right: a little of the far-right sun glow is cropped, the tower and the city stay */
  .tr-hero-media::after{
    background:
      linear-gradient(to right,rgba(7,10,16,.66) 0,rgba(7,10,16,.42) 22%,rgba(7,10,16,.12) 40%,rgba(7,10,16,0) 52%),
      linear-gradient(to top,var(--deep) 0,rgba(7,10,16,.5) 6%,rgba(7,10,16,0) 20%);
  }
  .tr-hero-copy{padding-top:calc(var(--hdr) + 40px);padding-bottom:64px;min-height:inherit}
  .tr-hero-copy{--col:min(37.5vw,520px)}
  .tr-hero h1{font-size:clamp(54px,5.1vw,74px);margin-bottom:18px;max-width:none}
  .tr-lead{font-size:clamp(25px,2.4vw,34px);margin-bottom:22px}
  .tr-hero-copy p:not(.tr-lead):not(.tr-strong):not(.tr-sign){font-size:17px}
  .tr-cta{max-width:min(46vw,640px)}
  .tr-steps{margin-top:auto;max-width:min(44vw,600px)}
}

/* ---------- catalog --------------------------------------------------------- */
.tr-catalog{scroll-margin-top:calc(var(--hdr) - 8px);background:linear-gradient(180deg,var(--deep),#0b1017 38%,#0a0e15);padding:30px 0 12px}
.tr-catalog .wrap{max-width:1240px}
.tr-catalog h2{font-size:clamp(30px,4.6vw,46px);line-height:1.12;margin:0 0 22px}

.tr-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}
.tr-chip{
  min-height:46px;padding:0 22px;border-radius:999px;cursor:pointer;
  font:600 14.5px/1 var(--font-text);color:var(--ice);
  background:rgba(230,236,243,.04);border:1px solid rgba(230,236,243,.22);
  transition:border-color .2s,background .2s,color .2s;
}
@media (hover:hover){.tr-chip:hover{border-color:var(--au);background:rgba(170,131,50,.14)}}
.tr-chip[aria-pressed="true"]{background:var(--au);border-color:var(--au);color:var(--deep)}
@media (hover:none){.tr-chip[aria-pressed="true"]{background:var(--au-m);border-color:var(--au-m)}}

.tr-group{margin:0 0 38px}
.tr-group[hidden]{display:none}
.tr-group-title{
  display:flex;align-items:center;gap:12px;margin:0 0 18px;
  font:600 clamp(21px,2.6vw,26px)/1.2 var(--font-display);color:var(--ice);
}
.tr-group-title svg{width:30px;height:30px;flex:none;stroke:var(--au);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.tr-grid{list-style:none;margin:0;padding:0;display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:640px){.tr-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.tr-grid{grid-template-columns:repeat(3,1fr);gap:24px}}

.tcard{display:flex;flex-direction:column;gap:12px;min-width:0}
.tcard-open{
  position:relative;display:block;width:100%;padding:0;margin:0;border:0;cursor:pointer;
  aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0a0e15;color:var(--ice);
  box-shadow:0 0 0 1px rgba(230,236,243,.10),0 14px 34px rgba(0,0,0,.42);
  transition:box-shadow .2s,transform .2s;
}
.tcard-open:disabled{cursor:default}
.tcard-open img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
@media (hover:hover){.tcard-open:not(:disabled):hover{box-shadow:0 0 0 1px var(--au),0 18px 40px rgba(0,0,0,.5);transform:translateY(-2px)}}
.tcard-open:focus-visible{outline:2px solid var(--au);outline-offset:3px}

.tcard-play{
  position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;
  border-radius:50%;background:rgba(7,10,16,.72);border:2px solid var(--au);
  display:grid;place-items:center;transition:transform .2s,background .2s;
}
.tcard-play::before{
  content:"";margin-left:4px;width:0;height:0;
  border-left:17px solid var(--au);border-top:10.5px solid transparent;border-bottom:10.5px solid transparent;
}
@media (hover:hover){.tcard-open:not(:disabled):hover .tcard-play{transform:scale(1.07);background:rgba(7,10,16,.86)}}
.tcard-dur{
  position:absolute;right:10px;bottom:10px;padding:5px 9px;border-radius:8px;
  background:rgba(7,10,16,.8);color:var(--ice);font:600 12.5px/1 var(--font-text);letter-spacing:.02em;
}
/* a story whose YouTube link is not set yet: no play button, no click, and only
   the owner-approved compact "Скоро" pill. It is replaced by the play button
   the moment a verified ID is set in trail.js. */
.tcard-pending{
  position:absolute;left:10px;bottom:10px;padding:5px 11px;border-radius:999px;
  background:rgba(7,10,16,.78);border:1px solid rgba(230,236,243,.30);
  color:var(--ice);font:600 11px/1 var(--font-text);letter-spacing:.14em;text-transform:uppercase;
}
.tcard[data-state="pending"] .tcard-play{display:none}
.tcard[data-state="ready"] .tcard-pending{display:none}

.tcard-title{margin:0;font:600 clamp(19px,2vw,22px)/1.25 var(--font-display);color:var(--ice)}
.tcard-tag{margin:-6px 0 0;font:500 12px/1.3 var(--font-text);letter-spacing:.12em;text-transform:uppercase;color:var(--au)}

/* an announced story is a slim bar, not a card: no cover, no player, and no
   fabricated footage. */
.tcard-soon{
  grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 18px;border-radius:14px;border:1px dashed rgba(170,131,50,.55);
  background:rgba(230,236,243,.025);
}
.tcard-soon .tcard-title{font-size:clamp(17px,1.8vw,20px)}
.tcard-soon-chip{
  flex:none;padding:8px 16px;border-radius:999px;border:1px solid var(--au);
  color:var(--au-hi);font:600 12.5px/1 var(--font-text);letter-spacing:.14em;text-transform:uppercase;
}

/* ---------- disclaimer ------------------------------------------------------- */
.tr-notice{
  margin:6px 0 42px;padding:20px clamp(18px,3vw,30px);
  border:1px solid rgba(230,236,243,.12);border-left:3px solid var(--au);border-radius:12px;
  background:rgba(230,236,243,.03);max-width:900px;
}
.tr-notice b{display:block;font:600 17px/1.35 var(--font-display);color:var(--ice);margin-bottom:6px}
.tr-notice p{margin:0;color:var(--slate);font-size:14.5px;line-height:1.6}
.tr-notice p + p{margin-top:4px}
.tr-draft{
  display:inline-block;margin-top:12px;padding:4px 10px;border-radius:6px;
  border:1px dashed rgba(230,236,243,.35);color:var(--slate);
  font:600 11px/1.2 var(--font-text);letter-spacing:.1em;text-transform:uppercase;
}

/* ---------- the in-page viewer: a vertical 9:16 player ------------------------ */
.tv{max-width:min(900px,94vw);overflow:visible}
.tv-panel{
  background:linear-gradient(180deg,#10161f,#0a0e15);
  border:1px solid rgba(230,236,243,.12);border-radius:16px;
  padding:clamp(18px,3vw,30px);box-shadow:0 32px 80px rgba(0,0,0,.65);
  max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;
}
.tv-layout{display:grid;gap:22px;grid-template-columns:1fr;justify-items:center}
.tv-frame{
  aspect-ratio:9/16;width:min(100%,calc(60dvh * 9 / 16),360px);
  background:#05070b;border:1px solid rgba(230,236,243,.12);border-radius:12px;overflow:hidden;
}
.tv-frame iframe{display:block;width:100%;height:100%;border:0}
.tv-panel{padding-top:58px}   /* phone: the × sits above the frame, never over the player */
.tv-side{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:100%;min-width:0}
.tv-tag{margin:0;font:600 11.5px/1.3 var(--font-text);letter-spacing:.14em;text-transform:uppercase;color:var(--au)}
.tv-side h2{font-size:clamp(24px,5vw,32px);line-height:1.18;margin:0}
.tv-meta{margin:0;color:var(--slate);font-size:14px}
.tv-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
@media (min-width:760px){
  .tv-panel{padding:34px}
  .tv-layout{grid-template-columns:auto minmax(0,1fr);justify-items:stretch;align-items:start;gap:34px}
  .tv-frame{width:calc(min(76dvh,660px) * 9 / 16)}
  .tv-side{padding-top:34px}
}
.tv .sheet-x{right:12px;top:12px}

.tr-soon-text{color:var(--slate);font-size:17px;line-height:1.6;margin:0}

@media (max-width:760px){
  body.trail{--hdr:78px}
  .tr-steps{gap:6px}
  .tr-steps li{font-size:12.5px}
}