/* ==========================================================================
   Neighborhood Cutz  ·  neighborhoodcutz.com

   Design and development by NORTH CODE LLC
   https://northcodellc.com  ·  hello@northcodellc.com

   Copyright (c) 2026 North Code LLC. All rights reserved.
   Original work, licensed to Neighborhood Cutz for use on this domain.
   Not to be copied, republished or adapted for another site without
   written consent.
   ========================================================================== */

/* BARBER GRID */

/* ============================================================
   11. BARBER GRID
   Three across. Five barbers plus a "next available" card fills
   six cells evenly, so no chair is stranded on a short bottom row
   and nobody has to scroll sideways to be seen.
   ============================================================ */
/* minmax(0, 1fr), not plain 1fr.
   `1fr` is shorthand for `minmax(auto, 1fr)`, and that `auto` floor means a
   track can never shrink below its widest item's automatic minimum width. One
   stubborn item therefore steals width from its siblings. A zero minimum
   forces all three tracks to stay equal no matter what lands in them.
   (The specific offender here was the "next available chair" card, which is
   fixed at source too. This rule is the general guard.) */
.barber-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-md) var(--gap-col);
}
/* Belt and braces: keeps long content inside its cell instead of widening it. */
.barber-grid > * { min-width: 0; }

@media (max-width: 991px) { .barber-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2em var(--gap-col); } }
@media (max-width: 479px) { .barber-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5em .75em; } }

.barber-card { display: block; }
.barber-thumb-wrap { position: relative; aspect-ratio: 3/4; display: grid; place-items: center; background: #ededed; overflow: hidden; }
.barber-thumb {
  width: 100%; height: 100%; object-fit: cover;
  background-size: cover; background-position: center top;
  transition: width .6s cubic-bezier(.16,1,.3,1), height .6s cubic-bezier(.16,1,.3,1);
}
.barber-card:hover .barber-thumb { width: calc(100% - 1em); height: calc(100% - 1em); }
.barber-thumb-wrap .crop { opacity: .08; transition: opacity .8s cubic-bezier(.16,1,.3,1); }
.barber-card:hover .barber-thumb-wrap .crop { opacity: 1; }

.barber-flag {
  position: absolute; top: .75em; left: .75em; z-index: 2;
  background: var(--c-brand); color: #fff; padding: .35em .5em;
  font-size: .625em; letter-spacing: .08em; line-height: 1;
}
.barber-bottom { padding-top: .75em; }
.barber-title { display: flex; flex-direction: column; gap: .2em; }
.barber-book {
  display: inline-block; margin-top: .5em; font-size: var(--t-tag);
  letter-spacing: .06em; border-bottom: 1px solid currentColor; padding-bottom: .15em;
  opacity: 0; transform: translateY(.3em);
  transition: opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1), color .3s ease;
}
.barber-card:hover .barber-book { opacity: 1; transform: translateY(0); color: var(--c-brand); }

/* No-photo card that fills the sixth cell. Useful in its own right:
   plenty of customers want the soonest chair, not a specific barber. */
.barber-any {
  display: flex; flex-direction: column; justify-content: space-between; gap: 2em;
  /* No aspect-ratio here on purpose. As a grid item this card already
     stretches to the row height, so the ratio never applied to its rendered
     height, but it DID feed the automatic minimum width calculation during
     track sizing and inflated its column. A plain min-height does the same
     visual job with none of that side effect. */
  min-height: 14em;
  border: 1px solid var(--c-dark); padding: 1.25em;
  transition: background .4s cubic-bezier(.16,1,.3,1), color .4s cubic-bezier(.16,1,.3,1), border-color .4s cubic-bezier(.16,1,.3,1);
}
.barber-any:hover { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.barber-any-head { font-family: var(--font-display); font-weight: 700; font-size: 1.5em; line-height: 1.05; letter-spacing: -.03em; }
.barber-any .mute { transition: color .4s ease; }
.barber-any:hover .mute { color: rgba(255,255,255,.75); }

/* Touch devices have no hover, so show the affordances outright. */
@media (hover: none) {
  .barber-thumb-wrap .crop { opacity: .35; }
  .barber-book { opacity: 1; transform: none; }
}

/* Sub-line inside the "next available chair" card. Replaces what used to be
   an inline style, so the spacing is editable here with everything else. */
.barber-any-sub { display: block; padding-top: .75em; }