/* Шофьорски курсове в Шумен – Владимир Хинев
   One loud thing: the car-door lettering. Everything else is quiet. */

:root {
  --white: #ffffff;   /* the car */
  --black: #000000;   /* the door vinyl */
  --blue: #1f6fd6;    /* the learner sign */
  --asphalt: #4a5057; /* secondary text */
  --glass: #eef1f3;   /* one quiet surface */

  --display: "Fira Sans Extra Condensed", "Arial Narrow", sans-serif;
  --text: "Fira Sans", system-ui, sans-serif;

  --pad: clamp(20px, 5vw, 64px);
  --block: clamp(72px, 9vw, 128px);
  --max: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  background: var(--white); color: var(--black);
  font: 400 1.125rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
}
img, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { max-width: 62ch; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
::selection { background: var(--blue); color: var(--white); }

.skip { position: absolute; left: 8px; top: -60px; padding: 10px 14px; background: var(--black); color: var(--white); z-index: 10; }
.skip:focus { top: 8px; }

/* shared frame */
.top, main > section, .foot {
  width: 100%; max-width: calc(var(--max) + 2 * var(--pad));
  margin-inline: auto; padding-inline: var(--pad);
}

h2 {
  font: 600 clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem)/1 var(--display);
  letter-spacing: -0.005em; margin-bottom: 0.6em; text-wrap: balance;
}
h3 { font: 500 1.25rem/1.3 var(--text); }

.text-link { text-decoration-thickness: 2px; text-underline-offset: 4px; }
.text-link:hover { color: var(--blue); }

.btn {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px;
  background: var(--blue); color: var(--white); border-radius: 4px;
  font: 500 1.125rem/1 var(--text); text-decoration: none;
  transition: background-color 150ms ease-out, transform 120ms ease-out;
}
.btn:hover { background: #185bb0; }
.btn:active { transform: scale(0.97); }

/* ---------- top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 28px; padding-block: 12px;
  background: var(--white);
}
.top__nav { margin-left: auto; }
.top__cta { display: flex; align-items: center; gap: 20px; }
.btn--small { min-height: 44px; padding: 0 20px; font-size: 1rem; }
/* phone: a call bar always within thumb reach */
.dock { display: none; }
.top__name { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; text-decoration: none; }
.u {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 3px;
  background: var(--blue); color: var(--white); font: 700 1.25rem/1 var(--text);
}
.top__nav { display: flex; gap: 28px; }
.top__nav a { text-decoration: none; }
.top__nav a:hover { color: var(--blue); }

/* ---------- hero: the door lettering ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px);
  align-items: center; padding-block: clamp(32px, 6vw, 88px) clamp(48px, 6vw, 80px);
}
.hero__text { container-type: inline-size; min-width: 0; }
.hero h1 { display: grid; gap: 18px; font-weight: 400; }
.door {
  font: italic 700 min(12.5cqi, 8rem)/0.86 var(--display);
  letter-spacing: -0.01em;
}
.door > span { display: block; white-space: nowrap; }
.hero__what { font: 500 clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem)/1.3 var(--text); max-width: 24ch; }
.phone {
  display: inline-block; margin-top: clamp(28px, 4vw, 48px);
  font: italic 700 min(14cqi, 7.5rem)/0.9 var(--display);
  letter-spacing: 0.005em; white-space: nowrap;
  text-decoration: none; transition: color 150ms ease-out;
}
.phone:hover { color: var(--blue); }
.hero__lede { margin-top: 24px; max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.hero__car { align-self: stretch; }
.hero__car img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; object-position: 30% 50%; border-radius: 4px; }

/* ---------- about ---------- */
.about {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px);
  align-items: start; padding-block: var(--block);
}
.about__face img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 4px; }
.about__text p + p { margin-top: 1em; }

/* ---------- course ---------- */
.course {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 6vw, 96px);
  padding-block: var(--block);
}
.course h2, .course__intro, .steps { grid-column: 1; }
.course__intro { margin-bottom: 40px; }
.steps { list-style: none; counter-reset: step; display: grid; gap: 28px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3.25rem 1fr; column-gap: 16px; }
.steps li::before {
  content: counter(step); grid-row: 1 / 3;
  font: italic 700 2.75rem/0.9 var(--display); color: var(--blue);
}
.steps h3 { margin-bottom: 4px; }
.steps p { color: var(--asphalt); }
.course__photos { grid-column: 2; grid-row: 1 / 4; display: grid; gap: 28px; align-content: start; padding-top: 8px; }
.course__photos img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.course__photos figcaption { margin-top: 8px; font-size: 0.9375rem; color: var(--asphalt); }

/* ---------- refresher hours ---------- */
.refresh { padding-block: var(--block) 0; }

/* ---------- contact ---------- */
.contact { padding-block: var(--block); }
.contact h2 { margin-bottom: 0; }
.contact { container-type: inline-size; }
.phone--end { margin-top: 12px; margin-bottom: 24px; font-size: min(17cqi, 8.5rem); }

/* ---------- footer ---------- */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 32px 40px; font-size: 0.9375rem; color: var(--asphalt); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--blue); }

/* ---------- the one moment: lettering applied to the door ---------- */
@media (prefers-reduced-motion: no-preference) {
  .door, .hero .phone { animation: apply 900ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  .hero .phone { animation-delay: 300ms; }
  @keyframes apply {
    from { clip-path: inset(0 100% 0 0); transform: translateX(-12px); }
    to { clip-path: inset(0 0 0 0); transform: none; }
  }
}

/* ---------- smaller screens ---------- */
@media (max-width: 900px) {
  .hero, .about, .course { grid-template-columns: 1fr; }
  .hero__car img { min-height: 0; aspect-ratio: 16 / 10; }
  .about__face { max-width: 320px; }
  .course__photos { grid-column: 1; grid-row: auto; grid-template-columns: 1fr 1fr; margin-top: 48px; }
}
@media (max-width: 560px) {
  body { font-size: 1.0625rem; padding-bottom: 72px; }
  .top__nav, .top__cta { display: none; }
  .dock {
    position: fixed; inset: auto 0 0 0; z-index: 30;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: var(--white); box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
  }
  .dock a {
    display: grid; place-items: center; min-height: 52px; border-radius: 4px;
    font: 500 1.0625rem/1 var(--text); text-decoration: none;
  }
  .dock__call { background: var(--blue); color: var(--white); }
  .dock__msg { background: var(--glass); color: var(--black); }
  .dock a:active { transform: scale(0.97); }
  .course__photos { grid-template-columns: 1fr; }
}

/* agency credit (as on ecosolar-bg.com): hover floods a chamfered 8ight-indigo plate and tilts the 8 into 3D */
.foot { align-items: center; }
.footer-credit { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; margin-right: -14px; color: var(--asphalt); text-decoration: none; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); transition: background-color 150ms, color 150ms; }
.foot .footer-credit:hover, .footer-credit:focus-visible { background: #635de3; color: #fff; }
.footer-credit:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
.fc-logo { display: flex; align-items: center; gap: 2.9px; color: var(--black); opacity: 0.75; transition: opacity 150ms, color 150ms; }
.footer-credit:hover .fc-logo, .footer-credit:focus-visible .fc-logo { opacity: 1; color: #fff; }
.fc-mark { position: relative; width: 22px; height: 22px; transform-style: preserve-3d; transform: perspective(80px); transition: transform 450ms cubic-bezier(.2, .8, .2, 1); }
.fc-mark svg { position: absolute; left: 0; top: 0; width: 88px; height: 88px; transform-origin: 0 0; fill: hsl(244 40% calc(80% - var(--i) * 0.8%)); transform: translateZ(calc((7.5 - var(--i)) * 0.5px)) scale(.25); }
.fc-mark svg:first-child, .fc-mark svg:last-child { fill: currentColor; }
.footer-credit:hover .fc-mark, .footer-credit:focus-visible .fc-mark { transform: perspective(80px) rotateX(-9deg) rotateY(27deg) rotateZ(-2deg); }
.fc-word { height: 22px; width: auto; display: block; }
@media (max-width: 560px) { .footer-credit { margin: 0 0 0 -14px; } .foot__long { display: none; } }
@media (prefers-reduced-motion: reduce) { .fc-mark { transition: none; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }