/* ================================================================
   am Meer — Page Styles
   ================================================================ */

/* ── Global override: deep sea palette ─────────────────────────── */
:root {
  --am-bg:      #0d1a23;
  --am-sea:     #6aabbc;
  --am-sand:    #c9a27a;
  --am-text:    #e8e0d4;
  --am-muted:   rgba(232, 224, 212, 0.50);
  --am-divider: rgba(232, 224, 212, 0.08);
}

body:has(.am-page) {
  background: var(--am-bg);
}
body:has(.am-page) .site-main {
  background: var(--am-bg);
}
body:has(.am-page) .site-nav {
  background: rgba(13, 26, 35, 0.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--am-divider);
}
body:has(.am-page) .nav-brand,
body:has(.am-page) .nav-link {
  color: rgba(232, 224, 212, 0.60);
}
body:has(.am-page) .nav-link:hover,
body:has(.am-page) .nav-link.is-active { color: var(--am-text); }
body:has(.am-page) .nav-hamburger .ham-line { background: var(--am-text); }

body:has(.am-page) .sbm-street .sbm-fill { color: var(--am-bg); }

body:has(.am-page) .site-footer {
  background: var(--am-bg);
  border-top: 1px solid var(--am-divider);
}
body:has(.am-page) .site-footer,
body:has(.am-page) .site-footer * { color: var(--am-muted); }
body:has(.am-page) .site-footer a:hover { color: var(--am-text); }
body:has(.am-page) .footer-nl { border-color: var(--am-divider); }
body:has(.am-page) .btn-primary {
  background: var(--am-text);
  color: var(--am-bg);
}

/* ── Page wrapper ───────────────────────────────────────────────── */
.am-page {
  background: var(--am-bg);
  color: var(--am-text);
}

/* ================================================================
   HERO
   ================================================================ */
.am-hero {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 61px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.am-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.am-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.am-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(13, 26, 35, 0.15) 0%,
    rgba(13, 26, 35, 0.10) 40%,
    rgba(13, 26, 35, 0.85) 80%,
    rgba(13, 26, 35, 1.00) 100%
  );
}

.am-hero-content {
  position: relative;
  z-index: 2;
  padding: 48px 32px 56px;
  max-width: 720px;
}

@media (min-width: 760px) {
  .am-hero-content {
    padding: 64px 64px 72px;
  }
}

/* ── .page-hero-label Farbüberschreibung ── */
.am-page .page-hero-label {
  color: var(--am-sea);
  opacity: 0.90;
}

/* ── .hero-title Größenüberschreibung für am Meer ── */
.am-page .hero-title {
  font-size: clamp(72px, 14vw, 140px);
  line-height: 0.90;
  letter-spacing: -0.02em;
  color: var(--am-text);
  margin-bottom: 20px;
}

/* ── .hero-meta Überschreibung für am Meer ── */
.am-page .hero-meta {
  color: var(--am-sand);
  opacity: 0.80;
}

/* ── .hero-scroll-arrow Position + Farbe für am Meer ── */
.am-page .hero-scroll-arrow {
  bottom: 24px;
  right: 32px;
  color: var(--am-text);
  opacity: 0.40;
}
.am-page .hero-scroll-arrow:hover { opacity: 0.80; }

/* ================================================================
   INTRO TEXT
   ================================================================ */
.am-intro {
  max-width: 640px;
  margin: 80px auto 0;
  padding: 0 32px;
}

@media (min-width: 760px) {
  .am-intro {
    margin-top: 96px;
    padding: 0 64px;
  }
}

.am-intro p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--am-text);
  opacity: 0.80;
  margin: 0 0 20px;
}
.am-intro p:last-child { margin-bottom: 0; }

.am-intro-stat {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--am-sea);
  margin-top: 32px;
  opacity: 0.70;
}

/* ================================================================
   GALLERY
   ================================================================ */
.am-gallery {
  padding: 96px 0 0;
  display: flex;
  flex-direction: column;
  gap: 100px;
}

@media (min-width: 760px) {
  .am-gallery { padding-top: 120px; gap: 120px; }
}

/* Alle figures: kein Margin, natürliche Proportionen */
.am-gallery figure {
  margin: 0;
  padding: 0;
}
.am-gallery figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Captions ─────────────────────────────────────────────────── */
.am-gallery figcaption {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.55;
  color: var(--am-muted);
  font-style: italic;
}

/* ================================================================
   BLOCK-TYPEN
   ================================================================ */

/* Solo: Querformat, volle Breite */
.am-block--solo { /* kein extra Style nötig */ }

/* Pair: zwei Hochformate nebeneinander */
.am-block--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

/* Trio: [Stack links 50%] + [Hochformat rechts 50%] */
.am-block--trio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.am-trio-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Story: Bild ~70% + Text daneben */
.am-block--story {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 48px;
  align-items: start;
}

.am-story-text {
  padding-top: 8px;
}
.am-story-text p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.75;
  color: var(--am-text);
  opacity: 0.70;
  margin: 0 0 16px;
}
.am-story-text p:last-child { margin-bottom: 0; }

/* ── Mobile: alles stapeln ────────────────────────────────────── */
@media (max-width: 640px) {
  .am-block--pair,
  .am-block--trio,
  .am-block--story {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ================================================================
   CLOSING
   ================================================================ */
.am-closing {
  max-width: 640px;
  margin: 96px auto 0;
  padding: 0 32px 120px;
  text-align: center;
}

@media (min-width: 760px) {
  .am-closing {
    padding: 0 64px 140px;
  }
}

.am-closing-year {
  display: block;
  font-family: var(--font-display);
  font-size: 100px;
  font-weight: 900;
  line-height: 1;
  color: var(--am-sea);
  opacity: 0.08;
  margin-bottom: -24px;
  letter-spacing: -0.04em;
}

.am-closing-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--am-text);
  opacity: 0.60;
  margin: 0 0 32px;
}

/* ── Fade-in utility ────────────────────────────────────────────── */
/* ── Ghost button: Farbüberschreibung für dunkles am-Meer-Theme ── */
.am-page .btn-ghost-light {
  color: var(--am-text);
  border-color: rgba(232,224,212,0.25);
}
.am-page .btn-ghost-light:hover {
  border-color: var(--am-sea);
  color: var(--am-sea);
}

/* ================================================================
   LIGHTBOX (re-use from main.js gallery, minimal overrides)
   ================================================================ */
[data-lightbox="am-meer"] .photo-item {
  cursor: zoom-in;
}

/* ================================================================
   SERIES CARD VARIANT — used on /street/ index
   (not scoped to .am-page so it works outside the series page)
   ================================================================ */

.series-card--single .series-card-photos {
  overflow: hidden;
  min-height: 380px;
}
.series-card--single .series-card-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(80%) brightness(0.60);
  transition: filter 0.55s ease, transform 0.55s ease;
}
.series-card--single:hover .series-card-photos img {
  filter: none;
  transform: scale(1.03);
}

@media (max-width: 1024px) {
  .series-card--single .series-card-photos {
    min-height: 240px;
    height: 240px;
  }
}
@media (max-width: 767px) {
  .series-card--single .series-card-photos {
    min-height: 180px;
    height: 180px;
  }
}