/* ═══════════════════════════════════════════════════════════
   POTTERY WORKSHOPS (workshops.html) – Namensraum wh-
   Ans Ende der styles.css anhängen.
   Nutzt hp- Bausteine (hp-eyebrow, hp-btn, hp-ph, hp-ph-label,
   hp-t1/t2/t3) von der Startseite mit.
   ═══════════════════════════════════════════════════════════ */

/* 01 HERO */
.wh-hero { position: relative; height: 60vh; min-height: 420px; background: #e3e5e9; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; }
.wh-hero-title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem,6vw,4.6rem); line-height: 1.08; letter-spacing: -.01em; color: #2a2a2a; margin: 1rem 0 0; max-width: 15ch; }
.wh-hero-sub { font-family: var(--sans); font-size: clamp(1rem,1.6vw,1.2rem); color: rgba(0,0,0,.55); margin-top: 1.3rem; max-width: 46ch; }
.wh-hero .hp-btn { margin-top: 2.2rem; }

/* 02 SPECIALS */
.wh-specials { padding: 6rem 3rem 2rem; max-width: 1200px; margin: 0 auto; }
.wh-sp-head { text-align: center; margin-bottom: 3rem; }
.wh-sp-title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem,3vw,2.6rem); margin: .8rem 0; }
.wh-sp-head p { font-family: var(--sans); color: #7a7a7a; }
.wh-sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.wh-sp-card { position: relative; border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; display: block; border: 1px solid #eee; transition: border-color .2s; }
.wh-sp-card:hover { border-color: #ccc; }
.wh-sp-img {
  aspect-ratio: 16/10;
  overflow: hidden;
}

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

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

.wh-sp-body { padding: 1.8rem 2rem 2rem; }
.wh-sp-tag { display: inline-block; font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; background: #1a1a1a; padding: 5px 12px; border-radius: 20px; margin-bottom: 1rem; }
.wh-sp-card h3 { font-family: var(--serif); font-weight: 500; font-size: 1.7rem; margin-bottom: .5rem; }
.wh-sp-card p { font-family: var(--sans); color: #7a7a7a; font-size: .95rem; margin-bottom: 1rem; }
.wh-sp-meta { font-family: var(--sans); font-weight: 600; }
.wh-sp-meta .dur { font-weight: 400; color: #999; font-size: .88rem; }

/* 03 ALL WORKSHOPS */
.wh-grid-wrap { padding: 4rem 3rem 7rem; max-width: 1300px; margin: 0 auto; }
.wh-grid-head { text-align: center; margin-bottom: 3rem; }
.wh-grid-title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem,3vw,2.6rem); margin-top: .8rem; }
.wh-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2.5rem 2rem; }
.wh-grid + .wh-grid-head {
  margin-top: 4rem;
  margin-bottom: 0;
}
.wh-card { text-decoration: none; color: inherit; display: block; }
.wh-card-img { position: relative; aspect-ratio: 4/5; border-radius: 12px; overflow: hidden; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.wh-card:hover .wh-card-img { transform: translateY(-4px); }
.wh-cat { position: absolute; top: 12px; left: 12px; font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; background: rgba(27,76,156,.92); padding: 5px 10px; border-radius: 20px; }
.wh-card h3 { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; margin: 1rem 0 .3rem; line-height: 1.25; }
.wh-card .desc { font-family: var(--sans); font-size: .9rem; color: #7a7a7a; line-height: 1.55; margin-bottom: .6rem; }
.wh-card .meta { font-family: var(--sans); font-weight: 600; font-size: 1rem; }
.wh-card .meta .dur { font-weight: 400; color: #999; font-size: .85rem; }

/* 04 PRIVATE EVENTS */
.wh-events { position: relative; height: 52vh; min-height: 360px; overflow: hidden; }
.wh-events-img { position: absolute; inset: 0; }
.wh-events-body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; background: rgba(0,0,0,.34); }
.wh-events-body h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem,3.5vw,3rem); color: #fff; max-width: 18ch; margin: 0; }
.wh-events-body p { font-family: var(--sans); color: rgba(255,255,255,.9); margin: 1rem 0 1.8rem; max-width: 44ch; }

/* 05 FAQ */
.wh-faq { text-align: center; padding: 6rem 2rem; border-top: 1px solid #eee; }
.wh-faq h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem,2.6vw,2.2rem); margin-bottom: .8rem; }
.wh-faq p { font-family: var(--sans); color: #7a7a7a; margin-bottom: 1.8rem; }

@media (max-width: 900px) {
  .wh-sp-grid { grid-template-columns: 1fr; }
  .wh-grid { grid-template-columns: 1fr 1fr; }
  .wh-specials, .wh-grid-wrap { padding-left: 1.6rem; padding-right: 1.6rem; }
}
@media (max-width: 560px) {
  .wh-grid { grid-template-columns: 1fr; }
}

/* Final workshop overview imagery */

.wh-hero {
  background:
    linear-gradient(
      rgba(0, 0, 0, 0.28),
      rgba(0, 0, 0, 0.28)
    ),
    url("/assets/img/pottery-workshops-hero.jpg");

  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}

.wh-hero .hp-eyebrow,
.wh-hero-title {
  color: #fff;
}

.wh-hero-sub {
  color: rgba(255, 255, 255, 0.9);
}

.wh-events-photo {
  background-image: url("/assets/img/experience/Bachelorette.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 560px) {

  .wh-specials {
    padding: 4rem 1rem 2rem;
  }

  .wh-grid-wrap {
    padding: 3rem 1rem 5rem;
  }

  .wh-sp-grid,
  .wh-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .wh-sp-body,
  .wh-card-body {
    padding: 1rem;
  }

  .wh-sp-card h3,
  .wh-card h3 {
    font-size: 1.25rem;
    line-height: 1.2;
  }

  .wh-sp-card p,
  .wh-card p {
    font-size: 0.8rem;
    line-height: 1.5;
  }

  .wh-sp-meta,
  .wh-card-meta {
    font-size: 0.85rem;
  }
}