/* =========================================================
   Teams: Porsche Sprint Challenge Indonesia
   Loaded after css/style.css + css/racing.css. Tokens, header,
   drawer, footer, .rstats, .dt, .cls, .chip, .badge, .carno,
   .scroll-fade-x, and .srcnote are all reused from there.

   The only genuinely new thing on this page is the TEAM COLOUR.
   Every card sets --c (primary) and --c2 (accent) inline, and every
   rule below reads those two variables. So there is not a single
   per-team class in this stylesheet: adding a team only means adding
   an entry to js/teams-data.js.

   1. page head                  5. detail modal
   2. filter bar                 6. summary table
   3. team card                  7. reduced motion
   4. card contents              8. responsive
   ========================================================= */

/* ---------- 1. page head ---------- */
.tpage{padding-top:var(--nav-h)}

.thead{
  padding:clamp(28px,5vw,72px) var(--pad) clamp(18px,2.5vw,30px);
  max-width:var(--wrap);margin-inline:auto
}
.thead__top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:clamp(16px,3vw,40px)}
.thead__title{
  font-size:var(--fs-page);font-weight:700;line-height:.94;letter-spacing:-.035em;
  text-wrap:balance
}
/* The second line is a description, not a second title. It used to be a bare
   display:block with a dimmed colour, so it inherited the h1's full
   --fs-page at weight 700 — two lines of near-identical giant bold text, one
   white and one grey, which is what made the heading look unresolved. At
   this size it also ran the full width of the page while the title above it
   stopped a third of the way across.

   Now it steps down properly: roughly a third of the title's size, normal
   weight, normal tracking, and capped in ch so it wraps before the edge. */
.thead__title span{
  display:block;margin-top:.4em;max-width:26ch;
  font-size:clamp(1rem,.62rem + 1vw,1.5rem);
  font-weight:400;line-height:1.25;letter-spacing:0;
  color:rgba(255,255,255,.5)
}
.thead__lede{max-width:52ch;margin-top:18px;color:rgba(255,255,255,.62);font-size:.9375rem}
.thead__lede a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3);transition:color var(--t1),border-color var(--t1)}
.thead__lede a:hover{color:rgb(var(--accent));border-color:rgb(var(--accent))}

/* ---------- 2. filter bar ---------- */
.tbar{
  position:sticky;top:var(--nav-h);z-index:60;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(10,10,11,.82);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)
}
.tbar__in{
  max-width:var(--wrap);margin-inline:auto;padding:12px var(--pad);
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,2vw,28px)
}
.tbar__count{margin-left:auto;font-size:.8125rem;color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums}

/* ---------- 3. team card ---------- */
.tgrid{
  max-width:var(--wrap);margin-inline:auto;
  padding:clamp(24px,3.5vw,48px) var(--pad) clamp(20px,3vw,40px);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
  gap:clamp(14px,1.6vw,22px)
}

/* No outline on the card. The team colour wash and the left edge bar already
   separate one card from the next, and a 1px grey rectangle on top of that just
   boxed each livery in. */
.tteam{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:calc(var(--r) + 2px);
  background:linear-gradient(180deg,var(--card),#0b0c0e);
  display:flex;flex-direction:column;min-height:290px;
  transition:transform .45s var(--ease)
}
/* Team colour wash. Note the slash before the alpha: the channels come
   from a custom property and are space separated, so rgba(var(--c), .4)
   is invalid and fails silently, taking the whole gradient with it. */
.tteam::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    /* diagonal band: saturated team colour in the top-right corner,
       faded out before it reaches the text column so white stays crisp */
    linear-gradient(132deg,transparent 16%,rgb(var(--c) / .13) 46%,rgb(var(--c) / .4) 76%,rgb(var(--c) / .72) 100%),
    /* glow under the car, team colour again, so the car sits on a floor */
    radial-gradient(78% 62% at 52% 118%,rgb(var(--c) / .26),transparent 72%),
    /* the livery's second colour only as a thin cast from the top left */
    linear-gradient(160deg,rgb(var(--c2) / .2),transparent 50%);
  opacity:.92;transition:opacity .45s var(--ease)
}
.tteam::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,rgb(var(--c)),rgb(var(--c2)))
}
.tteam:hover,.tteam:focus-within{transform:translateY(-3px)}
.tteam:hover::before,.tteam:focus-within::before{opacity:1}

/* One invisible button covers the whole card. The card itself is not a
   <button> so its contents may hold other interactive elements (the
   livery chips) without nesting buttons. */
.tteam__hit{
  position:absolute;inset:0;z-index:3;
  border-radius:inherit
}
.tteam__hit:focus-visible{outline:2px solid rgb(var(--c));outline-offset:-4px}

.tteam__body{position:relative;z-index:2;padding:clamp(16px,2vw,24px);padding-left:calc(clamp(16px,2vw,24px) + 6px);display:grid;gap:12px;align-content:start}
.tteam__top{display:flex;align-items:center;gap:10px}
.tteam__rank{
  font-size:.6875rem;font-weight:700;letter-spacing:.16em;
  font-variant-numeric:tabular-nums;color:rgb(var(--c));
  /* very dark team colours (Rocket, say) still read, because the card
     behind them already carries a wash of the same colour */
  filter:brightness(1.5) saturate(1.1)
}
.tteam__name{font-size:clamp(1.1875rem,1rem + .7vw,1.625rem);font-weight:700;line-height:1.1;letter-spacing:-.01em;
  /* on narrow cards the colour band can reach up behind the name */
  text-shadow:0 1px 10px rgba(0,0,0,.55)}
.tteam__meta{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);text-shadow:0 1px 8px rgba(0,0,0,.5)}

/* ---------- 4. card contents ---------- */
.tteam__drivers{display:grid;gap:7px;margin-top:2px}
.tdrv{display:flex;align-items:center;gap:9px;font-size:.9375rem;min-width:0}
.tdrv__n{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tdrv__no{margin-left:auto}

.tteam__stats{display:flex;gap:clamp(14px,2vw,26px);margin-top:2px}
.tstat__v{font-size:1.375rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.tstat__k{margin-top:5px;font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}

/* The car sits against the bottom edge, whole. Formula1.com bleeds its car
   photo past the card edge, but these liveries are the point of the page, so
   nose and tail both stay inside the frame. */
.tteam__car{
  position:relative;z-index:1;margin-top:auto;
  padding:10px clamp(16px,2.6vw,30px) 6px;pointer-events:none
}
/* The car shadow is painted as a blurred ellipse behind the image, NOT
   with filter:drop-shadow() on the <img>. On a raster this large,
   drop-shadow forces a render path that makes the image vanish outright
   on some engines. This ellipse is plain paint, so it always shows. */
.tteam__car::after{
  content:"";position:absolute;left:18%;right:18%;bottom:8px;height:13px;
  border-radius:50%;background:rgba(0,0,0,.5);filter:blur(9px);
  z-index:-1
}
/* height:auto is required. The height attribute is in the markup so the
   browser can reserve space before the image lands, but without this the
   attribute is also used as the final height and the car goes squat. */
.tteam__car img{
  width:100%;height:auto;
  transition:transform .5s var(--ease)
}
/* The card clips its overflow, so the hover move is vertical only. Scaling or
   sliding sideways here would cut the bumpers off again. */
.tteam:hover .tteam__car img,.tteam:focus-within .tteam__car img{transform:translateY(-4px)}
/* teams with no livery artwork: the silhouette is dimmed, not shadowed */
.tteam--nolivery .tteam__car img{opacity:.5}

/* The team colour is a top rule here rather than a fill: on light team
   colours (EKS silver) white text on a solid fill would not read. */
.tteam__flag{
  position:absolute;right:0;bottom:0;z-index:2;
  padding:7px 12px;border-top-left-radius:var(--r);
  border-top:2px solid rgb(var(--c));
  background:rgba(8,9,11,.78);color:rgba(255,255,255,.8);
  font-size:.5625rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase
}

/* data-source badge */
.tsrc{
  display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:3px;
  font-size:.5625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase
}
.tsrc--51gt3{color:#43d17f;background:rgba(6,18,11,.7)}
.tsrc--sample{color:rgb(var(--state-provisional));background:rgba(22,17,2,.7)}
/* alternate spelling of a team name: neutral, not a data-quality marker */
.tsrc--alt{color:rgba(255,255,255,.72);background:rgba(8,9,11,.7)}
/* Class chips inherit a translucent background from racing.css, which
   disappears over a coloured card, so here they get an opaque dark base. */
.tteam__top .cls,.tm__eyebrow .cls{background-color:rgba(8,9,11,.62)}

.tgrid--empty{display:block}

/* ---------- 5. detail modal ---------- */
/* Flex column with margin-top:auto on the sheet, NOT grid + place-items:end.
   Both bottom-align the sheet, but end-alignment puts any overflow off the
   TOP of the container where no scroll can reach it. An auto top margin
   collapses to 0 the moment the sheet is taller than the container, so the
   sheet starts at the top instead and every part of it stays reachable. */
.tmodal{
  position:fixed;inset:0;z-index:400;
  display:flex;flex-direction:column;
  padding:0
}
/* fixed, not absolute: the scrim must cover the viewport no matter where the
   sheet sits or how far its contents have scrolled */
.tmodal__scrim{
  position:fixed;inset:0;background:rgba(4,4,5,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .35s var(--ease)
}
.tmodal.is-on .tmodal__scrim{opacity:1}
.tmodal__box{
  position:relative;width:min(1080px,100%);
  margin:auto auto 0;
  /* dvh first, vh as the fallback for engines without it. On mobile, 1vh is
     a slice of the LARGE viewport (toolbars hidden), so a 94vh sheet is
     taller than the visible area whenever the browser chrome is showing:
     its lower edge, and the end of its scroll range with it, sits behind
     that chrome and cannot be reached. dvh tracks the visible height. */
  max-height:94vh;max-height:94dvh;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:#0d0e11;border:1px solid var(--line);
  border-radius:calc(var(--r) + 6px) calc(var(--r) + 6px) 0 0;
  transform:translateY(24px);opacity:0;
  transition:transform .4s var(--ease),opacity .3s var(--ease);
  overscroll-behavior:contain
}
.tmodal.is-on .tmodal__box{transform:none;opacity:1}

.tm__head{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(20px,3vw,34px);
  border-bottom:1px solid var(--line)
}
.tm__head::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(90% 130% at 100% -30%,rgb(var(--c) / .55),transparent 60%),
    linear-gradient(100deg,rgb(var(--c2) / .22),transparent 52%)
}
.tm__bar{position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,rgb(var(--c)),rgb(var(--c2)))}
.tm__close{
  position:absolute;right:14px;top:14px;z-index:4;
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:rgba(0,0,0,.42);color:#fff;
  transition:background-color var(--t1)
}
.tm__close:hover{background:rgba(0,0,0,.7)}
.tm__eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px;padding-left:12px}
.tm__title{padding-left:12px;font-size:clamp(1.5rem,1rem + 2vw,2.75rem);font-weight:700;line-height:1.02;letter-spacing:-.02em}
.tm__sub{padding-left:12px;margin-top:8px;font-size:.875rem;color:rgba(255,255,255,.6)}

.tm__car{position:relative;margin-top:clamp(6px,1.5vw,14px)}
/* same reason as .tteam__car::after */
.tm__car::after{content:"";position:absolute;left:10%;right:10%;bottom:6px;height:22px;border-radius:50%;background:rgba(0,0,0,.5);filter:blur(14px);z-index:-1}
.tm__car img{width:100%;height:auto}
.tm--nolivery .tm__car img{opacity:.5}

/* livery picker: only rendered when a team has more than one */
.tm__liv{display:flex;flex-wrap:wrap;gap:8px;padding:0 clamp(20px,3vw,34px) clamp(16px,2vw,22px)}

.tm__grid{
  display:grid;grid-template-columns:1.15fr 1fr;gap:1px;
  background:var(--line)
}
.tm__cell{background:#0d0e11;padding:clamp(18px,2.4vw,28px)}
.tm__cell--full{grid-column:1/-1}
.tm__k{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:14px}
.tm__about{font-size:.9375rem;line-height:1.62;color:rgba(255,255,255,.72);max-width:62ch}

.tm__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:16px}
.tm__fv{font-size:1.5rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.tm__fk{margin-top:6px;font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42)}

.tm__drv{display:grid;gap:10px}
.dcard{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;background:rgba(255,255,255,.02)
}
.dcard__no{
  display:grid;place-items:center;min-width:44px;height:38px;border-radius:4px;
  background:rgb(var(--c));color:#fff;
  font-size:1.0625rem;font-weight:700;font-variant-numeric:tabular-nums
}
.dcard__b{min-width:0}
.dcard__n{font-weight:700;font-size:1rem}
.dcard__m{margin-top:3px;display:flex;align-items:center;gap:8px;font-size:.75rem;color:rgba(255,255,255,.5)}

.tm__spon{display:flex;flex-wrap:wrap;gap:8px}
.spon{
  display:inline-flex;align-items:center;height:30px;padding:0 12px;
  border:1px solid var(--line);border-radius:999px;
  font-size:.8125rem;color:rgba(255,255,255,.72)
}
.tm__none{font-size:.875rem;color:rgba(255,255,255,.4)}

/* ---------- 6. summary table ---------- */
.tsum{max-width:var(--wrap);margin-inline:auto;padding:clamp(24px,3.5vw,48px) var(--pad) clamp(48px,7vw,96px)}
.dt__sw{display:inline-block;width:10px;height:10px;border-radius:2px;background:rgb(var(--c));margin-right:10px;vertical-align:-1px}
.dt__link{display:inline-flex;align-items:center;gap:8px}
.dt tbody tr.is-row{cursor:pointer}

/* ---------- 7. reduced motion ---------- */
.no-motion .tteam:hover,.no-motion .tteam:focus-within{transform:none}
.no-motion .tteam:hover .tteam__car img{transform:none}
.no-motion .tmodal__box{transition:none;transform:none}
@media (prefers-reduced-motion:reduce){
  .tteam:hover,.tteam:focus-within{transform:none}
  .tteam:hover .tteam__car img{transform:none}
  .tmodal__box{transition:opacity .2s linear;transform:none}
}

/* ---------- 8. responsive ---------- */
@media (min-width:1500px){
  .tgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1000px){
  .tm__grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .thead__top{align-items:flex-start;flex-direction:column}
  .tgrid{grid-template-columns:1fr}
  .tbar__count{margin-left:0}
}
@media (max-width:520px){
  .tteam__stats{gap:16px}
  .tmodal__box{max-height:96vh;max-height:96dvh}
  .tm__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}