/* ============================================================
   ELEMENT Barbershop — styles.css
   Phase 1: mobile hero (visuals only)

   STRUCTURE
   1. Fonts            — self-hosted woff2 (Inter Tight 900 = headline,
                          Inter variable 400–700 = everything else)
   2. Design tokens    — colors, type, spacing, radii, shadows, widths
   3. Base / reset
   4. Layout           — .container
   5. Components       — header/nav, hero, rating, media, info bar

   TOKENS AT A GLANCE
   Colors ........ --bg --ink --muted --surface --blue --red --yellow
   Type .......... --font-display --font-body --text-* (fluid via clamp)
   Spacing ....... --space-2xs … --space-2xl (rem scale) + --gutter
   Radii ......... --radius-md (controls) --radius-lg (cards/media)
   Widths ........ --content-max (mobile content column)
   Elevation ..... --shadow-card

   EXTENDING TO TABLET / DESKTOP
   Everything below is the mobile base. Add additive blocks only:

     @media (min-width: 48em) { …tablet adjustments… }
     @media (min-width: 64em) { …desktop: widen --content-max,
                                place media beside lockup, etc.… }

   Prefer retuning tokens (--content-max, --text-display, --gutter)
   inside those queries over overriding component rules.
   ============================================================ */


/* ============ 1. FONTS ============ */

/* Headline — Inter Tight Black. Latin subset is preloaded (LCP). */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/intertight-900-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+2070-209F, U+20AC, U+2122;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/intertight-900-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Body / UI — Inter variable (one file per script covers 400–700) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+2070-209F, U+20AC, U+2122;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-var-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


/* ============ 2. DESIGN TOKENS ============ */

:root {
  /* Color — accents match the logo SVG exactly (#1B4FD8 / #E63329 / #F5C200)
     so the wordmark and UI never show two slightly different brand hues */
  --bg:      #F5F1EA;   /* warm cream */
  --ink:     #111111;   /* near-black text */
  --muted:   #69655E;   /* warm gray, ≥4.5:1 on --bg */
  --surface: #FFFFFF;   /* cards */
  --blue:    #1B4FD8;   /* CTA, logo accent, headline period */
  --blue-deep: #1641B5; /* CTA hover */
  --red:     #E63329;   /* "element", red rule, pin */
  --yellow:  #F5C200;   /* stars, accents */
  --hairline: rgb(17 17 17 / 0.12);   /* dividers */

  /* Type */
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  /* Display size: floor keeps "was missing." on one line at 320px,
     ceiling keeps the lockup proportions of the design on large phones */
  --text-display: clamp(2.125rem, 9.5vw + 0.25rem, 3rem);
  --text-lg:   1.0625rem;  /* subtitle, CTA label */
  --text-md:   1rem;       /* default body */
  --text-sm:   0.875rem;   /* secondary info */
  --text-xs:   0.75rem;    /* eyebrow */

  /* Spacing (rem scale, 4px rhythm) */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --gutter: clamp(1.25rem, 5vw, 2rem);   /* fluid inline page padding */

  /* Shape & elevation */
  --radius-md: 0.75rem;    /* buttons, hamburger */
  --radius-lg: 1.25rem;    /* photo, info card */
  --shadow-card: 0 1px 2px rgb(17 17 17 / 0.04),
                 0 10px 30px rgb(17 17 17 / 0.07);

  /* Layout */
  --content-max: 30rem;    /* mobile content column cap */
  --tap-target: 2.75rem;   /* 44px minimum touch size */
}


/* ============ 3. BASE / RESET ============ */

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ============ 4. LAYOUT ============ */

.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 1px strip at the very top of the page; js/main.js watches it
   to toggle [data-scrolled] on the header */
.scroll-sentinel {
  position: absolute;
  inset-block-start: 0;
  width: 1px;
  height: 1px;
}


/* ============ 5. COMPONENTS ============ */

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

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  background: transparent;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* Hook for the later "solidify on scroll" effect — kept subtle */
.site-header[data-scrolled] {
  background: var(--bg);
  box-shadow: 0 1px 0 var(--hairline);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  /* extra room above keeps the wordmark breathing against the viewport edge */
  padding-block: var(--space-lg) var(--space-md);
}

.nav__logo {
  display: block;
  /* generous tap area without inflating the wordmark */
  padding-block: var(--space-xs);
}

.nav__logo-svg {
  /* ~50% of viewport width, matching the mockup's logo-dominant header */
  width: clamp(9rem, 48vw, 12rem);
  height: auto;
}

.nav__menu-btn {
  display: grid;
  place-content: center;
  gap: 5px;
  inline-size: var(--tap-target);
  block-size: var(--tap-target);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}

.nav__menu-bar {
  inline-size: 1.25rem;
  block-size: 3px;
  border-radius: 999px;
}

.nav__menu-bar--blue   { background: var(--blue); }
.nav__menu-bar--red    { background: var(--red); }
.nav__menu-bar--yellow { background: var(--yellow); }


/* ----- Hero ----- */

.hero {
  /* lets the deco cluster bleed off-edge without a scrollbar;
     `clip` (unlike `hidden`) doesn't create a scroll container */
  overflow-x: clip;
  padding-block: var(--space-lg) var(--space-2xl);
}

/* Eyebrow → CTA block, with the red editorial rule on the left */
.hero__lockup {
  position: relative;
  padding-inline-start: var(--space-lg);
}

.hero__lockup::before {
  content: "";
  position: absolute;
  inset-block: 0.25em 0;
  inset-inline-start: 0;
  width: 3px;   /* hairline-class fixed detail */
  background: var(--red);
}

.hero__eyebrow {
  color: var(--blue);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.hero__title {
  margin-block-start: var(--space-md);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-display);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.hero__title-accent { color: var(--red); }
.hero__title-period { color: var(--blue); }

.hero__actions {
  /* positioning context for the deco cluster */
  position: relative;
  margin-block-start: var(--space-lg);
}

.hero__sub {
  color: var(--muted);
  font-size: var(--text-lg);
  line-height: 1.55;
  /* reserve the right edge for the deco cluster — text never runs under it */
  padding-inline-end: clamp(3.5rem, 18vw, 5.5rem);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-block-size: var(--tap-target);
  border-radius: var(--radius-md);
  font-weight: 700;
  text-decoration: none;
}

.btn--primary {
  background: var(--blue);
  color: var(--surface);
  font-size: var(--text-lg);
  padding: var(--space-sm) var(--space-xl);
  transition: background-color 0.2s ease, translate 0.2s ease, box-shadow 0.2s ease;
}

/* hover-capable devices only — avoids sticky hover states on touch */
@media (hover: hover) {
  .btn--primary:hover {
    background: var(--blue-deep);
    translate: 0 -1px;
    box-shadow: 0 6px 16px rgb(27 79 216 / 0.28);
  }
}

.btn--primary:active {
  translate: 0;
  box-shadow: none;
}

.btn__arrow {
  transition: translate 0.2s ease;
}

.btn--primary:hover .btn__arrow,
.btn--primary:focus-visible .btn__arrow {
  translate: 0.25rem 0;
}

.hero__cta {
  margin-block-start: var(--space-lg);
  /* wide thumb target, capped so it never reaches the deco cluster */
  inline-size: min(100%, 15rem);
}

/* Bauhaus deco cluster — fixed px sizes by design (decorative, never
   layout-affecting); scaled as one unit at narrow widths below */
.hero__deco {
  position: absolute;
  /* raised so the circle tops out level with the last headline line's bottom —
     no vertical overlap with text at any width, even at the larger type scale */
  inset-block-start: -1.5rem;
  inset-inline-end: -0.5rem;
  width: 88px;
  height: 118px;
  transform-origin: top right;
  transform: scale(0.7);
}

.hero__deco > * {
  position: absolute;
  display: block;
}

.hero__deco-circle {
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--red);
}

.hero__deco-square {
  inset-block-start: 40px;
  inset-inline-start: 40px;
  width: 48px;
  height: 48px;
  background: var(--ink);
}

.hero__deco-square-sm {
  inset-block-start: 88px;
  inset-inline-start: 40px;
  width: 28px;
  height: 28px;
  background: var(--yellow);
}

.hero__deco-dot {
  inset-block-start: 96px;
  inset-inline-start: 20px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--blue);
}

/* Additive steps only — base above is the 320px size */
@media (min-width: 22.5em) {   /* 360px */
  .hero__deco { transform: scale(0.85); }
}
@media (min-width: 24.375em) { /* 390px */
  .hero__deco { transform: scale(1); }
}


/* ----- Rating row ----- */

.hero__rating {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  /* a touch more air than the scale step — the rating needs its own moment
     after the red rule stops at the CTA */
  margin-block-start: calc(var(--space-xl) + var(--space-xs));
  padding-inline-start: var(--space-lg);  /* aligns with the lockup text */
}

.hero__rating-stars {
  color: var(--yellow);
  font-size: 1.25rem;
  letter-spacing: 0.1em;
}

.hero__rating-score {
  font-size: 1.25rem;
  font-weight: 700;
}

.hero__rating-divider {
  inline-size: 1px;
  block-size: 1.5em;
  background: var(--hairline);
}

.hero__rating-count {
  color: var(--muted);
  font-size: var(--text-md);
}


/* ----- Hero photo ----- */

.hero__media {
  margin-block-start: var(--space-lg);
}

.hero__media img {
  inline-size: 100%;
  /* neutralize the height="" attribute so aspect-ratio can size the box */
  block-size: auto;
  /* landscape crop of the near-square source; fixed ratio = zero CLS */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* bias the crop toward the sofa + checker pillows (lower part of the
     source); the 4:3 window only crops vertically, so x stays centered */
  object-position: 50% 72%;
  border-radius: var(--radius-lg);
}


/* ----- Info bar (hours + address) ----- */

.info-bar {
  display: grid;
  /* content-sized halves pushed to the edges, hairline divider between —
     keeps both values on a single line even at 320px */
  grid-template-columns: auto 1px auto;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xs);
  margin-block-start: var(--space-md);
  padding: var(--space-md) var(--space-sm);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* center divider */
.info-bar::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  inline-size: 1px;
  block-size: 100%;
  background: var(--hairline);
}

.info-bar__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-block-size: var(--tap-target);
  text-decoration: none;
}

.info-bar__item:first-child { grid-column: 1; }
.info-bar__item--link       { grid-column: 3; }

.info-bar__icon {
  flex-shrink: 0;
  inline-size: clamp(1.25rem, 6vw, 2rem);
  block-size: auto;
}

.info-bar__icon--blue { color: var(--blue); }
.info-bar__icon--red  { color: var(--red); }

.info-bar__text {
  display: grid;
  gap: var(--space-2xs);
}

.info-bar__value {
  font-size: clamp(0.75rem, 3.6vw, 0.9375rem);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.info-bar__sub {
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.2;
}

/* quiet external-link indicator */
.info-bar__ext {
  color: var(--red);
  font-weight: 400;
}