/* Malayan Cafe — layout and components (mobile-first).
   Tokens, palette and type come from tokens.css (docs/03-design-spec.md §2).
   Shape: radius 0 everywhere. Depth: --shadow-1 on the lightbox only.
   The 16px checkerboard strip is the only section divider (four instances). */

/* ---------- shared primitives ---------- */

/* Authored components must keep the hidden attribute meaningful (the campaign
   offer link starts hidden and is revealed only inside the campaign window). */
[hidden] { display: none !important; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.section { padding-block: clamp(3rem, 7vw, 4.5rem); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; min-width: 0; max-width: 100%; padding: 0 var(--s-6);
  background: var(--c-accent); color: var(--c-accent-ink);
  border: 0; border-radius: 0;
  font: inherit; font-weight: 600; text-align: center; text-decoration: none;
  cursor: pointer;
}
.button span { min-width: 0; overflow-wrap: anywhere; }
.button svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.button.secondary { background: transparent; color: var(--c-accent); box-shadow: inset 0 0 0 1.5px var(--c-accent); }

.icon-button {
  display: grid; place-items: center; min-width: 44px; min-height: 44px;
  padding: 0; background: none; border: 0; border-radius: 0; color: inherit; cursor: pointer;
}
.icon-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* signature element — the shop-floor checkerboard, the only section divider */
.checker {
  height: var(--checker-size);
  background: repeating-conic-gradient(var(--c-accent) 0% 25%, var(--c-bg) 0% 50%) 50% / var(--checker-size) var(--checker-size);
}

/* generated-imagery labels */
.image-note {
  display: inline-block; padding: 2px 6px; border-radius: 0;
  background: rgb(27 32 64 / .9); color: #fff; font-size: 11px; line-height: 1.4;
}

/* broken image: one labelled tint block, no retry loop */
picture.image-unavailable { position: relative; display: block; }
picture.image-unavailable img { visibility: hidden; }
picture.image-unavailable::after {
  content: attr(data-fallback-label);
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: var(--s-4); text-align: center;
  background: var(--c-tint); color: var(--c-ink); font-size: var(--fs-0);
}

/* ---------- header ---------- */

/* The authored mobile drawing places the header over the hero image
   (ink on limestone once scrolled), so the header never occupies flow space. */
.site-header { position: fixed; inset-inline: 0; top: 0; z-index: 60; background: rgb(231 228 220 / .96); }
.site-header.is-scrolled { background: var(--c-bg); }
.header-inner { display: flex; align-items: center; gap: var(--s-3); min-height: 3.5rem; padding-block: var(--s-2); }
.wordmark { font-family: var(--font-brand); font-weight: 700; font-size: 1.3rem; line-height: 1.1; color: var(--c-ink); text-decoration: none; white-space: nowrap; }

.desktop-nav { display: none; }
.lang-switch { display: flex; align-items: center; gap: var(--s-2); margin-inline-start: auto; }
.lang-switch a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 2px;
  color: var(--c-ink); font-size: var(--fs-0); font-weight: 500; text-decoration: none;
}
.lang-switch a[aria-current="true"] { box-shadow: inset 0 -2px 0 0 var(--c-accent); }
.header-cta { display: none; }
@media (max-width: 479px) {
  /* Long native switcher labels + wordmark + menu button do not fit one row. */
  .header-inner { flex-wrap: wrap; row-gap: 0; }
  .lang-switch { order: 3; flex-basis: 100%; margin-inline-start: 0; }
}
@media (min-width: 768px) {
  .header-inner { min-height: 4rem; }
  .header-cta { display: inline-flex; padding: 0 var(--s-4); }
}
@media (min-width: 1024px) {
  .desktop-nav { display: flex; align-items: center; gap: var(--s-6); margin-inline-start: auto; }
  .desktop-nav a { color: var(--c-ink); text-decoration: none; font-weight: 500; }
  .lang-switch { margin-inline-start: 0; }
  .menu-toggle { display: none; }
}

/* ---------- drawer ---------- */

.drawer {
  position: fixed; inset: 0 0 0 auto; margin: 0;
  width: min(20rem, 88vw); max-width: none; height: 100%; max-height: none;
  border: 0; border-radius: 0; padding: var(--gutter);
  background: var(--c-surface); color: var(--c-ink); box-shadow: none;
}
.drawer[open] { display: flex; flex-direction: column; gap: var(--s-6); }
.drawer::backdrop { background: rgb(27 32 64 / .5); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.drawer-nav { display: grid; gap: var(--s-1); }
.drawer-nav a { padding: var(--s-2) 0; color: var(--c-ink); font-size: var(--fs-2); text-decoration: none; }
.drawer .lang-switch { margin-inline-start: 0; }
.drawer .button { width: 100%; }

/* ---------- hero: image-bleed-copy-bottom ---------- */

.hero { --hero-media-h: 125vw; }
.hero-media { position: relative; height: var(--hero-media-h); }
.hero-media picture { display: block; height: 100%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media .image-note { position: absolute; top: calc(var(--header-h, 3.5rem) + var(--s-2)); inset-inline-end: var(--gutter); }
.hero-panel {
  position: relative;
  background: var(--c-surface);
  margin-top: calc(var(--hero-media-h) * -0.42);
  padding-block: var(--s-8);
  animation: hero-rise var(--t-hero) var(--ease) both;
}
@keyframes hero-rise {
  from { transform: translateY(14px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.hero-copy { max-width: 40rem; }
.kicker { margin: 0 0 var(--s-2); color: var(--c-accent); font-size: var(--fs-0); font-weight: 600; }
.hero-subline { margin: var(--s-4) 0 0; max-width: 36rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-6); }
.fact-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.fact-chips li { padding: var(--s-1) var(--s-3); background: var(--c-tint); color: var(--c-ink); font-size: var(--fs-0); }
@media (min-width: 768px) {
  .hero { --hero-media-h: 78vh; }
  .hero-panel { margin-top: calc(var(--hero-media-h) * -0.38); padding-block: var(--s-12); }
  .hero-copy { max-width: 36rem; }
}

/* ---------- about ---------- */

.about-grid { display: grid; gap: var(--s-8); }
.about-copy h2 { margin-bottom: var(--s-4); }
.prose p { margin: 0 0 var(--s-3); }
.prose p:last-child { margin-bottom: 0; }
.about-figure { margin: 0; }
.about-figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.about-figure .image-note { margin-top: var(--s-2); }
.highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin: var(--s-8) 0 0; }
.highlights > div { padding: var(--s-3) var(--s-4); background: var(--c-tint); }
.highlights dt { color: var(--c-muted); font-size: var(--fs-0); }
.highlights dd { margin: var(--s-1) 0 0; font-weight: 500; }
@media (min-width: 768px) {
  .about-grid { grid-template-columns: 7fr 5fr; align-items: start; }
  .highlights { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- services: list ---------- */

.section-intro { max-width: 40rem; }
.section-intro h2 { margin-bottom: var(--s-3); }
.section-intro p { margin: 0; }
.service-list { max-width: 40rem; margin: var(--s-8) 0 0; padding: 0; list-style: none; }
.service-list li { border-left: 3px solid var(--c-accent); padding-left: var(--s-4); }
.service-list li + li { margin-top: var(--s-6); }
.service-list h3 { margin: 0; }
.service-list p { margin: var(--s-1) 0 0; color: var(--c-muted); }
.services-note { max-width: 40rem; margin: var(--s-6) 0 0; color: var(--c-muted); font-size: var(--fs-0); }

/* ---------- gallery: 2-4-uniform ---------- */

.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-8) 0 0; padding: 0; list-style: none; }
.gallery-tile { position: relative; display: block; }
.gallery-tile img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.sample-badge {
  position: absolute; inset-block-end: var(--s-2); inset-inline-start: var(--s-2);
  padding: 2px 6px; border-radius: 0;
  background: rgb(27 32 64 / .9); color: #fff; font-size: 11px; line-height: 1.4;
}
.gallery-expand {
  position: absolute; inset-block-start: var(--s-2); inset-inline-end: var(--s-2);
  padding: 1px 5px; background: rgb(27 32 64 / .9); color: #fff; font-size: 11px; line-height: 1.5;
}
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- viewer ---------- */

.lightbox {
  position: fixed; inset: 0; margin: 0; padding: 0;
  width: 100%; max-width: none; height: 100%; max-height: none;
  border: 0; border-radius: 0; background: rgb(27 32 64 / .94); color: #fff;
  box-shadow: var(--shadow-1);
}
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lightbox::backdrop { background: rgb(27 32 64 / .6); }
.viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--gutter); font-size: var(--fs-0); }
.viewer-toolbar .icon-button, .viewer-controls .icon-button { color: #fff; }
.viewer-image { display: grid; place-items: center; min-height: 0; overflow: auto; padding: 0 var(--s-4); }
.viewer-image img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.viewer-bottom { display: grid; gap: var(--s-3); padding: var(--s-3) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom)); }
.viewer-bottom p { margin: 0; font-size: var(--fs-0); }
.viewer-controls { display: flex; align-items: center; gap: var(--s-4); }
.viewer-count { font-variant-numeric: tabular-nums; }

/* ---------- contact ---------- */

.contact-grid { display: grid; gap: var(--s-8); }
.contact-intro { max-width: 36rem; }
.contact-details { display: grid; gap: var(--s-4); margin: var(--s-6) 0 0; }
.contact-details > div { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: var(--s-3); align-items: baseline; }
.contact-details dt { color: var(--c-muted); font-size: var(--fs-0); }
.contact-details dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.contact-details a { color: var(--c-accent); }
.hours { margin-top: var(--s-8); }
.hours h3 { margin: 0 0 var(--s-2); }
.hours-note { margin: 0; max-width: 32rem; color: var(--c-muted); }
.map-column h3 { margin: 0 0 var(--s-3); }
.map-card { display: grid; place-items: center; min-height: 16rem; background: var(--c-tint); }
.map-card iframe { display: block; width: 100%; height: 100%; min-height: 16rem; border: 0; }
.map-placeholder { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-6); text-align: center; }
.map-placeholder p { margin: 0; }
.map-pin { width: 2.5rem; height: 2.5rem; fill: none; stroke: var(--c-accent); stroke-width: 1.75; stroke-linejoin: round; }
.maps-link { display: inline-flex; align-items: center; gap: var(--s-1); margin-top: var(--s-3); min-height: 44px; font-weight: 500; }
@media (max-width: 479px) {
  /* Give long values (email, address) the full row instead of a narrow column. */
  .contact-details > div { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
}
@media (min-width: 1024px) { .contact-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; } }

/* ---------- footer + sticky CTA ---------- */

.site-footer { padding-block: var(--s-12) var(--s-8); }
.footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.footer-top p { margin: var(--s-1) 0 0; color: var(--c-muted); }
.back-top { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 44px; color: var(--c-accent); font-weight: 500; text-decoration: none; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: var(--s-8); color: var(--c-muted); font-size: var(--fs-0); }
.footer-bottom p { margin: 0; }
.preview-notice { margin-top: var(--s-8); padding: var(--s-4); background: var(--c-tint); font-size: var(--fs-0); }
.preview-notice p { margin: 0; }
.offer-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s-1); color: var(--c-accent); font-weight: 600; }
.sticky-cta {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
  display: none;
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: var(--c-bg);
}
.sticky-cta .button { width: 100%; }
@media (max-width: 1023.98px) {
  .sticky-cta { display: block; }
  .site-footer { padding-bottom: calc(var(--sticky-cta-h) + var(--s-8)); }
}

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero-panel { animation: none; }
}

/* Real-image review: retain the lower copy zone without hiding the food. */
@media (max-width: 767px) {
  .hero-media picture { height: 58%; }
  .hero-media img { object-position: center 60%; }
}
@media (min-width: 768px) {
  .hero-panel { width: min(36rem, calc(100% - 2 * var(--gutter))); margin-inline-start: var(--gutter); }
}