/* =============================================================================
   Case Studies — Layout Module
   Shared styles für /case-studies (Index) und /case-studies/* (Detail).
   REGEL: NUR Layout. Alle Werte via CSS Custom Properties aus globals.css.
   ============================================================================= */


/* =============================================================================
   INDEX — HERO
   ============================================================================= */

.cs-hero {
  padding-inline: var(--page-margin);
  padding-top:    calc(3rem + var(--space-xl));
  padding-bottom: var(--space-lg);
  border-bottom:  var(--border-hairline) solid var(--color-border);
}

.cs-hero__eyebrow {
  color:         var(--color-fg-muted);
  margin-bottom: var(--space-sm);
}

.cs-hero__sub {
  margin-top: var(--space-md);
  max-width:  52ch;
  color:      var(--color-fg-muted);
}


/* =============================================================================
   INDEX — CARD GRID
   ============================================================================= */

.cs-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-sm);
  padding-inline:        var(--page-margin);
  padding-block:         var(--space-lg);
}

.cs-card {
  display:        flex;
  flex-direction: column;
  border:         var(--border-hairline) solid var(--color-border);
  overflow:       hidden;
  transition:     border-color var(--dur-quick) var(--ease-material);
}

.cs-card:hover {
  border-color: var(--color-border-strong);
}

.cs-card__link {
  display:        flex;
  flex-direction: column;
  height:         100%;
}

.cs-card__img-wrap {
  aspect-ratio: 3 / 4;
  overflow:     hidden;
  background:   var(--color-bg-elevated);
}

.cs-card__img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-material);
}

.cs-card:hover .cs-card__img {
  transform: scale(1.03);
}

.cs-card__meta {
  padding:        var(--space-md);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xs);
  border-top:     var(--border-hairline) solid var(--color-border);
  flex:           1;
}

.cs-card__tag {
  color: var(--color-fg-muted);
}

.cs-card__title {
  font-weight: 500;
  margin-top:  var(--space-xs);
}

.cs-card__excerpt {
  color:      var(--color-fg-muted);
  margin-top: var(--space-xs);
}

.cs-card__arrow {
  margin-top:  auto;
  padding-top: var(--space-md);
  color:       var(--color-fg-muted);
  transition:  color var(--dur-quick) var(--ease-material);
}

.cs-card:hover .cs-card__arrow {
  color: var(--color-fg);
}


/* =============================================================================
   DETAIL — PAGE WRAPPER
   ============================================================================= */

.cs-detail {
  width:      100%;
  overflow-x: hidden;
}


/* =============================================================================
   DETAIL — HERO (Vollbild, erste Falz)
   ============================================================================= */

.cs-detail__hero {
  position: relative;
  width:    100%;
  height:   100svh;
}

.cs-detail__hero-img-wrap {
  position: absolute;
  inset:    0;
  overflow: hidden;
}

.cs-detail__hero-img {
  display:         block;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
}

.cs-detail__hero-bar {
  position:        absolute;
  bottom:          0;
  left:            0;
  right:           0;
  padding-inline:  var(--page-margin);
  padding-block:   var(--space-md);
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  background:      linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 100%);
}

.cs-detail__hero-title {
  color: var(--color-on-media);
}

.cs-detail__hero-back {
  color:      var(--color-on-media);
  opacity:    0.7;
  transition: opacity var(--dur-quick) var(--ease-material);
  hyphens:    none;
}

.cs-detail__hero-back:hover {
  opacity: 1;
}


/* =============================================================================
   DETAIL — HEADER (Titel + Meta-Tabelle)
   ============================================================================= */

.cs-detail__header {
  display:               grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap:                   var(--grid-gap);
  padding-inline:        var(--page-margin);
  padding-block:         var(--space-xl);
  border-top:            var(--border-hairline) solid var(--color-border);
}

.cs-detail__identity {
  grid-column:    span 6;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-sm);
  padding-right:  var(--space-lg);
}

.cs-detail__eyebrow {
  color: var(--color-fg-muted);
}

.cs-detail__intro {
  color:      var(--color-fg-muted);
  max-width:  48ch;
  margin-top: var(--space-sm);
}

.cs-detail__meta-col {
  grid-column:    span 10;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-lg);
}

.cs-detail__cta-block {
  display:     flex;
  gap:         var(--space-sm);
  flex-wrap:   wrap;
  padding-top: var(--space-md);
  border-top:  var(--border-hairline) solid var(--color-border);
}

.cs-detail__cta-primary {
  display:     inline-flex;
  align-items: center;
  gap:         var(--space-xs);
  background:  var(--color-fg);
  color:       var(--color-bg);
  padding:     0.6em 1.2em;
  transition:  background var(--dur-quick) var(--ease-material),
               color      var(--dur-quick) var(--ease-material);
  hyphens:     none;
}

.cs-detail__cta-primary:hover {
  background: var(--color-forge);
  color:      var(--color-ivory);
}


/* =============================================================================
   DETAIL — TEXT SECTIONS (Aufgabe / Lösung)
   ============================================================================= */

.cs-detail__section {
  display:               grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap:                   var(--grid-gap);
  padding-inline:        var(--page-margin);
  padding-block:         var(--space-lg);
  border-top:            var(--border-hairline) solid var(--color-border);
}

.cs-detail__section-label {
  grid-column: span 3;
  color:       var(--color-fg-muted);
  padding-top: 0.2em;
}

.cs-detail__section-text {
  grid-column: span 9;
  max-width:   68ch;
}


/* =============================================================================
   DETAIL — GALERIE
   ============================================================================= */

.cs-detail__gallery {
  display:               grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap:                   var(--space-sm);
  padding-inline:        var(--page-margin);
  padding-bottom:        var(--space-lg);
}

.cs-detail__gallery-wrap {
  overflow:   hidden;
  background: var(--color-bg-elevated);
}

.cs-detail__gallery-wrap--wide {
  grid-column:  span 8;
  aspect-ratio: 4 / 3;
}

.cs-detail__gallery-wrap--narrow {
  grid-column:  span 4;
  aspect-ratio: 3 / 4;
}

.cs-detail__gallery-wrap--half {
  grid-column:  span 6;
  aspect-ratio: 4 / 3;
}

.cs-detail__gallery-wrap--full {
  grid-column:  1 / -1;
  aspect-ratio: 16 / 7;
}

.cs-detail__gallery-img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
}


/* =============================================================================
   DETAIL — FOOTER-NAVIGATION
   ============================================================================= */

.cs-detail__footer-nav {
  display:         grid;
  grid-template-columns: 1fr 1fr;
  border-top:      var(--border-hairline) solid var(--color-border);
}

.cs-detail__nav-link {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xs);
  padding-inline: var(--page-margin);
  padding-block:  var(--space-lg);
  transition:     background var(--dur-quick) var(--ease-material);
  hyphens:        none;
}

.cs-detail__nav-link:hover {
  background: var(--color-bg-elevated);
}

.cs-detail__nav-link--next {
  border-left: var(--border-hairline) solid var(--color-border);
  text-align:  right;
}

.cs-detail__nav-direction {
  color: var(--color-fg-muted);
}

.cs-detail__nav-title {
  /* type-body via HTML */
}


/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 1024px) {
  .cs-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cs-detail__identity {
    grid-column:   span 8;
    padding-right: var(--space-md);
  }

  .cs-detail__meta-col {
    grid-column: 1 / -1;
  }

  .cs-detail__identity {
    grid-column:  1 / -1;
    padding-right: 0;
  }
}

@media (max-width: 768px) {
  .cs-grid {
    grid-template-columns: 1fr;
  }

  .cs-detail__hero {
    height: 85svh;
  }

  .cs-detail__header {
    padding-block: var(--space-lg);
  }

  .cs-detail__identity,
  .cs-detail__meta-col {
    grid-column: 1 / -1;
  }

  .cs-detail__section-label,
  .cs-detail__section-text {
    grid-column: 1 / -1;
  }

  .cs-detail__gallery-wrap--wide,
  .cs-detail__gallery-wrap--narrow,
  .cs-detail__gallery-wrap--half,
  .cs-detail__gallery-wrap--full {
    grid-column:  1 / -1;
    aspect-ratio: 4 / 3;
  }

  .cs-detail__footer-nav {
    grid-template-columns: 1fr;
  }

  .cs-detail__nav-link--next {
    border-left: none;
    border-top:  var(--border-hairline) solid var(--color-border);
    text-align:  left;
  }
}