/* karaj1705 theme — "the inspection lane".
   Motif: asphalt + road-marking yellow, the plate, the blue road sign from the
   yard photo, the stamped ticket. Tokens extend core.css; sections below.
   Type: Lalezar (signage lettering, display roles only) + Vazirmatn (everything else). */

@font-face {
  font-family: 'Lalezar';
  src: url('../fonts/lalezar-display.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* Same glyph set as the subset (tools/build-fonts.js PERSIAN_DISPLAY): Latin and
     anything else fall through to Vazirmatn instead of a fallback mix inside a word. */
  unicode-range: U+0020-0021, U+0028-0029, U+002C-002E, U+003A, U+00AB, U+00BB, U+060C, U+061B, U+061F,
    U+0621-0628, U+062A-063A, U+0641-0642, U+0644-0648, U+067E, U+0686, U+0698, U+06A9, U+06AF, U+06C0, U+06CC,
    U+06F0-06F9, U+200C-200F;
}

:root {
  --font-display: 'Lalezar', var(--font);
  --c-sign: #0f58a8;          /* the yard's blue info sign (see hero photo) */
  --c-on-sign: #ffffff;
  --c-on-sign-2: #dfe8f5;
  --c-open: #4cc26b;          /* "slots free today", on asphalt */
  --c-amber: #f0a43a;         /* "today is full", on asphalt (8.0:1) */
  --wrap: 75rem;
  --overlap: var(--s-6);      /* how far the booking sheet rides up over the road */
  --section: clamp(3.5rem, 2rem + 4vw, 5.5rem);
  --t-display: clamp(1.9rem, 1.35rem + 2vw, 2.75rem);
}
@media (min-width: 40rem) { :root { --overlap: var(--s-7); } }
@media (min-width: 64rem) { body { font-size: 1.0625rem; } }

/* Display role: one heavy weight only, never synthesised. */
.display, .hero__title, .board__time, .fines__title {
  font-family: var(--font-display); font-weight: 400; font-synthesis: none; text-wrap: balance;
}
.display { font-size: var(--t-display); line-height: 1.45; }

/* Lane dashes edging an asphalt band (road-marking motif). */
.lane-edge::before, .fines::before, .foot::before {
  content: ''; position: absolute; inset-inline: 0; top: 0; height: 5px;
  background: repeating-linear-gradient(to left, var(--c-accent) 0 2.5rem, transparent 2.5rem 4rem);
}

/* ---------- Top bar ---------- */
.top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-4);
  padding: var(--s-2) var(--gutter); background: var(--c-dark); color: var(--c-on-dark);
  border-block-end: 1px solid var(--c-dark-2);
}
.top__brand { justify-self: start; display: inline-flex; align-items: center; gap: var(--s-3); color: inherit; text-decoration: none; font-weight: 700; min-height: 2.75rem; }
.top__name { font-size: var(--t-sm); white-space: nowrap; }
.top__title { display: none; font-size: .95rem; font-weight: 600; color: var(--c-on-dark-2); white-space: nowrap; }
.top__call { justify-self: end; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; color: var(--c-on-dark); font-weight: 700; text-decoration: none; white-space: nowrap; }
.top__call bdi { border-block-end: 2px solid var(--c-accent); line-height: 1.5; }
/* Wide: the full official name sits centred; the short name next to the badge would repeat it. */
@media (min-width: 60rem) { .top__title { display: block; } .top__name { display: none; } }
/* Phones: badge + phone only (the hero names the centre right below). */
@media (max-width: 30rem) { .top__name { display: none; } }
@media (max-width: 21rem) { .top__call-word { display: none; } }

/* Center code set as a small plate */
.code-plate {
  display: inline-flex; align-items: stretch; height: 1.9rem; overflow: hidden; flex: none;
  background: #fff; color: #16181a; border: 2px solid #fff; border-radius: var(--r-2);
}
.code-plate__band { width: .6rem; background: var(--c-plate-blue); }
.code-plate__num { display: grid; place-items: center; padding-inline: .55rem; font-weight: 900; font-size: 1.05rem; line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- Hero ---------- */
.hero { background: var(--c-dark); color: var(--c-on-dark); display: grid; }
.hero__text { padding: var(--s-6) var(--gutter) var(--s-7); }
.hero__title { font-size: clamp(3rem, 1.5rem + 6.4vw, 5.75rem); line-height: 1.12; color: var(--c-on-dark); }
.hero__sub { margin-block: var(--s-3) var(--s-4); color: var(--c-on-dark-2); font-weight: 500; line-height: 1.75; }
.hero__code { color: var(--c-accent); font-weight: 800; white-space: nowrap; }
.hero__promise { font-size: var(--t-lg); line-height: 1.85; max-width: 34ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-block-start: var(--s-6); }
.btn-ticket--hero { min-height: 3.75rem; padding-inline: 2.75rem; font-size: 1.25rem; --notch: 10px; }
.hero__today { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-on-dark-2); font-size: var(--t-sm); }
/* The dot states the same thing as the sentence: filled green = free slots today; amber ring = today is full. */
.hero__today::before { content: ''; width: .62rem; height: .62rem; border-radius: 50%; flex: none; box-sizing: border-box; }
.hero__today.is-open::before { background: var(--c-open); }
.hero__today.is-full::before { border: 2px solid var(--c-amber); }
.hero__alt { margin-block-start: var(--s-5); color: var(--c-on-dark-2); font-size: var(--t-sm); }
.hero__phone { color: var(--c-on-dark); font-weight: 700; }
.hero__photo { position: relative; }
.hero__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 30rem) { .btn-ticket--hero { width: 100%; } }
@media (min-width: 60rem) {
  /* The header carries the official name and code here. */
  .hero__sub { display: none; }
  .hero__promise { margin-block-start: var(--s-4); }
}
@media (min-width: 64rem) {
  .hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  /* The block sizes to its content and sits optically centred in its column;
     the text inside stays right-aligned (RTL start). */
  .hero__text { justify-self: center; align-self: center; max-width: 36rem; padding: var(--s-8) var(--gutter) calc(var(--s-9) + var(--s-2)); }
  .hero__photo { grid-column: 2; grid-row: 1; min-height: 36rem; }
  .hero__photo picture, .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .hero__img { object-position: 50% 42%; }
}

/* ---------- Road scene: the one authored moment ----------
   Gate closed → (strip on screen) gate lifts → car revs, settles → drives through
   and leaves the frame. Once per page view, transforms only. */
.road {
  --cw: clamp(6rem, 24cqw, 13rem);     /* car width */
  --gw: clamp(4.75rem, 17cqw, 9.5rem); /* gate width */
  --gate-at: 34cqw;                    /* gate box from the inline-end edge */
  --dir: 1;                            /* RTL: drive toward the left (inline-end) */
  --exit: calc(-1 * var(--dir) * (100cqw + 2rem));
  --past: calc(-1 * var(--dir) * (91cqw - var(--cw)));   /* parked just past the gate */
  --t: 3.8s;
  grid-column: 1 / -1;
  position: relative; height: calc(clamp(5.25rem, 3.5rem + 5vw, 8.5rem) + var(--overlap));
  container-type: inline-size;
  overflow-x: clip; overflow-y: visible; /* the exiting car never adds scroll; the raised arm may rise above */
  background: var(--c-dark-2); border-block-start: 3px solid #e9e7df;
}
[dir='ltr'] .road { --dir: -1; }
[dir='ltr'] .road__car svg { scale: -1 1; }
.road__lane { position: absolute; inset-inline: 0; bottom: calc(var(--overlap) + .45rem); width: 100%; height: 6px; overflow: visible; }
.road__lane line { stroke: var(--c-accent); stroke-width: 5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.road__gate { position: absolute; inset-inline-end: var(--gate-at); bottom: calc(var(--overlap) + 1.15rem); width: var(--gw); }
.road__gate svg { overflow: visible; }
.gate__post { fill: #d9d7d0; }
.gate__sign { fill: #fff; stroke: #16181a; stroke-width: 1.5; }
.gate__code { font: 900 10px var(--font); fill: #16181a; text-anchor: middle; }
.gate__bar { fill: #f4f2ec; }
.gate__stripes { fill: #c8281e; }
.gate__hub { fill: #16181a; }
.gate__arm { transform-box: view-box; transform-origin: 13px 34px; animation: gate-lift var(--t) linear both; }
.road__car { position: absolute; inset-inline-start: 5cqw; bottom: calc(var(--overlap) + .9rem); width: var(--cw); animation: car-drive var(--t) linear both; }
.car__paint { fill: #f4f3ef; stroke: #16181a; stroke-width: 2; }
.car__glass { fill: #44525d; }
.car__line { fill: none; stroke: #9ea3a3; stroke-width: 1.4; }
.car__lamp { fill: var(--c-accent); }
.car__tail { fill: #c8281e; }
.car__handle { fill: #9ea3a3; }
.wheel__tyre { fill: #16181a; }
.wheel__rim { fill: #c4c8cc; }
.wheel__spokes { stroke: #6b7175; stroke-width: 2.4; stroke-linecap: round; }
.car__body { transform-box: view-box; transform-origin: 166px 64px; animation: car-rev var(--t) linear both; }
.car__wheel { transform-box: fill-box; transform-origin: center; animation: wheel-spin var(--t) linear both; }
.car__puffs circle { fill: #9aa0a3; opacity: 0; transform-box: fill-box; transform-origin: center; animation: puff .7s ease-out both; }
.car__puffs circle:nth-child(1) { animation-delay: .72s; }
.car__puffs circle:nth-child(2) { animation-delay: .92s; }
.car__puffs circle:nth-child(3) { animation-delay: 1.1s; }

/* 0–20% gate lifts · 18–34% engine revs and settles · 34–100% accelerates through and exits. */
@keyframes gate-lift {
  0% { transform: rotate(0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  20%, 100% { transform: rotate(-80deg); }
}
@keyframes car-drive {
  0%, 34% { transform: translateX(0); animation-timing-function: cubic-bezier(.55, 0, .85, .4); }
  100% { transform: translateX(var(--exit)); }
}
@keyframes wheel-spin {
  0%, 34% { transform: rotate(0); animation-timing-function: cubic-bezier(.55, 0, .85, .4); }
  100% { transform: rotate(calc(var(--dir) * -1800deg)); }
}
@keyframes car-rev {
  0%, 18% { transform: rotate(0); }
  21% { transform: rotate(-1deg) translateY(-.6px); }
  25% { transform: rotate(.5deg); }
  29% { transform: rotate(-.8deg) translateY(-.4px); }
  33% { transform: rotate(0); }
  40% { transform: rotate(2deg); }       /* launch: nose lifts */
  58% { transform: rotate(.3deg); }
  72%, 100% { transform: rotate(0); }
}
@keyframes puff {
  0% { opacity: 0; transform: scale(.4) translate(0, 0); }
  30% { opacity: .75; }
  100% { opacity: 0; transform: scale(2.4) translate(6px, -3px); }
}
/* With JS: everything holds at frame 0 (gate closed, car waiting) until the strip
   is on screen (core/public/js/inview.js); also covers "already in view on load". */
.js .road:not(.is-playing) :is(.road__car, .car__body, .car__wheel, .gate__arm, .car__puffs circle) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .road__car, .car__body, .car__wheel, .gate__arm, .car__puffs circle { animation: none !important; }
  .road__car { transform: translateX(var(--past)); }
  .gate__arm { transform: rotate(-80deg); }
}

/* ---------- Booking: the one lifted sheet, overlapping the road ---------- */
.booking { position: relative; z-index: 1; padding-inline: var(--s-2); scroll-margin-top: var(--s-4); }
.booking:focus { outline: none; }
.booking__sheet {
  max-width: var(--wrap); margin: calc(-1 * var(--overlap)) auto 0;
  padding: var(--s-5) var(--s-4) var(--s-6);
  background: var(--c-surface); border-radius: var(--r-3); box-shadow: var(--sh-lift);
}
.booking__head { margin-block-end: var(--s-6); padding-block-end: var(--s-4); border-block-end: 1.5px solid var(--c-line); }
.booking__intro { color: var(--c-ink-2); margin-block-start: var(--s-1); max-width: 60ch; }

@media (min-width: 40rem) {
  .booking { padding-inline: var(--gutter); }
  .booking__sheet { padding: var(--s-6) clamp(1.5rem, 4vw, 3.5rem) var(--s-7); }
  .booking__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-6); flex-wrap: wrap; }
}
@media (min-width: 64rem) {
  .bk__steps {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 5rem);
    grid-template-areas: 'days details' 'slots details';
    align-items: start;
  }
  .bk-days { grid-area: days; }
  #bk-slots { grid-area: slots; }
  .details { grid-area: details; position: sticky; top: var(--s-4); }
  #bk-slots::before { display: none; }
}

/* ---------- Yard band (full bleed, breaks the column grid) ---------- */
.band { max-width: 90rem; margin: var(--section) auto 0; }
.band__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 48rem) { .band__img { aspect-ratio: 1500 / 520; } }

/* ---------- Hours + documents ---------- */
.info { max-width: var(--wrap); margin: var(--section) auto 0; padding-inline: var(--gutter); display: grid; gap: var(--s-6); }
/* Dominant element: the hours, set like the blue info sign in the yard. */
.board {
  background: var(--c-sign); color: var(--c-on-sign); border-radius: var(--r-2);
  padding: var(--s-6) var(--s-5) var(--s-5);
  outline: 3px solid var(--c-on-sign); outline-offset: -10px;
}
.board__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s-4); padding-block: var(--s-2); }
.board__row + .board__row { border-block-start: 2px solid rgb(255 255 255 / .35); }
.board__days { font-size: var(--t-md); font-weight: 700; }
.board__time { font-size: clamp(2.6rem, 1.6rem + 4.6vw, 4.6rem); line-height: 1.35; }
.board__note { margin-block-start: var(--s-3); color: var(--c-on-sign-2); font-size: var(--t-sm); }
.docs { align-self: start; padding: var(--s-4) var(--s-5); border: 1.5px solid var(--c-line-strong); border-radius: var(--r-1); background: var(--c-surface); }
.docs__title { font-size: var(--t-md); font-weight: 800; margin-block-end: var(--s-2); }
.checks li { position: relative; padding-inline-start: 2.1rem; line-height: 1.8; font-size: var(--t-lg); font-weight: 700; }
.checks li + li { margin-block-start: var(--s-2); }
.checks li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: .42em; width: 1.2rem; height: 1.2rem;
  border: 2px solid var(--c-ink); border-radius: 2px; background: var(--c-surface);
}
.info__hall { width: 100%; max-width: 24rem; }
@media (min-width: 64rem) {
  .info { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); row-gap: var(--s-5); align-items: start; }
  .info__title { grid-column: 1 / -1; }
  .board { grid-column: 1 / span 7; grid-row: 2 / span 2; padding: var(--s-7) var(--s-6) var(--s-6); }
  .docs { grid-column: 8 / -1; grid-row: 2; }
  .info__hall { grid-column: 8 / -1; grid-row: 3; max-width: none; }
}

/* ---------- Fines: a reason to book, not a footnote ---------- */
.fines { position: relative; margin-block-start: var(--section); background: var(--c-dark); color: var(--c-on-dark); }
.fines__in {
  max-width: var(--wrap); margin-inline: auto; padding: calc(var(--section) - var(--s-2)) var(--gutter) var(--section);
  display: grid; gap: var(--s-6); align-items: center;
}
.fines__title { font-size: clamp(2.3rem, 1.3rem + 4vw, 4rem); line-height: 1.3; color: var(--c-accent); }
.fines__lead { margin-block-start: var(--s-4); font-size: var(--t-lg); line-height: 1.85; max-width: 38ch; }
.fines__more { margin-block: var(--s-3) var(--s-6); color: var(--c-on-dark-2); max-width: 46ch; }
.fines__img { width: 100%; max-width: 37.5rem; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 64rem) {
  .fines__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--s-8); }
  .fines__img { justify-self: end; }
}

/* ---------- Address ---------- */
.where {
  max-width: var(--wrap); margin: var(--section) auto; padding-inline: var(--gutter);
  display: grid; gap: var(--s-5); grid-template-areas: 'title' 'text' 'photo';
}
.where__title { grid-area: title; }
.where__text { grid-area: text; }
.where__img { grid-area: photo; width: 100%; }
.where__addr { font-size: var(--t-lg); font-weight: 700; line-height: 1.85; max-width: 30ch; }
.where__call {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 3rem; margin-block: var(--s-4) var(--s-5);
  padding-inline: var(--s-4); border: 2px solid var(--c-dark); border-radius: var(--r-1);
  color: var(--c-ink); font-weight: 800; text-decoration: none;
}
.where__call:hover { background: var(--c-dark); color: var(--c-on-dark); }
.where__maps-label { font-weight: 700; margin-block-end: var(--s-2); }
.maps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); max-width: 26rem; }
.maps li:last-child { grid-column: 1 / -1; }
@media (min-width: 30rem) { .maps { grid-template-columns: repeat(3, auto); justify-content: start; max-width: none; } .maps li:last-child { grid-column: auto; } }
.maps__btn {
  display: flex; align-items: center; justify-content: center; gap: .65rem; min-height: 3rem; min-width: 7rem;
  padding-inline: var(--s-4); border: 1.5px solid var(--c-line-strong); border-radius: var(--r-1); background: var(--c-surface);
  color: var(--c-ink); font-weight: 700; text-decoration: none;
}
.maps__btn:hover { border-color: var(--c-dark); }
/* Official brand files, shown as-is: fixed square box, natural proportions, clear space via the gap. */
.maps__logo { width: 1.5rem; height: 1.5rem; flex: none; object-fit: contain; }
.maps__btn--google { direction: ltr; }
@media (min-width: 64rem) {
  .where { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'title photo' 'text photo'; column-gap: var(--s-7); align-items: start; }
  .where__img { height: 100%; max-height: 32rem; object-fit: cover; align-self: stretch; }
}

/* ---------- Footer ---------- */
.foot { position: relative; background: var(--c-dark); color: var(--c-on-dark-2); padding: var(--s-7) var(--gutter) var(--s-6); display: grid; gap: var(--s-5); }
.foot__id { display: grid; gap: var(--s-3); justify-items: start; }
.foot__name { font-family: var(--font-display); font-weight: 400; font-synthesis: none; font-size: var(--t-lg); line-height: 1.6; color: var(--c-on-dark); }
.foot__code { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--c-accent); font-weight: 700; }
.foot__contact { display: grid; gap: var(--s-1); justify-items: start; }
.foot__addr { max-width: 42ch; line-height: 1.85; }
.foot__call { color: var(--c-on-dark); font-weight: 700; min-height: 2.75rem; display: inline-flex; align-items: center; }
.foot__domain { font-size: var(--t-sm); }
@media (min-width: 64rem) {
  .foot { grid-template-columns: 1fr 1fr; align-items: start; padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
}