/* home.css — layout that only the home page needs. */

.hero{min-height:calc(100vh - 96px);display:flex;align-items:center}
.hero .wrap{width:100%}

/* Desktop only: the two halves of the hero start on the same line, so the logo
   and pole line up with the top of the photograph instead of floating above it.
   The columns are evened up too, which makes the photograph taller and brings
   the bottoms closer together.

   This has to be inside a min-width query. `.hero .split` is more specific than
   the `.split` rule that collapses to one column in base.css, so left unscoped
   it would keep the hero two-up on a phone. */
@media(min-width:861px){
  .hero .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
/* The logo and the barber pole stand side by side at the top of the page.
   The pole is set a little taller than the logo so it reads as standing
   beside it rather than sitting level with it. */
.hero-lockup{display:flex;align-items:center;gap:clamp(16px,2.6vw,30px);margin-bottom:30px}
.hero-logo{width:clamp(132px,17vw,215px);height:auto}
.hero-pole{height:clamp(150px,19vw,245px);width:auto;flex:none;
  filter:drop-shadow(0 12px 22px rgba(168,4,6,.2))}
/* The photograph keeps its own 3:4 shape — stretching it to match the column
   exactly would crop the sides off the shop front, which is worth more than a
   level bottom edge. No height cap, so it comes out as tall as the column allows. */
.hero-photo{aspect-ratio:3/4;margin-inline:auto;width:100%}
.hero .lede{margin-top:22px}

/* the three-up strip under the hero */
.quicklinks{display:grid;gap:clamp(12px,1.5vw,18px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.quicklink{display:block;padding:30px 30px 32px;border-radius:var(--r-lg);background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--surface-bd);
  transition:transform .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease)}
.quicklink:hover{transform:translateY(-7px);background:rgba(220,3,3,.09);
  box-shadow:inset 0 0 0 1px rgba(220,3,3,.36),0 26px 54px -26px rgba(0,0,0,.6)}
.quicklink h3{display:flex;align-items:center;justify-content:space-between;gap:12px}
.quicklink h3 svg{width:18px;height:18px;flex:none;color:var(--red);
  transition:transform .38s var(--ease)}
.quicklink:hover h3 svg{transform:translateX(5px)}
.quicklink p{font-size:.95rem;line-height:1.62;opacity:.82;margin-top:10px}

@media(max-width:860px){
  .hero{min-height:0}
  .hero-photo{aspect-ratio:4/3;max-height:38vh}
  /* Everything in the hero centres up on a phone. */
  .hero .wrap{text-align:center}
  .hero-lockup{justify-content:center}
  .hero .lede{margin-inline:auto}
  .hero .ctas,.hero .pills{justify-content:center}
  .hero .eyebrow{justify-content:center}
  .quicklink h3{justify-content:center;gap:10px}
  .quicklink p{margin-inline:auto;max-width:34ch}
  .quicklinks{text-align:center}
}