/* Multi-Slot-Cover-Vorlagen (Template-Cover) — Namensraum cover-*.
   Rein CSS/HTML, ein Renderer (Browser) für Editor + Public.
   Farben über die bestehenden --gd-*-Variablen (cover-ink etc.).
   Slot-Bilder + Texte kommen aus GalleryDesign.cover_template_data.
   Spec §3.3 (Memory Album). */

:root {
  --font-script: 'Caveat', cursive;
  --font-handwriting: 'Kalam', cursive;
  --font-sans: 'Jost', -apple-system, system-ui, sans-serif;
}

/* Gemeinsame Slot-Basis */
.cover-template-slot,
.memory-album-grid .slot {
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
}
.cover-template-slot img,
.memory-album-grid .slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Leerer Slot → dezenter Platzhalter (kein Bruch, wenn ein Bild fehlt) */
.cover-template-slot.is-empty,
.memory-album-grid .slot.is-empty {
  background: repeating-linear-gradient(
    45deg,
    var(--gd-subtle, rgba(0, 0, 0, 0.06)),
    var(--gd-subtle, rgba(0, 0, 0, 0.06)) 10px,
    transparent 10px,
    transparent 20px
  );
}

/* ─────────────── Memory Album (Portrait) ─────────────── */
.cover-memory-album {
  position: relative;
  width: 100%;
  /* Fullscreen-Hochformat: Höhe (90vh) limitiert, Breite folgt dem Seitenverhältnis. */
  max-width: min(94vw, calc(90vh * 1080 / 1350));
  margin: 0 auto;
  aspect-ratio: 1080 / 1350;
  background: var(--gd-cover-bg, var(--gd-secondary));
  padding: 5%;
  display: flex;
  flex-direction: column;
}

.memory-album-title {
  font-family: var(--font-sans);
  font-size: calc(0.95rem * var(--gd-title-scale, 1));
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gd-cover-ink, #3a3027);
  margin-bottom: 24px;
}

.memory-album-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr 1.6fr;
  grid-template-areas:
    "tl tr"
    "tl mr"
    "bw bw";
  gap: 8px;
  min-height: 0;
}

.memory-album-grid .slot-tl { grid-area: tl; }
.memory-album-grid .slot-tr { grid-area: tr; }
.memory-album-grid .slot-mr { grid-area: mr; }
.memory-album-grid .slot-bw { grid-area: bw; }

/* Breit-Variante (Querformat, 6 Bilder im gleichen Editorial-Grid) */
.cover-memory-album.aspect-wide {
  aspect-ratio: 1620 / 1080;
  max-width: min(96vw, calc(86vh * 1620 / 1080));
}
.cover-memory-album.aspect-wide .memory-album-grid {
  grid-template-columns: 2fr 1fr 1fr 2fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "s1 s2 s3 s6"
    "s1 s4 s5 s6";
}
.memory-album-grid .slot-s1 { grid-area: s1; }
.memory-album-grid .slot-s2 { grid-area: s2; }
.memory-album-grid .slot-s3 { grid-area: s3; }
.memory-album-grid .slot-s4 { grid-area: s4; }
.memory-album-grid .slot-s5 { grid-area: s5; }
.memory-album-grid .slot-s6 { grid-area: s6; }

.memory-album-subtitle {
  font-family: var(--font-sans);
  font-size: calc(1.4rem * var(--gd-title-scale, 1));
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gd-cover-ink, #3a3027);
  margin-top: 24px;
  font-weight: 500;
}

/* ─────────────── Photo Strip (Fullscreen-Streifen) ───────────────
   Vier Bilder füllen wie ein Vollbild-Cover die Höhe; nur etwas Platz zum
   Rand. Kein Rahmen, kein Text, keine Deko. */
.cover-photo-strip {
  position: relative;
  width: 100%;
  height: 90vh;
  min-height: 480px;
  margin: 0 auto;
  background: var(--gd-cover-bg, var(--gd-secondary));
  padding: 2.5%;
  display: flex;
  flex-direction: column;
}

.photo-strip-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.photo-strip-row .strip-slot {
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
}

.photo-strip-row .strip-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .cover-photo-strip { height: auto; }
  .photo-strip-row { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 40vh; }
}

/* ─────────────── Polaroid Collection (Multi-Format) ─────────────── */
.cover-polaroid-collection {
  position: relative;
  width: 100%;
  /* Fullscreen: Höhe (92vh) limitiert, Breite folgt dem Seitenverhältnis, so
     bleibt die Scatter-Anordnung (%-Positionen) intakt und füllt den Screen. */
  max-width: min(96vw, calc(92vh * 1200 / 630));
  margin: 0 auto;
  aspect-ratio: 1200 / 630;
  background: var(--gd-cover-bg, var(--gd-secondary));
  /* overflow: visible — sonst schneidet der Container die durch Rotation leicht
     überstehenden äußeren Polaroids gerade ab ("Knick"). Der Wrapper ist breiter
     als die Box, der Überstand landet im seitlichen Freiraum. */
  overflow: visible;
}
.cover-polaroid-collection.aspect-story  { aspect-ratio: 1080 / 1920; max-width: min(90vw, calc(90vh * 1080 / 1920)); }
.cover-polaroid-collection.aspect-square { aspect-ratio: 1 / 1; max-width: min(92vw, 88vh); }

.polaroid-slot {
  position: absolute;
  background: #fff;
  padding: 2.5% 2.5% 7% 2.5%;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
  transform-origin: center center;
}
.polaroid-slot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.polaroid-slot.with-text { padding-bottom: 13%; }
.polaroid-slot.with-text img { aspect-ratio: 3 / 4.2; }

.polaroid-slot .polaroid-empty {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #ece6dd;
}
.polaroid-slot.with-text .polaroid-empty { aspect-ratio: 4 / 5; }

.polaroid-slot .polaroid-text {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 4%;
  font-family: var(--font-script);
  font-size: clamp(0.9rem, 2.4vw, 1.6rem);
  text-align: center;
  /* Fest dunkel: der Text sitzt auf dem WEISSEN Polaroid-Rand — darf NICHT der
     hellen Mode-Tinte (Dark/Mocha) folgen, sonst hell-auf-weiß = unlesbar. */
  color: #3a3027;
  line-height: 1;
}

/* dezentes Tape oben */
.polaroid-slot::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 42px;
  height: 14px;
  background: rgba(180, 170, 150, 0.4);
  border-radius: 2px;
}

/* Editor-Vorschau: identische Klassen, etwas kleiner skaliert */
.cover-template-preview .cover-memory-album {
  max-width: 320px;
}

/* ─────────────── Mobile: Multi-Slot zeigt nur EIN Bild ───────────────
   Mehrere kleine Bilder nebeneinander wirken auf dem Handy gequetscht.
   Daher pro Vorlage nur das fokale Bild full-bleed. */
@media (max-width: 640px) {
  .gd-cover-v2--template { min-height: auto !important; padding: 0 16px !important; }

  /* Memory Album (Hoch- & Breit-Format) → nur das erste/fokale Bild */
  .cover-memory-album,
  .cover-memory-album.aspect-wide {
    aspect-ratio: 4 / 5;
    max-width: 100%;
    padding: 7%;
  }
  .cover-memory-album .memory-album-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    grid-template-areas: none !important;
  }
  .memory-album-grid .slot:not(:first-child) { display: none; }
  .memory-album-grid .slot:first-child { grid-area: auto !important; }

  /* Photo Strip → nur erstes Bild */
  .cover-photo-strip { height: 62vh; min-height: 360px; padding: 0; }
  .photo-strip-row { grid-template-columns: 1fr; }
  .photo-strip-row .strip-slot:not(:first-child) { display: none; }

  /* Polaroid → nur das Hero-Polaroid, zentriert */
  .cover-polaroid-collection,
  .cover-polaroid-collection.aspect-story,
  .cover-polaroid-collection.aspect-square { aspect-ratio: 4 / 5; max-width: 100%; }
  .polaroid-slot:not(.with-text) { display: none; }
  .polaroid-slot.with-text {
    left: 8% !important;
    top: 10% !important;
    width: 84% !important;
    transform: none !important;
  }
}

/* ─────────────── Wedding Wreath (Medaillon + Curved Text) ───────────────
   2×2-Bildraster mit zentralem Kranz-Medaillon. Namen liegen als SVG-
   textPath auf zwei Bögen, Verbindungswort zentral. Kranz-SVG + Innenkreis
   überlagern die Bildkanten (z-index), wodurch die Bilder verbunden wirken.
   Medaillon-Größe/Rotation/Innen-Opazität/Rahmenfarbe kommen inline. */
.cover-wedding-wreath {
  position: relative;
  width: 100%;
  max-width: min(96vw, calc(90vh * 1200 / 800));
  margin: 0 auto;
  aspect-ratio: 1200 / 800;
  background: var(--gd-cover-bg, var(--gd-secondary));
  border: 3px solid #c9a96e;
  overflow: hidden;
}
/* Skalierbare Inhalts-Ebene: Bilder + Medaillon werden proportional als
   Einheit vergrößert (transform:scale inline), wodurch der Rand schrumpft.
   Das Padding sitzt hier (nicht am Rahmen), damit der Inhalt beim
   Hochskalieren bis an den Goldrahmen heranwachsen kann. */
.cover-wedding-wreath .ww-stage {
  position: absolute;
  inset: 0;
  padding: 3%;
  transform-origin: center center;
}
.cover-wedding-wreath .ww-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "tl tr" "bl br";
  gap: 6px;
  width: 100%;
  height: 100%;
}
.cover-wedding-wreath .ww-slot { overflow: hidden; background: rgba(0,0,0,0.04); }
.cover-wedding-wreath .ww-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-wedding-wreath .ww-slot-tl { grid-area: tl; }
.cover-wedding-wreath .ww-slot-tr { grid-area: tr; }
.cover-wedding-wreath .ww-slot-bl { grid-area: bl; }
.cover-wedding-wreath .ww-slot-br { grid-area: br; }

.cover-wedding-wreath .ww-medallion {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.cover-wedding-wreath .ww-inner {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  z-index: 1;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
}
.cover-wedding-wreath .ww-wreath {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  z-index: 2;
  transform-origin: center center;
}
.cover-wedding-wreath .ww-text-curves {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 3;
}
.cover-wedding-wreath .ww-name {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 30px;            /* SVG-Userunits → skaliert mit dem Medaillon */
  font-weight: 400;
  letter-spacing: 0.18em;
  /* --ww-ink = eigene Schriftfarbe (inline), sonst Thema-Textfarbe. */
  fill: var(--ww-ink, var(--gd-cover-ink, #3a3027));
}
.cover-wedding-wreath .ww-name--sm { font-size: 24px; }
.cover-wedding-wreath .ww-name--xs { font-size: 19px; }
.cover-wedding-wreath .ww-connector {
  position: relative;
  z-index: 3;
  font-family: var(--font-script, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: clamp(1rem, 2.6vw, 1.9rem);
  color: var(--ww-ink, var(--gd-cover-ink, #3a3027));
}

@media (max-width: 640px) {
  /* Hochformatiger Ausschnitt, Raster + Medaillon bleiben (der Kranz ist der
     Hero — anders als bei den reinen Bild-Vorlagen zeigen wir hier weiter 2×2). */
  .cover-wedding-wreath { aspect-ratio: 1 / 1; max-width: 100%; padding: 5%; }
}