/* App shell: ambient stage + mega footer. Header, navigation and search
   live in frontend/components/navbar/navbar.css. */

/* ---------- Performance & Rendering Directives ----------
   content-visibility skips the sections that are still off-screen. The
   placeholder height matters though: while a section is skipped the browser
   lays it out with contain-intrinsic-size, and a placeholder that is far too
   short makes the document grow section by section while the visitor scrolls
   (on phones that drags the sliding URL bar with it, i.e. a viewport resize
   mid-scroll). The values below follow the real heights of each band, and the
   phone column re-states them for the single-column layouts. `auto` keeps the
   measured height after the first paint, so these are first-paint hints only. */

.trust-bar { content-visibility: auto; contain-intrinsic-size: auto 620px; }
.finishes-section { content-visibility: auto; contain-intrinsic-size: auto 720px; }
.categories-section { content-visibility: auto; contain-intrinsic-size: auto 760px; }
.inspiration-section { content-visibility: auto; contain-intrinsic-size: auto 920px; }
.rituals-section { content-visibility: auto; contain-intrinsic-size: auto 720px; }
.masterpieces-section { content-visibility: auto; contain-intrinsic-size: auto 820px; }
.corporate-section { content-visibility: auto; contain-intrinsic-size: auto 660px; }
.lufly-mega-footer { content-visibility: auto; contain-intrinsic-size: auto 640px; }

@media (max-width: 760px) {
  .trust-bar { contain-intrinsic-size: auto 610px; }
  .finishes-section { contain-intrinsic-size: auto 980px; }
  .categories-section { contain-intrinsic-size: auto 1850px; }
  .inspiration-section { contain-intrinsic-size: auto 1420px; }
  .rituals-section { contain-intrinsic-size: auto 1180px; }
  .masterpieces-section { contain-intrinsic-size: auto 1520px; }
  .corporate-section { contain-intrinsic-size: auto 800px; }
  .lufly-mega-footer { contain-intrinsic-size: auto 900px; }
}

/* ---------- Section scrolling ----------
   Sections scroll in the normal document flow - no stacking, no
   elevation shadows, no reveal transitions. Section rendering is kept
   cheap through content-visibility above. */

/* ---------- Ambient stage ---------- */

.aquatic-stage {
  position: relative;
  background:
    radial-gradient(ellipse 70% 50% at 85% -10%, var(--ds-primary-soft) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 10% 30%, var(--ds-primary-tint) 0%, transparent 50%),
    var(--ds-bg);
}

/* ---------- Footer ---------- */

.lufly-mega-footer {
  padding: var(--space-16) 0 var(--space-8);
  border-top: var(--border-hairline) solid var(--ds-border);
  background: var(--ds-surface);
  font-size: var(--text-sm);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}

.footer-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.footer-brand-logo { height: 32px; width: auto; }
.footer-brand-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wide);
  color: var(--ds-text);
}
.footer-brand-text { margin: 0 0 var(--space-5); color: var(--ds-text-muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.footer-brand-note { color: var(--ds-primary); font-size: var(--text-caption); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

.footer-col h5 {
  margin: 0 0 var(--space-4);
  color: var(--ds-text);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.footer-col ul { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.footer-col ul a { color: var(--ds-text-muted); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
.footer-col ul a:hover { color: var(--ds-primary); }

.footer-legal-name { margin: 0 0 var(--space-1); color: var(--ds-text); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.footer-legal-text { margin: 0 0 var(--space-3); color: var(--ds-text-muted); font-size: var(--text-xs); line-height: var(--leading-normal); }
.footer-contact { margin: 0; font-size: var(--text-sm); }
.footer-link-strong { color: var(--ds-primary); font-weight: var(--weight-semibold); }
.footer-link-muted { color: var(--ds-text-muted); }

.footer-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: var(--border-hairline) solid var(--ds-border);
  color: var(--ds-text-muted);
  font-size: var(--text-xs);
}

/* ---------- Phone typography & rhythm ----------
   The shared display scale bottoms out at 36px, which turns every band
   heading ("Masterful Sanitary Suites") into three heavy lines on a 320px
   screen, and the header keeps its 48px gap. Both are desktop numbers. */

@media (max-width: 640px) {
  .section-title { font-size: clamp(23px, 7.2vw, 33px); }
  .section-header-center { margin-bottom: var(--space-8); }
  .section-subtitle { font-size: var(--text-sm); }
  .band { padding-block: var(--space-12); }
}

/* ---------- Responsive chrome ---------- */

@media (max-width: 1200px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
}

@media (max-width: 640px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-bottom-bar { flex-direction: column; text-align: center; }
}

/* ---------- Responsive images ---------- */

/* <picture> is only a srcset container here. `display: contents` keeps it from
   becoming a box of its own, so an <img> wrapped in it stays the direct child
   of whatever grid or flex parent it was written for. */
.respic {
  display: contents;
}