/* ============================================================
   DG Blocks — frontend.css
   Block-spezifische Stile die nicht im Theme stehen
   ============================================================ */

/* CF7 Placeholder rendern wenn Shortcode fehlt */
.dg-cf7-placeholder { display: none; }

/* Shop Grid Variable Spalten */
.dg-shop-grid {
  grid-template-columns: repeat(var(--dg-cols, 3), 1fr);
}

/* Blog Grid Variable Spalten */
.dg-blog-grid {
  grid-template-columns: repeat(var(--dg-cols, 3), 1fr);
}

/* Palette Switcher auf Seiten (wenn Block eingebaut) */
.dg-palette-switcher-block {
  position: fixed;
  bottom:   1.75rem;
  left:     1.75rem;
  z-index:  300;
  display:  flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}

/* ── Portfolio Strip Filter Tabs ─────────────────────────── */
.dg-strip-filter {
  display:   flex;
  gap:       1.5rem;
  flex-wrap: wrap;
  padding:   0 clamp(1rem, 3vw, 2rem) 1.25rem;
}

.dg-filter-btn {
  background:     none;
  border:         none;
  border-bottom:  1px solid transparent;
  cursor:         pointer;
  font-family:    inherit;
  font-size:      0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--dg-muted);
  padding:        0.3rem 0;
  transition:     color 0.2s, border-color 0.2s;
}

.dg-filter-btn:hover,
.dg-filter-btn.active {
  color:              var(--dg-text);
  border-bottom-color: var(--dg-accent);
}

/* Strip height via CSS variable */
.dg-portfolio-strip {
  height: var(--strip-height, clamp(350px, 70vh, 780px));
  align-items: stretch;
}
.dg-si {
  height: var(--strip-height, clamp(350px, 70vh, 780px));
}

/* Gallery strip height variable */
.dg-gallery--horizontal .dg-gallery__item {
  height: var(--strip-height, clamp(280px, 55vh, 600px));
}

/* Masonry columns variable */
.dg-gallery--masonry {
  columns: var(--dg-columns, 3);
}

/* Shop card meta */
.dg-shop-card__meta {
  font-size:      0.72rem;
  color:          var(--dg-muted);
  opacity:        0.75;
  margin-top:     0.25rem;
  letter-spacing: 0.06em;
}

/* ── Full-bleed override (WordPress contentSize) ────────── */
/* Alle full-bleed Blöcke: WordPress-Layout-Constraint aufheben */
.dg-about-hero,
.dg-project-intro,
.dg-facts,
.dg-interlude,
.dg-hero,
.dg-portfolio-strip-block,
.dg-about,
.dg-contact,
.dg-gallery--horizontal {
  max-width:    none !important;
  margin-left:  0    !important;
  margin-right: 0    !important;
}

/* ── About Hero ──────────────────────────────────────────── */

.dg-about-hero {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  height:                calc(100svh - 62px);
  overflow:              hidden;
}

.dg-about-hero__img {
  overflow: hidden;
  background: var(--dg-surface);
}
.dg-about-hero__img img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center 15%;
}
.dg-about-hero__img-placeholder {
  width: 100%; height: 100%;
  background: var(--dg-surface);
}

.dg-about-hero__text {
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end;
  padding:         clamp(3rem,7vw,7rem) clamp(2rem,5vw,5rem);
  border-left:     1px solid var(--dg-border);
  overflow-y:      auto;
}

.dg-about-hero__name {
  font-size:   clamp(3rem,8vw,7rem);
  font-style:  italic;
  line-height: .95;
  margin:      .5rem 0 2rem;
}

.dg-about-hero__lead {
  font-size:   clamp(1rem,1.8vw,1.2rem);
  line-height: 1.85;
  color:       var(--dg-muted);
  max-width:   48ch;
}

@media (max-width: 860px) {
  .dg-about-hero {
    grid-template-columns: 1fr;
    height:                auto;
    overflow:              visible;
  }
  .dg-about-hero__img      { height: 70vw; }
  .dg-about-hero__text     { border-left: none; border-top: 1px solid var(--dg-border); }
}

/* ── Facts / Steckbrief ──────────────────────────────────── */

.dg-facts {
  background: var(--dg-surface);
  padding:    clamp(3rem,6vw,6rem) clamp(1.5rem,5vw,4rem);
  border-top: 1px solid var(--dg-border);
}
.dg-facts__title {
  font-size:     clamp(1.5rem,3vw,2.4rem);
  font-style:    italic;
  margin:        .4rem 0 2.5rem;
}
.dg-facts__grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:                   2rem 3rem;
}
.dg-facts__key {
  margin-bottom: .4rem;
}
.dg-facts__val {
  font-size:   .95rem;
  line-height: 1.6;
}

/* ── Project Intro Split-Layout ─────────────────────────── */

/* WordPress constrains post-content to contentSize — override for full-bleed */
.single-portfolio .wp-block-post-content,
.single-portfolio .wp-block-post-content > *,
.single-portfolio .entry-content > * {
  max-width:     none !important;
  margin-left:   0 !important;
  margin-right:  0 !important;
  padding-left:  0 !important;
  padding-right: 0 !important;
}

/* Back-link inside left column */
.dg-pi__back {
  display:        inline-flex;
  align-items:    center;
  gap:            .5rem;
  font-size:      .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          var(--dg-muted);
  margin-bottom:  2rem;
  transition:     color .2s;
}
.dg-pi__back:hover { color: var(--dg-text); }

.dg-project-intro {
  display:               grid;
  grid-template-columns: 32% 68%;
  height:                calc(100svh - 62px);
  overflow:              hidden;
}

.dg-pi__text {
  padding:         clamp(2rem,4vw,4rem) clamp(1.5rem,4vw,3.5rem);
  display:         flex;
  flex-direction:  column;
  justify-content: flex-start;
  border-right:    1px solid var(--dg-border);
  overflow-y:      auto;
}

.dg-pi__title {
  font-size:     clamp(2rem, 4vw, 3.6rem);
  font-style:    italic;
  line-height:   1.05;
  margin:        .4rem 0 .5rem;
  overflow-wrap: break-word;
  hyphens:       auto;
}

.dg-pi__subtitle {
  font-size:      .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--dg-muted);
  margin-bottom:  2rem;
  padding-bottom: 2rem;
  border-bottom:  1px solid var(--dg-border);
}

.dg-pi__meta {
  display:       flex;
  gap:           1.5rem;
  margin-bottom: 2rem;
  flex-wrap:     wrap;
}
.dg-pi__meta-item {
  display:        flex;
  flex-direction: column;
  gap:            .2rem;
}
.dg-pi__meta-item span:last-child {
  font-size: .85rem;
  color:     var(--dg-text);
}

.dg-pi__desc {
  font-size:   1rem;
  line-height: 1.9;
  color:       var(--dg-muted);
  max-width:   44ch;
}
.dg-pi__desc + .dg-pi__desc { margin-top: 1rem; }

.dg-pi__quote {
  margin-top:   2rem;
  padding-left: 1.25rem;
  border-left:  2px solid var(--dg-accent);
}
.dg-pi__quote p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style:  italic;
  font-size:   1.2rem;
  color:       var(--dg-text);
  line-height: 1.55;
}
.dg-pi__quote cite {
  display:    block;
  font-size:  .82rem;
  font-style: normal;
  color:      var(--dg-muted);
  margin-top: .4rem;
}

/* Rechte Spalte: Strip */
.dg-pi__strip-wrap {
  position:   relative;
  overflow:   hidden;
  background: var(--dg-surface);
}

.dg-pi__strip {
  display:                  flex;
  height:                   100%;
  gap:                      4px;
  overflow-x:               auto;
  overflow-y:               hidden;
  scroll-snap-type:         x proximity;
  scroll-behavior:          smooth;
  -webkit-overflow-scrolling: touch;
  cursor:                   grab;
  user-select:              none;
  scrollbar-width:          none;
}
.dg-pi__strip:active          { cursor: grabbing; }
.dg-pi__strip::-webkit-scrollbar { display: none; }

.dg-pi__si {
  flex-shrink:    0;
  scroll-snap-align: start;
  overflow:       hidden;
  position:       relative;
  background:     var(--dg-surface);
  height:         100%;
  min-width:      28vw;
  cursor:         pointer;
}
.dg-pi__si img {
  height:          100%;
  width:           auto;
  max-width:       none;
  display:         block;
  object-fit:      unset;
  transition:      transform .7s cubic-bezier(.25,.46,.45,.94);
  pointer-events:  none;
  -webkit-user-drag: none;
}
.dg-pi__si:hover img { transform: scale(1.03); }

.dg-pi__si-info {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgba(0,0,0,.28) 0%, transparent 50%);
  opacity:    0;
  transition: opacity .35s;
  display:    flex;
  align-items: flex-end;
  padding:    1rem 1.1rem;
}
.dg-pi__si:hover .dg-pi__si-info { opacity: 1; }
.dg-pi__si-label {
  font-size:      .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          rgba(255,255,255,.88);
}

.dg-pi__strip-fade {
  position:   absolute;
  top: 0; right: 0; bottom: 0;
  width:      clamp(60px,10vw,120px);
  background: linear-gradient(to right, transparent, var(--dg-bg));
  pointer-events: none;
  z-index:    2;
}

.dg-pi__scroll-hint {
  position:       absolute;
  right:          clamp(.75rem,2vw,1.25rem);
  bottom:         1rem;
  z-index:        3;
  display:        flex;
  align-items:    center;
  gap:            .4rem;
  font-size:      .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--dg-muted);
  pointer-events: none;
  animation:      dg-pi-hint 2.4s ease-in-out infinite;
}
@keyframes dg-pi-hint {
  0%,100% { opacity:.5; transform:translateX(0); }
  50%      { opacity:1;  transform:translateX(5px); }
}

.dg-pi__empty {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  padding:         2rem;
}

@media (max-width: 900px) {
  .dg-project-intro {
    grid-template-columns: 1fr;
    height:               auto;
    overflow:             visible;
  }
  .dg-pi__text       { border-right: none; border-bottom: 1px solid var(--dg-border); max-height: none; }
  .dg-pi__strip-wrap { height: clamp(400px, 75svh, 680px); }

  /* Nummerierung auf Touch-Screens immer leicht sichtbar */
  .dg-pi__si-info {
    opacity: 1;
    background: linear-gradient(to top, rgba(0,0,0,.22) 0%, transparent 40%);
  }
  .dg-pi__si-label { color: rgba(255,255,255,.65); }
}

/* Pagination */
.dg-pagination {
  display:         flex;
  justify-content: center;
  gap:             0.5rem;
  padding:         3rem 1.5rem;
}
.dg-pagination .page-numbers {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  width:          2rem;
  height:         2rem;
  border:         1px solid var(--dg-border);
  font-size:      0.72rem;
  color:          var(--dg-muted);
  transition:     border-color 0.2s, color 0.2s;
}
.dg-pagination .page-numbers.current,
.dg-pagination .page-numbers:hover {
  border-color: var(--dg-text);
  color:        var(--dg-text);
}

/* ── Feature Cards ──────────────────────────────────────────── */

.dg-fcards {
  padding: clamp(5rem, 10vw, 10rem) clamp(1.5rem, 5vw, 5rem);
}
.dg-fcards__intro {
  margin-bottom: clamp(3rem, 6vw, 6rem);
}
.dg-fcards__heading {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style:  italic;
  font-size:   clamp(1.9rem, 4.5vw, 3.6rem);
  line-height: 1.1;
  margin:      0.5rem 0 0;
}
.dg-fcards__grid {
  display:               grid;
  grid-template-columns: repeat(var(--dg-cols, 3), 1fr);
  gap:                   clamp(2rem, 5vw, 5rem) clamp(2rem, 4vw, 4rem);
  align-items:           start;
}
.dg-fcard {
  padding-top: 0;
}
.dg-fcard__num {
  font-family: 'Cormorant Garamond', serif;
  font-style:  italic;
  font-weight: 300;
  font-size:   clamp(2.2rem, 4.5vw, 3.6rem);
  color:       var(--dg-muted);
  opacity:     0.38;
  line-height: 1;
  margin-bottom: 0.75rem;
}
.dg-fcard__h {
  font-family:    'DM Sans', sans-serif;
  font-weight:    400;
  font-size:      0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--dg-text);
  margin-bottom:  0.85rem;
}
.dg-fcard__text {
  font-size:   0.92rem;
  color:       var(--dg-muted);
  line-height: 1.85;
}
@media (max-width: 860px) {
  .dg-fcards__grid {
    grid-template-columns: repeat(min(var(--dg-cols, 3), 2), 1fr);
  }
}
@media (max-width: 560px) {
  .dg-fcards__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Sektions-Hintergründe (alle Blöcke) ───────────────────── */

.dg-section-surface,
.dg-infobox.dg-section-surface { background: var(--dg-surface); }

.dg-section-deep,
.dg-infobox.dg-section-deep    { background: var(--dg-border); }

/* ── Infobox Block ──────────────────────────────────────────── */

/* Basis: gilt nur für Center-Layout */
.dg-infobox {
  padding: clamp(3rem, 5vw, 5rem) clamp(1.25rem, 5vw, 3rem);
}

/* ── CENTER ── */
.dg-infobox--center {
  display:         flex;
  justify-content: center;
}
.dg-infobox--center .dg-infobox__inner {
  width:          100%;
  max-width:      860px;
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;
  align-items:    center;
  text-align:     center;
}
.dg-infobox--center .dg-infobox__cta { align-self: center; }

/* BG-Styles auf dem Inhaltskasten (Center) */
.dg-infobox--center.dg-infobox--surface .dg-infobox__inner,
.dg-infobox--center.dg-infobox--accent  .dg-infobox__inner {
  background: var(--dg-surface);
  padding:    clamp(2rem, 4vw, 3.5rem);
}
.dg-infobox--center.dg-infobox--accent .dg-infobox__inner {
  border-left: 3px solid var(--dg-accent);
}

/* ── SPLIT (links / rechts) ── */
.dg-infobox--split-left,
.dg-infobox--split-right {
  /* Kein äußeres Padding — Bild geht kantenbündig, Inhalt bekommt eigenen Innenabstand */
  padding:               0;
  display:               grid;
  grid-template-columns: 1fr 1fr;
  min-height:            460px;
  align-items:           stretch;
  max-width:             1340px;
  margin:                0 auto;
  gap:                   0;
}

/* Vertikaler Außenabstand um Split-Sektionen */
.dg-infobox--split-left  { padding-top: clamp(2.5rem, 4vw, 4rem); padding-bottom: clamp(2.5rem, 4vw, 4rem); }
.dg-infobox--split-right { padding-top: clamp(2.5rem, 4vw, 4rem); padding-bottom: clamp(2.5rem, 4vw, 4rem); }

/* Content-Spalte: eigener Innenabstand, vertikal zentriert */
.dg-infobox__content {
  display:         flex;
  flex-direction:  column;
  gap:             1.5rem;
  justify-content: center;
  padding:         clamp(2.5rem, 5vw, 5rem) clamp(2rem, 4vw, 4.5rem);
}

/* BG-Styles auf dem Inhaltskasten (Split) */
.dg-infobox--surface .dg-infobox__content,
.dg-infobox--accent  .dg-infobox__content {
  background: var(--dg-surface);
}
.dg-infobox--accent .dg-infobox__content {
  border-left: 3px solid var(--dg-accent);
}

/* Inhaltskasten auf getönten Sektionen: --dg-bg statt --dg-surface */
.dg-section-surface.dg-infobox--surface .dg-infobox__content,
.dg-section-surface.dg-infobox--accent  .dg-infobox__content,
.dg-section-deep.dg-infobox--surface    .dg-infobox__content,
.dg-section-deep.dg-infobox--accent     .dg-infobox__content,
.dg-section-surface.dg-infobox--center.dg-infobox--surface .dg-infobox__inner,
.dg-section-surface.dg-infobox--center.dg-infobox--accent  .dg-infobox__inner,
.dg-section-deep.dg-infobox--center.dg-infobox--surface    .dg-infobox__inner,
.dg-section-deep.dg-infobox--center.dg-infobox--accent     .dg-infobox__inner {
  background: var(--dg-bg);
}

/* Heading */
.dg-infobox__heading {
  font-size:   clamp(1.9rem, 3vw, 2.8rem);
  font-weight: 300;
  font-style:  italic;
  line-height: 1.1;
  color:       var(--dg-text);
  margin:      0;
}

/* Body text */
.dg-infobox__body {
  font-size:   1rem;
  line-height: 1.8;
  color:       var(--dg-muted);
  margin:      0;
}

/* CTA */
.dg-infobox__cta { align-self: flex-start; }

/* ── Seiten-Inhalt ── */

/* Bild: füllt die Zelle vollständig — Höhe durch Textspalte */
.dg-infobox__side-img {
  overflow:   hidden;
  width:      100%;
  height:     100%;
  min-height: 400px;
}
.dg-infobox__side-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.dg-infobox__side-img:hover img { transform: scale(1.03); }

/* Zitat-/Textspalte */
.dg-infobox__side-text {
  display:         flex;
  align-items:     center;
  font-style:      italic;
  font-size:       clamp(1.35rem, 2.2vw, 1.95rem);
  line-height:     1.5;
  color:           var(--dg-muted);
  padding:         clamp(2.5rem, 5vw, 5rem) clamp(2rem, 4vw, 4.5rem);
  border-top:      1px solid var(--dg-border);
  border-bottom:   1px solid var(--dg-border);
}

/* Platzhalter wenn noch kein Bild gewählt */
.dg-infobox__side-empty {
  background:  var(--dg-surface);
  width:       100%;
  height:      100%;
  min-height:  400px;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .dg-infobox--split-left,
  .dg-infobox--split-right {
    grid-template-columns: 1fr;
    min-height:            0;
    padding-left:  clamp(1.25rem, 5vw, 2rem);
    padding-right: clamp(1.25rem, 5vw, 2rem);
  }
  .dg-infobox__side-img,
  .dg-infobox__side-empty { min-height: 260px; height: 260px; }
  /* Auf Mobile: Inhalt immer oben */
  .dg-infobox--split-right .dg-infobox__content { order: -1; }
  .dg-infobox__content {
    padding: clamp(1.75rem, 5vw, 2.5rem) 0;
  }
}