/**
 * LensScape Gallery — Base Styles
 * Editorial, museum, calm. No decorative noise.
 */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ls-color-bg);
  color: var(--ls-color-text);
  font-family: var(--ls-font-body);
  font-size: var(--ls-fs-body);
  line-height: var(--ls-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, .ls-heading {
  font-family: var(--ls-font-heading);
  font-weight: 400; /* editorial serifs read luxury at regular weight, not bold */
  line-height: var(--ls-lh-heading);
  margin: 0 0 var(--ls-space-md);
  letter-spacing: -0.01em;
}

h1, .ls-h1 { font-size: var(--ls-fs-h1); }
h2, .ls-h2 { font-size: var(--ls-fs-h2); }
h3, .ls-h3 { font-size: var(--ls-fs-h3); }
h4, .ls-h4 { font-size: var(--ls-fs-h4); }

p { margin: 0 0 var(--ls-space-md); }

.ls-lead { font-size: var(--ls-fs-lead); color: var(--ls-color-text-muted); }

.ls-eyebrow {
  display: inline-block;
  font-family: var(--ls-font-body);
  font-size: var(--ls-fs-eyebrow);
  letter-spacing: var(--ls-ls-eyebrow);
  text-transform: uppercase;
  color: var(--ls-color-accent);
  margin-bottom: var(--ls-space-sm);
}

/* ---------------------------------------------
   LAYOUT PRIMITIVES
--------------------------------------------- */
.ls-container {
  max-width: var(--ls-container-max);
  margin-inline: auto;
  padding-inline: var(--ls-container-padding);
}

.ls-container--narrow { max-width: var(--ls-container-narrow); }

.ls-section {
  padding-block: var(--ls-space-section);
}

.ls-section--tight { padding-block: var(--ls-space-xl); }

.ls-grid {
  display: grid;
  gap: var(--ls-space-lg);
}

.ls-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ls-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ls-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .ls-grid--2, .ls-grid--3, .ls-grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .ls-grid--2, .ls-grid--3, .ls-grid--4 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------
   BUTTONS (reusable, no bounce, luxury hover)
--------------------------------------------- */
.ls-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ls-space-2xs);
  font-family: var(--ls-font-body);
  font-size: var(--ls-fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.9em 2em;
  border: 1px solid var(--ls-color-ocean-slate);
  border-radius: var(--ls-radius-sm);
  background: transparent;
  color: var(--ls-color-ocean-slate);
  cursor: pointer;
  transition: background var(--ls-duration-fast) var(--ls-ease-soft),
              color var(--ls-duration-fast) var(--ls-ease-soft),
              border-color var(--ls-duration-fast) var(--ls-ease-soft);
}

.ls-btn:hover {
  background: var(--ls-color-ocean-slate);
  color: var(--ls-color-white);
}

.ls-btn--primary {
  background: var(--ls-color-ocean-slate);
  color: var(--ls-color-white);
}
.ls-btn--primary:hover {
  background: transparent;
  color: var(--ls-color-ocean-slate);
}

.ls-btn--ghost {
  border-color: currentColor;
}

/* ---------------------------------------------
   CARDS (reusable)
--------------------------------------------- */
.ls-card { display: flex; flex-direction: column; }
.ls-card__media { overflow: hidden; aspect-ratio: 4 / 5; }
.ls-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--ls-duration-slow) var(--ls-ease);
}
.ls-card:hover .ls-card__media img { transform: scale(1.04); }
.ls-card__title { font-family: var(--ls-font-heading); font-size: 1.25rem; margin-top: var(--ls-space-sm); }
.ls-card__meta { color: var(--ls-color-text-muted); font-size: var(--ls-fs-small); }

/* ---------------------------------------------
   ANIMATION UTILITIES — fade / reveal / parallax hooks
   (JS toggles .is-visible on intersection)
--------------------------------------------- */
.ls-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--ls-duration-slow) var(--ls-ease),
              transform var(--ls-duration-slow) var(--ls-ease);
}
.ls-reveal.is-visible { opacity: 1; transform: translateY(0); }

.ls-fade-cycle img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity var(--ls-duration-hero-fade) ease-in-out;
}
.ls-fade-cycle img.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ls-reveal, .ls-card__media img, .ls-fade-cycle img { transition: none !important; }
  .ls-reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------
   FREE BLOCK-EDITOR COMPATIBILITY
   Patterns in inc/block-patterns.php use core WP blocks (Cover, Columns,
   Group, Gallery, Buttons) with our .ls-* classes layered on top. These
   rules make core block defaults (which use .wp-block-* classes) sit
   quietly underneath our design system instead of fighting it.
--------------------------------------------- */
.wp-block-group.ls-section,
.wp-block-group.ls-section--tight { padding-block: var(--ls-space-section); }
.wp-block-group.ls-section--tight { padding-block: var(--ls-space-xl); }
.wp-block-group > *, .wp-block-columns.grid > * { max-width: var(--ls-container-max); margin-inline: auto; }
.wp-block-columns.grid { gap: var(--ls-space-lg) !important; }
.wp-block-cover.ls-hero { min-height: 100vh; }
.wp-block-cover.ls-hero .wp-block-cover__inner-container { max-width: 720px; text-align: left; }
.wp-block-button__link { font-family: var(--ls-font-body); letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--ls-radius-sm) !important; }
.ls-blocks-canvas > .wp-block-group:first-child.ls-hero,
.ls-blocks-canvas > .wp-block-cover:first-child { margin-top: calc(-1 * var(--ls-space-md)); } /* let hero sit under transparent header */

.ls-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}