/* ==========================================================================
   Hey Rasterei — Portfolio-Case „Emma & Noah“ (portfolio/emma-und-noah/)
   Baut auf css/afterglow.css (gemeinsames Case-Raster) auf und ergänzt nur,
   was dieses Projekt anders braucht. Rasterei rahmt, das Wedding-Material lebt in den Medien.
   ========================================================================== */

/* Hero: Website + Save-the-Date überlappt */
.wd-hero-vis { padding-bottom: calc(var(--cell) * 1.3); }
.wd-hero-std { position: absolute; right: calc(var(--cell) * -.15); bottom: 0; width: 44%; margin: 0; transform: rotate(3deg); box-shadow: 6px 6px 0 var(--ink); }
.wd-hero-std img { width: 100%; height: auto; }

/* Gestaltungsübersicht */
.wd-board { transform: rotate(-1deg); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.wd-board:hover { transform: rotate(0); }

/* Drucksachen: Hoch- und Querformat im Originalverhältnis */
.wd-print-std { transform: rotate(1.5deg); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.wd-print-menu { transform: rotate(-1.5deg); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.wd-print-sign { transform: rotate(1.5deg); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.wd-print-std:hover, .wd-print-menu:hover, .wd-print-sign:hover { transform: rotate(0); }
.wd-facts-ink dt { color: var(--ink); }
.wd-facts-ink dd { border-bottom-color: rgba(28, 26, 23, .35); }

@media (min-width: 901px) {
  .pg-wedding .wd-2col-board { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .pg-wedding .wd-2col-std { grid-template-columns: minmax(0, 1fr) calc(var(--cell) * 6.4); column-gap: calc(var(--cell) * 1.6); }
  .pg-wedding .wd-2col-menu { grid-template-columns: calc(var(--cell) * 4.4) minmax(0, 1fr); column-gap: calc(var(--cell) * 1.6); }
  .pg-wedding .wd-2col-sign { grid-template-columns: minmax(0, 1fr) calc(var(--cell) * 4.4); column-gap: calc(var(--cell) * 1.6); }
}

/* Zusammenspiel */
.wd-mosaic .m-sign { grid-column: span 3; transform: rotate(-1deg); }
.wd-mosaic .m-menu { grid-column: span 3; transform: rotate(.8deg); }
.wd-mosaic .m-std { grid-column: span 6; transform: rotate(-.6deg); }
.wd-mosaic .m-web { grid-column: span 8; transform: rotate(.5deg); }
.wd-mosaic .m-txt { grid-column: span 4; align-self: center; border: 0; box-shadow: none; background: none; overflow: visible; padding-left: calc(var(--cell) * .3); }
.wd-mosaic .m-txt:hover { transform: none; }
.wd-mosaic .m-txt .ag-chips { margin-top: 18px; }

@media (max-width: 900px) {
  .wd-hero-vis { padding-bottom: calc(var(--cell) * 1.6); }
  .wd-hero-std { width: 50% !important; right: 0; bottom: 0; box-shadow: 4px 4px 0 var(--ink); }
  .wd-print-std, .wd-print-menu, .wd-print-sign { width: 88%; }
  .wd-print-std { width: 100%; }
  .wd-mosaic .m-sign, .wd-mosaic .m-menu { grid-column: span 3; }
  .wd-mosaic .m-std, .wd-mosaic .m-web, .wd-mosaic .m-txt { grid-column: span 6; }
  .wd-mosaic .m-txt { padding-left: 0; margin-top: 8px; }
}
.wd-mosaic .m-txt .ag-chips li { background: none; box-shadow: none; overflow: visible; border: 2px solid var(--cream); transform: none; }
.wd-mosaic .m-txt .ag-chips li:hover { transform: none; }

/* ==========================================================================
   Mobile-Feinschliff Emma & Noah (≤900px): kompaktere Rhythmen, Mockups ausgewogen
   ========================================================================== */
@media (max-width: 900px) {
  .pg-wedding .f-auto { padding-top: calc(var(--cell) * 1.2); padding-bottom: calc(var(--cell) * 1.2); }
  .pg-wedding .ag-2col { row-gap: calc(var(--cell) * .8); }
  .pg-wedding .ag-hero { padding-bottom: calc(var(--cell) * 1); }
  .pg-wedding .wd-hero-vis { padding-bottom: calc(var(--cell) * 1.1); }
  .pg-wedding .ag-facts dd, .pg-wedding .ckv dd { -webkit-hyphens: manual; hyphens: manual; }

  /* Website-Section: zwei Browser + drei Handys; Reihenfolge nur per CSS, HTML/Desktop bleiben unverändert */
  .pg-wedding .ag-web .ag-in { padding-top: 0; padding-bottom: 0; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 18px 3%; }
  .pg-wedding .ag-web .ag-in > .ag-h2, .pg-wedding .ag-web .ag-in > .ag-p { flex: 0 0 100%; }
  .pg-wedding .ag-web .ag-in > .ag-step { flex: 0 0 auto; margin-right: 100%; }
  .pg-wedding .ag-stage, .pg-wedding .ag-stage2 { display: contents; }
  .pg-wedding .ag-stage:not(.ag-stage2) > .ag-b-main { order: 1; flex: 0 0 100%; }
  .pg-wedding .ag-stage:not(.ag-stage2) > .ag-p1 { order: 2; }
  .pg-wedding .ag-stage:not(.ag-stage2) > .ag-p2 { order: 3; }
  .pg-wedding .ag-stage2 > .ag-p1 { order: 4; }
  .pg-wedding .ag-stage2 > .ag-b-main { order: 5; flex: 0 0 100%; margin-top: 10px; }
  .pg-wedding .ag-phone { flex: 0 0 30%; width: 30%; border-width: 2.5px; border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); }
  .pg-wedding .ag-stage:not(.ag-stage2) > .ag-p1 { transform: rotate(-2deg); }
  .pg-wedding .ag-stage:not(.ag-stage2) > .ag-p2 { transform: translateY(10px); }
  .pg-wedding .ag-stage2 > .ag-p1 { transform: rotate(2deg); }
  .pg-wedding .ag-browser { box-shadow: 4px 4px 0 var(--ink); }

  /* Hochformate: mittlere Breite, weniger Leerfläche drumherum */
  .pg-wedding .wd-print-menu, .pg-wedding .wd-print-sign { width: 64%; max-width: 250px; justify-self: center; }
  .pg-wedding .wd-print-std { width: 100%; }
  .pg-wedding .ag-print .shot { box-shadow: 5px 5px 0 var(--ink); }
  .pg-wedding .wd-board { width: 100%; }

  /* Zusammenspiel */
  .pg-wedding .wd-mosaic { gap: 12px; margin: 22px 0 24px; }
}