/* Moe's Mobile Detailing, homepage hero.

   This began as the WEBSITE MOCKUP (HOMEPAGE) panel of brand/brand-kit-3.0.png,
   measured off the panel's own pixels. The captain has since ruled on top of
   it: no eyebrow line, one button only, the phone in the header, and real
   vertical breathing room rather than the panel's packed 2.307 to 1 crop.
   Where a value departs from the panel, that ruling is why.

   Colours, spacing and radius come from tokens.css. Nothing is restated here. */

@import url("tokens.css");

/* ------------------------------------------------------------------ base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--panel-dark);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 3px;
}

/* The blue the kit sets text in on a dark ground. It is not Royal Blue: the
   panel's own pixels are lighter than that, and Royal Blue on this ground
   measures 2.5 to 1, which no one could read. Mixed from the two palette
   blues so the page still holds to six colours. Measures 5.9 to 1. */
:root {
  --hero-blue: color-mix(in srgb, var(--royal) 55%, var(--ice));
  --hero-inset: 3.6%; /* the panel's own left and right margin */
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  /* opened up from the panel's 2.307 to 1 on the captain's instruction:
     the hero should feel unhurried, not packed */
  aspect-ratio: 1.8 / 1;
  max-height: 92vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("img/hero-car.webp");
  background-size: 132% auto;
  background-position: 86% 64%;
  background-repeat: no-repeat;
  /* The kit shoots this car dark and hard, wet ground, bright edges. Moe's
     own frame was taken in daylight, so it is graded toward that here rather
     than swapped for something that is not his. */
  filter: contrast(1.35) brightness(1.1) saturate(0.8);
}

/* Navy over the photograph, heavy on the left where the words sit and
   thinning to the right so the car stays in the picture. */
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      94deg,
      rgba(3, 11, 22, 0.99) 0%,
      rgba(4, 15, 30, 0.97) 30%,
      rgba(6, 22, 42, 0.86) 44%,
      rgba(8, 28, 52, 0.58) 60%,
      rgba(10, 32, 58, 0.3) 78%,
      rgba(10, 32, 58, 0.18) 100%
    ),
    linear-gradient(
      180deg,
      rgba(3, 11, 22, 0.9) 0%,
      rgba(3, 11, 22, 0.3) 26%,
      rgba(3, 11, 22, 0) 46%
    ),
    linear-gradient(0deg, rgba(3, 11, 22, 0.5) 0%, rgba(3, 11, 22, 0) 26%),
    linear-gradient(0deg, rgba(12, 35, 64, 0.22), rgba(12, 35, 64, 0.22));
}

.hero__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--hero-inset);
}

/* ------------------------------------------------------------------- nav */

.nav {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding-top: clamp(21px, 1.806vw, 26px);
  padding-bottom: var(--s3);
}

.nav__logo img {
  height: clamp(59px, 5vw, 72px);
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(39px, 3.333vw, 48px);
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.nav__links a {
  font-size: clamp(10.7px, 0.903vw, 13px);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
  transition: color 120ms linear;
}

.nav__links a:hover {
  color: var(--ice);
}

.nav__phone {
  margin-left: clamp(39px, 3.333vw, 48px);
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--white);
  white-space: nowrap;
  transition: color 120ms linear;
}

/* the phone glyph is an affordance for the number, so it takes the number's
   own size and colour and nothing more */
.phoneglyph {
  width: 0.95em;
  height: 0.95em;
  flex: none;
}

.nav__phone:hover {
  color: var(--ice);
}

.nav__book {
  margin-left: clamp(20px, 1.7vw, 26px);
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: clamp(11.5px, 0.972vw, 14px);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--r-tile);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 140ms linear, border-color 140ms linear;
}

.btn--fill {
  background: var(--royal);
  color: var(--white);
}

.btn--fill:hover {
  background: color-mix(in srgb, var(--royal) 84%, var(--white));
}

.btn--outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.62);
}

.btn--outline:hover {
  border-color: var(--white);
}

.btn--nav {
  height: clamp(41px, 3.472vw, 50px);
  padding: 0 clamp(21px, 1.806vw, 26px);
  font-size: clamp(10.2px, 0.868vw, 12.5px);
}

.btn--hero {
  height: clamp(45px, 3.819vw, 55px);
  padding: 0 var(--s4);
  min-width: clamp(193px, 16.389vw, 236px);
}

.hero__actions .btn--fill {
  min-width: clamp(220px, 18.681vw, 269px);
}

/* ------------------------------------------------------------ hero words */

.hero__body {
  display: flex;
  align-items: center;
}

.hero__copy {
  max-width: 50%;
}

.hero__eyebrow {
  margin: 0;
  font-size: clamp(12.3px, 1.042vw, 15px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hero-blue);
}

.hero__headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(39px, 3.333vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--white);
}

.hero__headline span {
  display: block;
  color: var(--hero-blue);
}

.hero__lede {
  margin: clamp(28px, 2.4vw, 36px) 0 0;
  max-width: 30em;
  font-size: clamp(14.7px, 1.25vw, 18px);
  line-height: 1.7;
  color: var(--silver);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: clamp(36px, 3.2vw, 48px);
}

/* ----------------------------------------------------------------- strip */

.strip {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(4, 14, 28, 0.5);
}

.strip__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 25px var(--hero-inset) 25px;
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
}

.strip__item {
  margin: 0;
}

/* the hairline between facts separates, which is the only job a rule gets */
.strip__item + .strip__item {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding-left: clamp(16px, 2.2vw, 32px);
}

.strip__item b {
  display: block;
  font-size: clamp(13.1px, 1.111vw, 16px);
  font-weight: 700;
  letter-spacing: 0.055em;
  white-space: nowrap;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--white);
}

.strip__item span {
  display: block;
  font-size: clamp(12.3px, 1.042vw, 15px);
  line-height: 1.45;
  color: var(--silver);
}

/* ------------------------------------------------------------- narrower */

@media (max-width: 1180px) {
  .hero {
    aspect-ratio: auto;
  }

  .hero__copy {
    max-width: 60%;
  }

  .hero__body {
    padding-top: 10%;
    padding-bottom: 12%;
  }

  .hero__headline {
    font-size: 40px;
  }
}

@media (max-width: 900px) {
  .nav__links,
  .nav__book {
    display: none;
  }

  .nav__phone {
    margin-left: auto;
  }

  .nav {
    padding-top: var(--s4);
    padding-bottom: var(--s3);
  }

  .hero__photo {
    background-position: 70% 58%;
  }

  .hero__photo {
    background-size: cover;
    background-position: 78% 62%;
  }

  .hero__photo::after {
    background:
      linear-gradient(
        180deg,
        rgba(4, 14, 28, 0.9) 0%,
        rgba(5, 18, 34, 0.82) 40%,
        rgba(7, 25, 46, 0.5) 72%,
        rgba(7, 25, 46, 0.42) 100%
      ),
      linear-gradient(0deg, rgba(12, 35, 64, 0.22), rgba(12, 35, 64, 0.22));
  }

  .hero__copy {
    max-width: none;
  }

  .hero__headline {
    font-size: 34px;
  }

  .strip__inner {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--s4) var(--s3);
    padding-top: var(--s4);
    padding-bottom: var(--s4);
  }

  .strip__item {
    flex: 0 0 calc(50% - var(--s2));
  }

  .strip__item + .strip__item {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 560px) {
  :root {
    --hero-inset: var(--s3);
  }

  .hero__headline {
    font-size: 29px;
  }

  .hero__lede {
    font-size: 16px;
  }

  .hero__actions .btn {
    flex: 1 1 100%;
  }

  .strip__item {
    flex: 0 0 100%;
  }

  .nav__logo img {
    height: 52px;
  }
}