/*
  Reusable component styles.

  Design tokens (colors/fonts) come from public/css/global.css.
  Values below are transcribed from Figma file CkFpoWvEBh0qngqYBpUhow,
  node 2465:147 "Home", mobile frame at 430px width. Tablet/desktop
  breakpoints are not yet defined by Figma — mobile styles apply
  unconditionally until those are provided.
*/

/* ---------- Site header / Nav Bar ---------- */
.site-header {
  position: relative;
  z-index: 60;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  max-width: 912px;
  margin-inline: auto;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

.site-logo__wordmark {
  font-family: var(--font-wordmark);
  font-size: 30px;
  line-height: normal;
  color: var(--color-cream);
  white-space: nowrap;
}

.site-logo__mark {
  display: block;
  width: 25.6px;
  height: 30.2px;
}

/* ---------- Primary navigation ---------- */
.primary-nav {
  position: relative;
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 48px;
  height: 48px;
  padding: 12px;
  border: 0;
  border-radius: 999px;
  background: var(--color-cream);
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 3px;
  border-radius: 999px;
  background: var(--color-ink);
}

.nav-panel[hidden] {
  display: none;
}

.nav-panel {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  background: var(--color-lime);
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.nav-panel.is-open {
  opacity: 1;
}

.nav-panel__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  max-width: 912px;
  margin-inline: auto;
  padding: 24px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.nav-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 12px;
  border: 0;
  border-radius: 999px;
  background: var(--color-ink);
  cursor: pointer;
}

.nav-panel__list {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 912px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  list-style: none;
  flex: 1;
}

.nav-panel__list a {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 100px;
  line-height: 80px;
  letter-spacing: -5px;
  color: var(--color-ink);
  text-decoration: none;
}

/* Bold weight marks the current page — mirrors body[data-page] everywhere
   else on the site. Team member pages count as "BARBERS". */
body[data-page="home"] .nav-panel__list a[data-nav-page="home"],
body[data-page="to-koureio-mas"] .nav-panel__list a[data-nav-page="to-koureio-mas"],
body[data-page="ypiresies"] .nav-panel__list a[data-nav-page="ypiresies"],
body[data-page="i-omada-mas"] .nav-panel__list a[data-nav-page="i-omada-mas"],
body[data-page="team-giorgos"] .nav-panel__list a[data-nav-page="i-omada-mas"],
body[data-page="team-spyros"] .nav-panel__list a[data-nav-page="i-omada-mas"],
body[data-page="team-dimitris"] .nav-panel__list a[data-nav-page="i-omada-mas"],
body[data-page="gallery"] .nav-panel__list a[data-nav-page="gallery"],
body[data-page="merch"] .nav-panel__list a[data-nav-page="merch"],
body[data-page="epikoinonia"] .nav-panel__list a[data-nav-page="epikoinonia"] {
  font-weight: 800;
}

.nav-panel__cta {
  height: 64px;
  width: calc(100% - 48px);
  max-width: 912px;
  margin: 24px auto;
  flex-shrink: 0;
  font-size: 24px;
  text-align: center;
  box-sizing: border-box;
}

/*
  TODO (pending Figma tablet/desktop breakpoints): once provided, the nav
  should switch from toggle-controlled to always-visible / horizontal at
  the appropriate viewport width, e.g.:

  @media (min-width: <breakpoint-from-figma>) {
    .nav-toggle { display: none; }
    .nav-panel[hidden] { display: flex; }
    .nav-panel { position: static; flex-direction: row; }
  }
*/

/*
  ---------- Site footer (site-wide, every page) ----------
  Built from the Figma Home frame's Reviews / Social / Date & Time /
  Contact sections — these are the shared <footer> now, replacing the
  earlier plain-text NAP footer (nav links, full postal address and
  copyright were dropped along with it; see SEO-MIGRATION.md for the
  history of what that footer used to contain).
*/
.site-footer {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 912px;
  margin-inline: auto;
  padding: 40px 0 24px;
  box-sizing: border-box;
}

/* ---- Reviews ---- */
.reviews {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 0 24px;
  text-align: left;
}

.reviews__skull {
  width: 118px;
  height: 140px;
  flex-shrink: 0;
}

.reviews__text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 35px;
  letter-spacing: -2px;
  color: var(--color-cream);
  margin: 0;
}

.reviews .link-button {
  margin-top: 8px;
}

/* ---- Social ---- */
.social {
  display: flex;
  gap: 12px;
  width: 100%;
  padding: 0 24px;
  box-sizing: border-box;
}

.social-button {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  border: 2px solid var(--color-cream);
  border-radius: 24px;
  color: var(--color-cream);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.96px;
}

.social-button__icon {
  width: 32px;
  height: 32px;
}

/* ---- Social block wrapper (Social buttons + Date & Time) ---- */
.social-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.hours-wrap {
  width: 100%;
  padding: 0 24px;
  box-sizing: border-box;
}

.hours {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 16px 24px;
  background: var(--color-mint);
  border-radius: 24px;
  box-sizing: border-box;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -1.2px;
  text-align: center;
  white-space: nowrap;
}

.hours p {
  margin: 0;
}

/* ---- Contact block (phone / email) ---- */
.contact-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 24px;
  box-sizing: border-box;
}

.contact-block__row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-cream);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -1.6px;
  white-space: nowrap;
}

/* ---------- Floating Book Now bar (site-wide) ---------- */
.floating-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  padding: 16px 0;
  background: linear-gradient(to top, var(--color-ink), transparent);
}

@supports (backdrop-filter: blur(1px)) {
  .floating-cta {
    backdrop-filter: blur(7px);
  }
}

/* ---------- Buttons / CTA ---------- */
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 32px;
  border-radius: 16px;
  border: 2px solid transparent;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.72px;
  text-decoration: none;
  cursor: pointer;
}

.cta-button--dark {
  background: var(--color-ink);
  color: var(--color-cream);
}

.cta-button--cream {
  background: var(--color-cream);
  color: var(--color-ink);
}

.cta-button--outline {
  background: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.cta-button--primary {
  height: 56px;
  padding: 0 32px;
  width: auto;
  white-space: nowrap;
  background: var(--color-lime);
  border-color: var(--color-ink);
  color: var(--color-ink);
  font-size: 22px;
  letter-spacing: -0.88px;
}

.link-button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.9px;
  color: var(--color-cream);
  text-decoration: none;
  white-space: nowrap;
}

.link-button--lime {
  color: var(--color-lime);
}

.link-button--dark {
  color: var(--color-ink);
}

.link-button__icon {
  width: 18px;
  height: 18px;
}

/* ---------- Tagline (large wordmark-font headline) ---------- */
.tagline {
  width: 100%;
  margin: 0;
  padding: 0 24px;
  box-sizing: border-box;
  font-family: var(--font-wordmark);
  font-size: 64px;
  line-height: 56px;
  letter-spacing: -3.2px;
  color: var(--color-lavender);
  text-align: center;
}

/* ---------- Section header (title + optional link button) ---------- */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 0 24px;
}

.section-header__title {
  flex: 1 1 0%;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -2px;
  color: var(--color-cream);
  margin: 0;
}

/* ---------- Services price card ---------- */
.services-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 382px;
  max-width: calc(100% - 48px);
}

.services-card .section-header {
  padding: 0;
}

.services-card .services-table td,
.services-card .services-table th {
  color: var(--color-cream);
}

/* ---------- Barbers row ---------- */
.barbers {
  width: 100%;
}

.barber-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  width: 280px;
}

.barber-card__info {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.barber-card__photo {
  width: 56px;
  height: 70px;
  border: 2px solid var(--color-ink);
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}

.barber-card__name-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.barber-card__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 52px;
  line-height: 44px;
  letter-spacing: -2.6px;
  margin: 0;
}

.barber-card__role {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  margin: 0;
}

.barber-card .cta-button--outline {
  width: 100%;
}

/* ---------- Barber overlay (bottomsheet on mobile, modal on desktop) ---------- */
.barber-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
}

.barber-overlay.is-visible {
  display: block;
}

.barber-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.barber-overlay.is-open .barber-overlay__backdrop {
  opacity: 1;
}

.barber-overlay__sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90vh;
  display: flex;
  flex-direction: column;
  border-radius: 24px 24px 0 0;
  padding: 16px 24px 24px;
  box-sizing: border-box;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.barber-overlay.is-open .barber-overlay__sheet {
  transform: translateY(0);
}

/* The visible bar is 48x4px, but that's far too small a real touch target
   for a reliable swipe-down gesture — the element itself is much taller
   (44px, matching standard minimum touch-target guidance) with the bar
   drawn centered inside via ::before, so tapping/swiping near it (not
   just the 4px line itself) still registers. */
.barber-overlay__handle {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: 44px;
  margin: -14px 0 2px;
}

.barber-overlay__handle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 4px;
  border-radius: 999px;
  background: var(--color-ink);
  opacity: 0.4;
}

.barber-overlay__close {
  display: none;
}

.barber-overlay__photo {
  flex: none;
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
  margin-bottom: 16px;
}

.barber-overlay__info {
  flex-shrink: 0;
  text-align: center;
}

.barber-overlay__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 52px;
  line-height: 1;
  margin: 0;
}

.barber-overlay__role {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  margin: 8px 0 0;
}

.barber-overlay__since {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  margin: 4px 0 0;
}

.barber-overlay__bio {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  margin: 12px 0 16px;
}

.barber-overlay__info .cta-button {
  width: 100%;
}

.barber-overlay__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

/* BOOK NOW text matches each barber's own card background color, so it
   reads as a subtle tone-on-tone label rather than plain cream everywhere. */
.barber-overlay__sheet.card--cream .barber-overlay__info .cta-button--dark {
  color: var(--color-cream);
}

.barber-overlay__sheet.card--mint .barber-overlay__info .cta-button--dark {
  color: var(--color-mint);
}

.barber-overlay__sheet.card--lavender .barber-overlay__info .cta-button--dark {
  color: var(--color-lavender);
}

@media (min-width: 768px) {
  .barber-overlay__sheet {
    left: 50%;
    top: 50%;
    bottom: auto;
    width: 500px;
    min-height: 268px;
    height: auto;
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
    border-radius: 16px;
    padding: 24px;
    overflow: visible;
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .barber-overlay.is-open .barber-overlay__sheet {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  .barber-overlay__handle {
    display: none;
  }

  .barber-overlay__close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }

  .barber-overlay__photo {
    flex: none;
    width: 220px;
    height: auto;
    align-self: stretch;
    margin-bottom: 0;
  }

  .barber-overlay__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
  }

  .barber-overlay__info .cta-button {
    width: auto;
    align-self: flex-start;
  }
}

/* ---------- Text card (paragraph copy on a card background) ---------- */
.text-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.text-card p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: normal;
  margin: 0;
}

.text-card a {
  color: inherit;
}

/* ---------- FAQ CTA card (Home teaser only, not the full accordion) ---------- */
.faq-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  max-width: calc(100% - 48px);
}

.faq-cta__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: normal;
  margin: 0;
}

.faq-cta__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: normal;
  margin: 0;
}

/* ---------- FAQ accordion (shared: /faq/ full list + contextual subsets) ---------- */
.faq {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  min-width: 0;
}

.faq > .link-button {
  margin: 0 24px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 0 24px;
  box-sizing: border-box;
}

.faq-item {
  border-bottom: 1px solid rgba(243, 240, 221, 0.2);
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__question-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--color-cream);
}

.faq-item__question::after {
  content: '+';
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 32px;
  line-height: 1;
  color: var(--color-lime);
  transition: transform 0.2s ease;
}

.faq-item[open] .faq-item__question::after {
  transform: rotate(45deg);
}

.faq-item__answer {
  padding-bottom: 14px;
}

.faq-item__answer p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-cream);
  opacity: 0.85;
}

.faq-item__answer a {
  color: var(--color-lime);
  text-decoration: underline;
}

/* ---------- Lightbox (tap-to-enlarge, shared across Works/Gallery/Our
   Shop/Merch photos) ---------- */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  align-items: center;
  justify-content: center;
}

.lightbox.is-visible {
  display: flex;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.lightbox.is-open .lightbox__backdrop {
  opacity: 1;
}

.lightbox__content {
  position: relative;
  z-index: 1;
  max-width: calc(100% - 48px);
  max-height: calc(100% - 48px);
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.lightbox.is-open .lightbox__content {
  transform: scale(1);
  opacity: 1;
}

.lightbox__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 48px);
  border-radius: 12px;
  object-fit: contain;
}

.lightbox__close {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 12px;
  border: 0;
  border-radius: 999px;
  background: var(--color-ink);
  cursor: pointer;
}

[data-lightbox-trigger] {
  cursor: zoom-in;
}

/* ---------- Reviews (auto-rotating, dashed card) ---------- */
/* Full-width flex wrapper so .reviews-card's max-width:calc(100% - 48px)
   resolves against a stable value — without this, the wrapper shrink-wraps
   to its child in the flex-column main, making "100%" self-referential and
   capping the card ~48px too narrow. */
.reviews-section {
  display: flex;
  justify-content: center;
  width: 100%;
}

.reviews-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 382px;
  max-width: calc(100% - 48px);
  box-sizing: border-box;
  padding: 24px;
  border-radius: 24px;
}

/* Native CSS `border-style: dashed` has no way to control dash/gap length —
   an SVG rect with stroke-dasharray draws the rounded dashed border instead,
   sized to the card via width/height:100%. */
.reviews-card__border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.reviews-card__border rect {
  fill: none;
  stroke: var(--color-cream);
  stroke-width: 2;
  stroke-dasharray: 10 10;
}

.reviews-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -2px;
  color: var(--color-cream);
  margin: 0;
}

.review-row {
  display: flex;
  width: calc(100% + 24px);
  margin-right: -24px;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.review-row::-webkit-scrollbar {
  display: none;
}

.review-item {
  flex: 0 0 270px;
  width: 270px;
  box-sizing: border-box;
  scroll-snap-align: start;
}

.review-item__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  color: var(--color-cream);
  text-transform: uppercase;
  margin: 0 0 8px;
}

.review-item__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-cream);
  margin: 0;
}

/* ---------- Works-style horizontal photo row (Home Works, Merch rows) ---------- */
.works {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  min-width: 0;
  padding: 0 24px;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* .section-header already carries its own 0 24px padding by default —
   avoid doubling it now that .works itself provides the same inset. */
.works .section-header {
  padding: 0;
}

.works__slider {
  position: relative;
  width: 100%;
}

.works__photo {
  width: 246px;
  height: 246px;
  border-radius: 12px;
  object-fit: cover;
}

.merch-item {
  flex-shrink: 0;
  width: 246px;
  margin: 0;
}

.merch-item__label {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-cream);
}

/* ---------- Address ---------- */
.address {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 24px;
  text-align: center;
}

.address__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.address p,
.address__area {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -2px;
  color: var(--color-cream);
  margin: 0 0 -10px;
  white-space: nowrap;
}

.address__area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: -10px;
}

.address__star {
  width: 40px;
  height: 40px;
}

.address p:last-child {
  margin-bottom: 0;
}

/* ---------- Photo grid (responsive: 2 cols mobile, more as it grows) ---------- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  padding: 0 24px;
  box-sizing: border-box;
}

.photo-grid__item {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  object-fit: cover;
}

@media (min-width: 600px) {
  .photo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .photo-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Cards (team members, services, gallery items) ---------- */
.card {
  border-radius: 16px;
  padding: 24px;
}

.card--cream {
  background: var(--color-cream);
  color: var(--color-ink);
}

.card--mint {
  background: var(--color-mint);
  color: var(--color-ink);
}

.card--lavender {
  background: var(--color-lavender);
  color: var(--color-ink);
}

.card--outline {
  border: 2px solid var(--color-cream);
  color: var(--color-cream);
}

/* Horizontally-scrolling row (Works photo slider, Barbers cards) —
   the Figma layout is wider than the 430px mobile frame by design, so
   this is a native swipeable strip on mobile. */
.scroll-row {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge/IE */
}

/*
  NOTE: no separate barbers row centering rule — the site max-width
  (912px) exactly equals the 3 barber cards' natural width
  (3×280 + 2×12 gap + 2×24 spacer = 912px), so there's never any spare
  space to center within; the row simply fits with zero slack at
  max-width and behaves like the Works row otherwise: left-aligned,
  starts at the first card, scrollable below that width.
*/

.scroll-row::-webkit-scrollbar {
  display: none; /* Chrome, Safari, newer Edge */
}

.scroll-row > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* 24px leading/trailing inset via real spacer <div> elements in the HTML
   (see .scroll-row__spacer usage in src/pages/index.html) — not padding
   or margin on the row/first-child, which proved unreliable in testing. */
.scroll-row__spacer {
  flex: 0 0 12px;
}

/* ---------- Scroll row prev/next nav buttons ---------- */
.scroll-row__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  background: var(--color-ink);
  border: 2px solid var(--color-cream);
  cursor: pointer;
}

.scroll-row__nav--prev {
  left: -10px;
}

.scroll-row__nav--prev img {
  transform: rotate(180deg);
}

.scroll-row__nav--next {
  right: -10px;
}

.scroll-row__nav:disabled {
  cursor: default;
}

.scroll-row__nav:disabled img {
  opacity: 0.48;
}

/* ---------- Services / price table ---------- */
.services-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-display);
}

.services-table th,
.services-table td {
  text-align: left;
  padding: 4px 0;
  font-size: 18px;
}

.services-table td:last-child,
.services-table th:last-child {
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Gallery grid ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

/* ---------- Placeholder media ---------- */
.placeholder-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e5e5e5;
  color: #666;
  font-size: 0.875rem;
  text-align: center;
}