/* KAMTOBE Creations: the phone layout (up to 600px wide), 31 October 2026.
   Loaded after css/style.css with media="(max-width: 600px)", so it never reaches a tablet or a desktop.
   Same content, wording, images, order and design language as the desktop; the top of the page (bar, first screen,
   buttons, the Ask Meret launcher and the cookie choice) is composed for a phone. The owner approved the lower
   sections' phone layout as it is (31 Oct), so they keep the shared rules in style.css. */

:root {
  --bar-h: 56px;
  /* The framed gallery band on the first screen. */
  --band: clamp(176px, 28svh, 280px);
  --band-gap: 10px;
}

/* ---------- Bar: solid graphite (brushed silver in light mode), so nothing from the gallery runs through the logo ---------- */
.bar,
.bar.is-solid {
  height: var(--bar-h);
  gap: 10px;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--line);
}
.bar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--metal-silver);
  opacity: 0.32;
  pointer-events: none;
}
.brand { gap: 10px; min-height: 44px; }
.brand img { width: 34px; height: 34px; }
.brand-word { font-size: 0.78rem; letter-spacing: 0.2em; }
.bar-actions { gap: 8px; }

/* ---------- First screen: the gallery in a framed band, then the words ---------- */
/* The live 3D (or its still) stays fixed behind the page, as on every size. The hero is solid page colour with one
   rounded window onto it, edged in brushed silver; scene.js centres the gallery in that window. */
.hero {
  min-height: 0;
  justify-content: flex-start;
  padding: calc(var(--bar-h) + var(--band-gap) + var(--band) + 18px) var(--gutter) 10px;
  background: none;
  isolation: isolate;
  overflow: clip;
}
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: calc(var(--bar-h) + var(--band-gap));
  height: var(--band);
  border-radius: 18px;
  pointer-events: none;
}
.hero::before { z-index: -1; box-shadow: 0 0 0 100vmax var(--bg), inset 0 -40px 40px -30px rgba(var(--shade), 0.55); }
.hero::after {
  padding: 1.2px;
  background: var(--metal-silver);
  background-size: 220% 100%;
  background-position: 80% 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.75;
}
.hero-copy { max-width: none; }
.hero h1 { font-size: clamp(1.8rem, 8.2vw, 2.3rem); line-height: 1.06; }
/* The searchable headline (1 Nov 2026) is longer: on the narrowest phones it sits a little smaller so the first button
   stays clear of the cookie choice. */
@media (max-width: 380px) { .hero h1 { font-size: 1.6rem; } }
.lead { margin-top: 12px; font-size: 1rem; line-height: 1.55; }
.hero .cta-row { margin-top: 16px; gap: 10px; }
.hero .cta-row .btn { flex: 1 1 128px; min-height: 46px; padding: 0 14px; font-size: 0.94rem; gap: 8px; }
.hero-from { margin-top: 12px; }
.wa-link { margin-top: 2px; }
.trust { margin-top: 14px; padding-top: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.trust li { gap: 8px; font-size: 0.8rem; line-height: 1.4; }
.trust svg { width: 18px; height: 18px; }
.scroll-cue { margin-top: 12px; }

/* ---------- Ask Meret: a round button in the bar, beside the theme and menu buttons ---------- */
/* On a phone any floating corner button sits on the words of the first screen, so the launcher lives in the bar: it
   never covers text, a button or a link, and the cookie choice has the bottom of the screen to itself. */
.bar-actions { padding-left: 52px; }
.meret-btn {
  top: calc((var(--bar-h) - 44px) / 2);
  right: calc(max(var(--gutter), env(safe-area-inset-right)) + 104px);
  bottom: auto;
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  justify-content: center;
  background: transparent;
  border-color: var(--line);
  box-shadow: none;
}
.meret-btn img { width: 36px; height: 36px; }
.meret-btn span { display: none; } /* the name stays as the button's label for screen readers */
.meret-btn:hover { transform: none; border-color: var(--line-strong); }

/* ---------- Cookie choice: a compact bottom sheet, Reject and Accept side by side and equal ---------- */
.kc-consent {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  border-width: 1px 0 0;
  border-radius: 18px 18px 0 0;
  font-size: 0.78rem;
  line-height: 1.42;
  max-height: 70svh;
}
.kc-consent::before { left: 18px; right: 18px; }
.kc-consent-actions { flex-direction: row; gap: 10px; }
.kc-consent-actions button { flex: 1 1 0; width: auto; min-width: 0; min-height: 44px; padding: 8px 12px; }

/* ---------- Tap targets: every control and stand-alone link at least 44 x 44px ---------- */
.btn-small { min-height: 44px; }
.meret-links a, .meret-options .chip { min-height: 44px; }
.foot-legal a, .foot-cookie { display: inline-flex; align-items: center; min-height: 44px; }
.contact-list .follow-links a { min-width: 44px; justify-content: center; }
/* Contact: the phone number, email and booking links are full-width 44px rows; the long email address may wrap, so the
   page never scrolls sideways on a 320px phone (it did, by 6px, before this change). */
.contact-list li { grid-template-columns: minmax(0, 1fr); }
.contact-list li > a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }

/* ---------- Very narrow phones (320 to 360px) ---------- */
@media (max-width: 360px) {
  .hero .cta-row .btn { padding: 0 10px; font-size: 0.9rem; }
  .trust { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .contact-list li > a { font-size: 1.08rem; }
}

/* ---------- Phones on their side: a short screen, so a shorter band ---------- */
@media (max-height: 500px) {
  :root { --band: clamp(150px, 46svh, 220px); }
}