/* Rana Seafood Restaurant — page styles. Mobile is the design; desktop adapts (docs/DESIGN-SYSTEM.md §1). */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); }

@media (min-width: 1024px) {
  :root { --pad: max(var(--gutter), calc((100vw - var(--max-w)) / 2)); }
}

.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); border-block-start: 1px solid var(--c-line); }

/* Keep focused controls and anchor targets clear of the sticky header and the
   sticky mobile action (scroll-margin is honoured when the browser scrolls a
   focused element into view). */
a, button, [tabindex] { scroll-margin-block-start: calc(var(--header-h) + var(--s-2)); scroll-margin-block-end: var(--sticky-cta-h); }

/* Header — 64px, first of the two quiet sticky surfaces */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--c-bg); border-block-end: 1px solid transparent; }
.site-header[data-scrolled="true"] { border-block-end-color: var(--c-line); }
.header-inner { display: flex; align-items: center; gap: var(--s-3); min-height: var(--header-min); }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2); color: var(--c-ink); text-decoration: none; letter-spacing: .01em; }
.desktop-nav { display: none; }
.desktop-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-ink); text-decoration: none; }
.desktop-nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; text-decoration-color: var(--c-line); }
.lang-switch { display: flex; align-items: center; gap: var(--s-1); margin-inline-start: auto; }
.lang-switch a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--s-2); color: var(--c-muted); text-decoration: none; }
.lang-switch a[aria-current="true"] { color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; text-underline-offset: .35em; }
.header-cta { display: none; }
.site-header .header-cta { display: none; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; background: transparent; border: 1px solid var(--c-line); border-radius: var(--r-md); color: var(--c-ink); cursor: pointer; }
.icon-button svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-toggle { flex: 0 0 auto; }

@media (min-width: 1024px) {
  .desktop-nav { display: flex; align-items: center; gap: var(--s-6); }
  .menu-toggle { display: none; }
  .site-header .header-cta { display: inline-flex; }
}

@media (max-width: 480px) {
  .header-inner { gap: var(--s-2); }
  .lang-switch { gap: 0; }
  .lang-switch a { padding-inline: var(--s-1); white-space: nowrap; }
}

/* Buttons and drawer */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 48px; padding-inline: var(--s-6); border-radius: var(--r-md); border: 1px solid var(--c-accent); background: var(--c-accent); color: var(--c-accent-ink); font-family: var(--font-body); font-weight: 600; font-size: var(--fs-1); text-decoration: none; text-align: center; }
.button svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.button--secondary { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.button:hover { background: color-mix(in srgb, var(--c-accent) 88%, var(--c-ink)); }
.button--secondary:hover { background: var(--c-tint); }

.drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(88vw, 22rem); max-width: 100%; height: 100dvh; max-height: 100dvh; padding: var(--s-6); border: 0; border-inline-start: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink); display: flex; flex-direction: column; gap: var(--s-6); overflow-y: auto; overscroll-behavior: contain; }
.drawer:not([open]) { display: none; }
.drawer::backdrop { background: rgb(42 34 26 / .5); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.drawer-nav { display: flex; flex-direction: column; }
.drawer-nav a { display: flex; align-items: center; min-height: 48px; border-block-end: 1px solid var(--c-line); color: var(--c-ink); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2); }
.drawer .lang-switch { margin-inline-start: 0; }

/* Hero — catalogue-grid: copy, plank, 2x3 label tiles, image */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding-inline: var(--pad); padding-block: clamp(1.5rem, 5vw, 3rem) clamp(2rem, 6vw, 3rem); }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.kicker { margin: 0; color: var(--c-muted); font-size: var(--fs-0); }
.hero-subline { margin: 0; max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.fact-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.fact-chips li { padding: var(--s-1) var(--s-3); background: var(--c-tint); border: 1px solid var(--c-line); border-radius: var(--r-md); color: var(--c-muted); font-size: var(--fs-0); }

/* Signature — the only 56px band on the page (docs/03-design-spec.md §3) */
.plank { margin-inline: calc(-1 * var(--pad)); background: var(--plank-band); }
.plank__tabs { display: flex; align-items: center; gap: var(--s-4); height: var(--plank-h); margin: 0; padding-inline: var(--pad); list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; }
.plank__tabs:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -3px; }
.plank__tabs li { flex: 0 0 auto; scroll-snap-align: start; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-1); color: var(--c-accent); white-space: nowrap; }

.hero-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.hero-tiles a { display: flex; align-items: center; min-height: 56px; padding: var(--s-3) var(--s-4); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); color: var(--c-ink); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-1); overflow-wrap: anywhere; }
.hero-tiles a:hover { border-color: var(--c-accent); color: var(--c-accent); }

.hero-figure { margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.hero-figure picture { display: block; border-radius: var(--r-lg); overflow: hidden; background: var(--c-surface); }
.hero-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.image-note { color: var(--c-muted); font-size: var(--fs-0); }

@media (max-width: 768px) {
  .hero-figure img { aspect-ratio: 4 / 5; }
}

@media (min-width: 1024px) {
  .hero { grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); grid-template-areas: "copy figure" "tiles figure" "plank plank"; column-gap: var(--s-8); row-gap: var(--s-6); padding-block-end: 0; }
  .hero-copy { grid-area: copy; }
  .hero-tiles { grid-area: tiles; align-self: start; }
  .hero-figure { grid-area: figure; align-self: center; }
  .plank { grid-area: plank; }
}

/* About — text 7 / image 5, highlights as facts */
.about-grid { display: grid; gap: var(--s-6); }
.prose p { margin: 0 0 var(--s-3); }
.prose p:last-child { margin-block-end: 0; }
.about-figure { margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.about-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); background: var(--c-surface); }
.highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin: var(--s-8) 0 0; padding-block-start: var(--s-6); border-block-start: 1px solid var(--c-line); }
.highlights dt { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-0); color: var(--c-muted); }
.highlights dd { margin: var(--s-1) 0 0; }

@media (min-width: 768px) {
  .highlights { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .about-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; column-gap: var(--s-8); }
}

/* Services — single column list, 42rem, teal tick, no icons or cards */
.section-intro { max-width: 42rem; }
.section-intro p { margin: var(--s-2) 0 0; color: var(--c-muted); }
.service-list { display: flex; flex-direction: column; gap: var(--s-6); max-width: 42rem; margin: var(--s-8) 0 0; padding: 0; list-style: none; }
.service-list li { position: relative; padding-inline-start: var(--s-4); }
.service-list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 50%; transform: translateY(-50%); width: 3px; height: 12px; background: var(--c-accent); border-radius: 2px; }
.service-list h3 { font-weight: 600; }
.service-list p { margin: var(--s-1) 0 0; color: var(--c-muted); }
.services-note { max-width: 42rem; margin: var(--s-6) 0 0; color: var(--c-muted); font-size: var(--fs-0); }

/* Gallery — horizontal strip, four visible on desktop, snap, accessible scrolling */
.gallery-heading { display: flex; flex-direction: column; gap: var(--s-2); }
.gallery-heading p { margin: 0; max-width: 46rem; color: var(--c-muted); }
.gallery-region { margin-block-start: var(--s-8); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); overscroll-behavior-x: contain; }
.gallery-region:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -3px; }
.gallery-strip { display: flex; gap: var(--gallery-gap); margin: 0; padding: 0 var(--pad) var(--s-3); list-style: none; }
.gallery-strip > li { flex: 0 0 78%; scroll-snap-align: start; }
.gallery-tile { position: relative; display: block; height: 100%; border-radius: var(--r-md); overflow: hidden; background: var(--c-surface); color: inherit; text-decoration: none; }
.gallery-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery-tile picture { display: block; }
/* Spec §5 asks for a walnut 55% badge; the disclosed sample label needs 4.5:1
   over real photography, so the tint is raised to 90% (recorded as a correction). */
.sample-badge { position: absolute; inset-block-end: var(--s-2); inset-inline-start: var(--s-2); padding: var(--s-1) var(--s-2); background: rgb(42 34 26 / .9); color: var(--c-surface); border-radius: var(--r-sm); font-size: var(--fs-0); }

@media (min-width: 768px) {
  .gallery-strip > li { flex-basis: calc((100% - var(--gallery-gap)) / 2); }
}

@media (min-width: 1024px) {
  .gallery-strip > li { flex-basis: calc((100% - 3 * var(--gallery-gap)) / 4); }
}

/* Trust — evidenced public score as a fact, not a testimonial */
.trust-list { margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.score { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-4); line-height: 1.05; color: var(--c-accent); }
.trust-source { margin: var(--s-2) 0 0; font-weight: 600; }
.trust-source a { display: inline-flex; align-items: center; min-height: 44px; }
.trust-detail { margin: var(--s-1) 0 0; color: var(--c-muted); }
.trust-disclaimer { max-width: 42rem; margin: var(--s-4) 0 0; color: var(--c-muted); font-size: var(--fs-0); }

/* Contact — details left, map right; email and languages rows omitted by fact */
.contact-grid { display: grid; gap: var(--s-8); }
.contact-intro { margin: var(--s-2) 0 0; color: var(--c-muted); }
.contact-details { display: grid; gap: var(--s-4); margin: var(--s-6) 0 0; }
.contact-details dt { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-0); color: var(--c-muted); }
.contact-details dd { margin: var(--s-1) 0 0; }
.contact-details a { display: inline-flex; align-items: center; min-height: 44px; }
.hours-heading { margin: var(--s-8) 0 var(--s-2); font-size: var(--fs-2); }
.hours-note { margin: 0; color: var(--c-muted); }

.map-column h3 { font-size: var(--fs-2); }
.map-card { margin-block-start: var(--s-3); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.map-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); padding: var(--s-8); text-align: center; }
.map-placeholder p { margin: 0; color: var(--c-muted); }
.map-pin { width: 2.5rem; height: 2.5rem; fill: none; stroke: var(--c-accent); stroke-width: 2; }
.map-card iframe { display: block; width: 100%; height: 22rem; border: 0; }
.maps-link { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 44px; margin-block-start: var(--s-3); }

/* Quiet hover feedback for text links (contrast increases on hover). */
.lang-switch a:hover, .back-top:hover, .maps-link:hover, .offer-link:hover, .drawer-nav a:hover, .trust-source a:hover, .contact-details a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }

@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-8); }
}

/* Footer and the preview notice */
.site-footer { margin-block-start: 0; padding-block: var(--s-8) calc(var(--s-8) + var(--sticky-cta-h)); border-block-start: 1px solid var(--c-line); }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; 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; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-block-start: var(--s-6); padding-block-start: var(--s-4); border-block-start: 1px solid var(--c-line); color: var(--c-muted); font-size: var(--fs-0); }
.footer-bottom p { margin: 0; }
.preview-notice { margin-block-start: var(--s-6); padding: var(--s-4); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); color: var(--c-muted); font-size: var(--fs-0); }
.preview-notice p { margin: 0; }
.offer-link { display: inline-flex; align-items: center; min-height: 44px; margin-block-start: var(--s-2); font-weight: 600; }
.offer-link[hidden] { display: none; }

@media (min-width: 1024px) {
  .site-footer { padding-block-end: var(--s-8); }
}

/* Sticky mobile action */
.sticky-cta { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 30; padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom)); background: var(--c-bg); border-block-start: 1px solid var(--c-line); }
.sticky-cta .button { width: 100%; }

@media (min-width: 1024px) {
  .sticky-cta { display: none; }
}

/* Viewer */
.lightbox { width: min(96vw, 60rem); max-width: 96vw; max-height: 92dvh; padding: 0; border: 0; border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow-1); overflow: auto; overscroll-behavior: contain; }
.lightbox:not([open]) { display: none; }
.lightbox::backdrop { background: rgb(42 34 26 / .62); }
.viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-block-end: 1px solid var(--c-line); color: var(--c-muted); font-size: var(--fs-0); }
.viewer-image { display: flex; align-items: center; justify-content: center; padding: var(--s-2); background: var(--c-bg); }
.viewer-image img { width: auto; height: auto; max-width: 100%; max-height: 62dvh; object-fit: contain; }
.viewer-bottom { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); border-block-start: 1px solid var(--c-line); }
.viewer-bottom p { margin: 0; }
.viewer-controls { display: flex; align-items: center; gap: var(--s-3); }
.viewer-count { color: var(--c-muted); font-size: var(--fs-0); font-variant-numeric: tabular-nums; }

/* Image failure — one settled fallback state, no retry loop */
.image-unavailable img { display: none; }
.image-unavailable::after { content: attr(data-fallback-label); display: flex; align-items: center; justify-content: center; min-height: 8rem; padding: var(--s-6); background: var(--c-surface); border: 1px dashed var(--c-line); border-radius: var(--r-md); color: var(--c-muted); text-align: center; }
.hero-figure.image-unavailable picture::after { min-height: 0; padding-block: var(--s-12); }

/* One hero entrance: plank tabs fade in left to right, 80ms stagger, 480ms total */
@keyframes plank-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.plank__tabs li { animation: plank-in var(--plank-duration) var(--ease) both; animation-delay: calc(var(--i) * var(--plank-stagger)); }

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