/* Nadee Hair and Beauty Academy and Salon — page styles.
   Mobile-first. Values follow docs/03-design-spec.md; the selector map is in
   DESIGN-IMPLEMENTATION.md. Shared base (palette, type, focus) lives in tokens.css. */

/* 1. Page scaffolding ------------------------------------------------------ */
.wrap {
  width: min(100% - 2 * var(--gutter), var(--max-w));
  margin-inline: auto;
}
.section {
  padding-block: clamp(3rem, 8vw, 6rem);
  border-top: 1px solid var(--c-line);
}
.section h2 {
  font-size: calc(var(--fs-3) * var(--scale-heading));
  max-width: 40rem;
}
.section-intro {
  max-width: 40rem;
  margin: var(--s-3) 0 0;
  color: var(--c-muted);
}
html {
  scroll-padding-top: var(--header-h, 4.5rem);
}
/* The shared starter sizes the skip link by padding alone (41px measured); the
   QA target-size floor is 44px. */
.skip-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 2. Controls -------------------------------------------------------------- */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--s-6);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-0);
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--c-accent);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn-primary {
  background: var(--c-accent);
  color: var(--c-accent-ink);
}
.btn-secondary {
  background: transparent;
  color: var(--c-ink);
}
.btn-secondary:hover {
  background: var(--c-tint);
}
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  color: var(--c-ink);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}
.icon-button:hover {
  background: var(--c-tint);
}

/* 3. Header ---------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  min-height: 56px;
  padding-block: var(--s-1);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav {
  display: none;
}
.lang-switch {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-inline-start: auto;
  font-size: 0.8125rem;
  font-family: var(--font-display);
  font-weight: 600;
}
.lang-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s-1);
  color: var(--c-ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.lang-switch a[aria-current="true"] {
  border-bottom-color: var(--c-accent);
}
.header-cta {
  display: none;
}
.menu-toggle {
  flex: none;
}
/* Below the width where the Syne 800 wordmark, three native language labels and the
   menu button fit on one row (measured 467px in EN at the largest mobile sizes), the
   switcher takes its own row instead of overflowing the page. */
@media (max-width: 520px) {
  .lang-switch {
    order: 3;
    flex-basis: 100%;
    margin-inline-start: 0;
  }
  .menu-toggle {
    margin-inline-start: auto;
  }
}
@media (max-width: 360px) {
  .wordmark {
    font-size: 0.9375rem;
  }
  .lang-switch {
    gap: 2px;
    font-size: 0.75rem;
  }
  .lang-switch a {
    padding-inline: 2px;
  }
}
@media (min-width: 1024px) {
  .header-inner {
    gap: var(--s-6);
    padding-block: 0;
  }
  .site-nav {
    display: flex;
    gap: var(--s-6);
    margin-inline-start: var(--s-8);
  }
  .site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--c-ink);
    text-decoration: none;
    font-size: var(--fs-0);
  }
  .site-nav a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .header-cta {
    display: inline-flex;
    min-height: 44px;
  }
  .menu-toggle {
    display: none;
  }
}

/* 4. Drawer ---------------------------------------------------------------- */
.menu-drawer {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100dvh;
  margin: 0;
  padding: var(--s-6) var(--gutter);
  background: var(--c-bg);
  color: var(--c-ink);
  border: 0;
}
.menu-drawer::backdrop {
  background: rgb(23 23 23 / .5);
}
.menu-drawer[open] {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-block: var(--s-4);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.drawer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2);
  color: var(--c-ink);
  text-decoration: none;
}
.drawer-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.menu-drawer .lang-switch {
  order: 3;
  margin-inline-start: 0;
  margin-block-start: auto;
  flex-basis: auto;
}
.menu-drawer .btn-primary {
  order: 2;
  align-self: start;
}

/* 5. Hero — type-only with the course ticker (signature) ------------------- */
.hero {
  position: relative;
  overflow: hidden;
}
.hero-wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.hero-wash img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1);
  opacity: .12;
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--s-4);
  padding-block: clamp(2.5rem, 10vw, 5rem);
}
.hero-kicker {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--c-muted);
}
.hero-headline {
  overflow-wrap: anywhere;
  font-weight: 700;
  max-width: 36rem;
}
/* The shared font loader swaps the native display families in after first paint. On
   mobile the SI/TA headline wraps to three lines only once the real font is applied
   (measured CLS 0.32-0.35 mobile SI before this rule), which moves the whole hero.
   Reserving the final three-line height (1.25 line-height x 3) keeps the first paint
   the same size, so the section below does not jump. */
@media (max-width: 1023px) {
  html[data-lang="si"] .hero-headline,
  html[data-lang="ta"] .hero-headline {
    min-height: 3.75em;
  }
}
.hero-subline {
  margin: 0;
  max-width: 36rem;
  color: var(--c-muted);
}
/* Reserve the measured Sinhala line counts while its local fonts load. These
   minimums let larger text grow normally and do not clip translated content. */
html[data-lang="si"] .hero-headline { min-height: 3.75em; }
html[data-lang="si"] .hero-subline { min-height: 7em; }
@media (max-width: 360px) {
  html[data-lang="si"] .hero-subline { min-height: 8.75em; }
}
@media (min-width: 600px) {
  html[data-lang="si"] .hero-subline { min-height: 5.25em; }
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.hero-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
}
.hero-chips li {
  border: 1px solid var(--c-line);
  background: var(--c-tint);
  padding: var(--s-1) var(--s-3);
  font-size: var(--fs-0);
}

/* Signature: Beautician / Bridal Dresser / Hair Dresser.
   Mobile = horizontal strip under the subline; desktop = 10rem column whose grid row
   matches the h1, so it is vertically centred on the headline (spec §3/§4). */
.ticker {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-ticker);
  color: var(--c-ink);
}
.ticker li {
  padding-inline: var(--s-2);
}
.ticker li + li {
  border-inline-start: 1px solid var(--c-line);
}
.ticker li:first-child {
  padding-inline-start: 0;
}

/* One hero entrance: ticker 16px/240ms, then the headline 200ms (spec §2). */
@keyframes wb-ticker-in {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: none; }
}
@keyframes wb-headline-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .ticker {
    animation: wb-ticker-in var(--t-ticker) var(--ease) both;
  }
  .hero-headline {
    animation: wb-headline-in var(--t-headline) var(--ease) var(--t-ticker) both;
  }
}

@media (min-width: 1024px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: var(--hero-min-h);
  }
  .hero-grid {
    grid-template-columns: minmax(0, 36rem) var(--ticker-w);
    column-gap: var(--ticker-gap);
    padding-block: clamp(3rem, 7vw, 5rem);
  }
  .hero-kicker { grid-column: 1; grid-row: 1; }
  .hero-headline { grid-column: 1; grid-row: 2; }
  .ticker {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    flex-direction: column;
    align-items: flex-start;
  }
  .ticker li {
    padding-inline: 0;
    padding-block: var(--ticker-rule);
  }
  .ticker li + li {
    border-inline-start: 0;
    border-top: 1px solid var(--c-line);
  }
  .hero-subline { grid-column: 1; grid-row: 3; }
  .hero-actions { grid-column: 1; grid-row: 4; }
  .hero-chips { grid-column: 1; grid-row: 5; }
}

/* 6. About ----------------------------------------------------------------- */
.about-grid {
  display: grid;
  gap: var(--s-8);
}
.prose {
  max-width: 40rem;
}
.prose p {
  margin: var(--s-4) 0 0;
}
.about-highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  margin: var(--s-8) 0 0;
}
.about-highlights > div {
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-2);
}
.about-highlights dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-ticker);
  color: var(--c-muted);
}
.about-highlights dd {
  margin: var(--s-1) 0 0;
}
.about-figure {
  margin: 0;
}
@media (min-width: 1024px) {
  .about-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* 7. Services — single column list with the 11px rail labels -------------- */
.services-list {
  list-style: none;
  margin: var(--s-8) 0 0;
  padding: 0;
  max-width: 40rem;
  display: grid;
  gap: var(--s-6);
}
.services-item {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
}
.services-item:first-child {
  padding-top: 0;
  border-top: 0;
}
.svc-rail {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.svc-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-ticker);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.svc-rail-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-ticker);
  color: var(--c-ink);
}
.svc-body h3 {
  font-size: var(--fs-2);
}
.svc-body p {
  margin: var(--s-2) 0 0;
  color: var(--c-muted);
}
.services-note {
  max-width: 40rem;
  margin: var(--s-8) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
  color: var(--c-muted);
}

/* 8. Gallery — masonry with the authored ratios --------------------------- */
.gallery-grid {
  list-style: none;
  margin: var(--s-8) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}
/* Row spans are measured from the real tile heights in main.js; the 1px row
   unit and the zeroed row gap make "span = height + tile gap" exact. */
.gallery-grid.is-masonry {
  grid-auto-rows: 1px;
  row-gap: 0;
}
.gallery-item {
  align-self: start;
}
.gallery-link {
  position: relative;
  display: block;
  color: inherit;
}
.gallery-item img {
  width: 100%;
  height: auto;
}
.sample-badge {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  padding: 2px var(--s-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  line-height: 1.4;
  color: var(--c-accent-ink);
  background: rgb(23 23 23 / .7);
}
@media (min-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 9. Viewer ---------------------------------------------------------------- */
.lightbox {
  width: min(100% - 2 * var(--s-4), 72rem);
  max-width: 72rem;
  max-height: 92dvh;
  padding: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  border: 0;
  box-shadow: var(--shadow-lightbox);
}
.lightbox::backdrop {
  background: rgb(23 23 23 / .65);
}
.lightbox[open] {
  display: flex;
  flex-direction: column;
}
.viewer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--c-line);
}
.viewer-badge {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-ticker);
  color: var(--c-muted);
}
.viewer-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-surface);
}
.viewer-image img {
  max-height: 66dvh;
  width: auto;
  height: auto;
}
.viewer-bottom {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--c-line);
}
#viewer-caption {
  margin: 0;
  font-size: var(--fs-0);
  color: var(--c-muted);
}
.viewer-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-6);
}
.viewer-count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-ticker);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

/* 10. Contact -------------------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: var(--s-8);
}
.contact-rows {
  display: grid;
  gap: var(--s-4);
  margin: var(--s-8) 0 0;
}
.contact-rows > div {
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-2);
}
.contact-rows dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-ticker);
  color: var(--c-muted);
}
.contact-rows dd {
  margin: var(--s-1) 0 0;
}
.contact-rows a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.contact-hours {
  max-width: 40rem;
  margin: var(--s-8) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
  color: var(--c-muted);
}
.map-card {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding: var(--s-6);
  background: var(--c-tint);
}
.map-card__pin {
  color: var(--c-ink);
}
.map-card__label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
}
.map-card__query {
  margin: 0;
  font-size: var(--fs-0);
  color: var(--c-muted);
}
.map-card__load {
  justify-self: start;
}
.map-card__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  justify-self: start;
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.map-card__frame iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--c-line);
}
@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* 11. Footer and sticky CTA ------------------------------------------------ */
.site-footer {
  margin-bottom: var(--sticky-cta-h);
  padding-block: var(--s-12);
  border-top: 1px solid var(--c-line);
}
.footer-inner {
  display: grid;
  gap: var(--s-3);
}
.footer-wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
}
.footer-tagline {
  margin: 0;
  color: var(--c-muted);
}
.footer-notice {
  max-width: 48rem;
  margin: 0;
  font-size: var(--fs-0);
  color: var(--c-muted);
}
.footer-offer {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  justify-self: start;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-0);
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.footer-offer[hidden] {
  display: none;
}
.footer-legal {
  margin: 0;
  font-size: var(--fs-0);
  color: var(--c-muted);
}
.footer-top {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  justify-self: start;
  color: var(--c-ink);
}
.sticky-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 25;
  display: flex;
  justify-content: center;
  padding: var(--s-2) var(--gutter) calc(var(--s-2) + env(safe-area-inset-bottom));
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
}
.sticky-cta .btn-primary {
  width: 100%;
}
@media (min-width: 1024px) {
  .site-footer {
    margin-bottom: 0;
  }
  .sticky-cta {
    display: none;
  }
}

/* 12. Image failure -------------------------------------------------------- */
.image-unavailable img {
  display: none;
}
.image-unavailable::after {
  content: attr(data-fallback-label);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: var(--s-6);
  text-align: center;
  font-size: var(--fs-0);
  color: var(--c-muted);
  background: var(--c-tint);
}
.gallery-item .image-unavailable::after {
  aspect-ratio: var(--tile-ratio);
}
/* The hero wash is decorative: a failed wash stays quiet instead of painting
   a fallback label behind the typography. */
.hero-wash.image-unavailable::after {
  display: none;
}

/* The Latin brand and authored course labels retain Syne in every locale. */
.wordmark, .footer-wordmark, .ticker, .svc-rail-label { font-family: "Syne", sans-serif; }

/* Tamil includes long unspaced words; retain full glyphs and reserve wrapped lines. */
html[data-lang="ta"] .hero-headline { min-height: 5em; }
@media (max-width: 360px) {
  html[data-lang="ta"] .hero-headline { min-height: 6.25em; }
}