/* =========================================
   Block: Angebote (kss/lswn-offers)
   ========================================= */

.lswn-offers {
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Das Parent-Theme setzt .alignfull per transform:translateX(-50%) auf volle
   Breite (theme_helper.css). Ein transform auf einem Vorfahren erzeugt aber
   laut CSS-Spezifikation einen neuen Containing Block für alle
   position:fixed-Kinder — GSAP ScrollTriggers pin:true setzt genau das auf
   .lswn-offers__pin, das "fixed" bezieht sich dann fälschlich auf diese
   Sektion statt auf den Viewport und scrollt mit der Seite mit, statt zu
   pinnen. Hier dieselbe volle Breite OHNE transform erzwingen. */
.lswn-offers.alignfull {
    transform: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
}

/* --- Kopf ---
   Kopf + Scroll-Hinweis liegen jetzt INNERHALB von .lswn-offers__pin (siehe
   render.php) — sie sollen beim Pin sichtbar BLEIBEN und mit den Tafeln
   zusammen eine Komposition bilden, statt vorher aus dem Bild zu scrollen
   und dann separat "nur noch Tafeln" zu zeigen. */

.lswn-offers__head {
    padding: clamp(28px, 4vw, 56px) var(--lswn-edge) 0;
    max-width: 1260px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 38px;
    flex-wrap: wrap;
    flex: none;
}
.lswn-offers__headline {
    font-family: var(--lswn-serif);
    font-weight: 400;
    line-height: var(--lswn-leading-heading);
    letter-spacing: var(--lswn-tracking-heading);
    font-size: var(--lswn-text-h2);
    color: var(--lswn-wine);
    margin: 0;
}
.lswn-offers__headline i { font-style: italic; color: var(--lswn-gold); }
.lswn-offers__intro { color: var(--lswn-ink-soft); max-width: 42ch; font-size: 16.5px; margin: 0; }

.lswn-offers__hint {
    padding: 20px var(--lswn-edge) 0;
    max-width: 1260px;
    margin: 0 auto;
    font-size: 14px;
    color: var(--lswn-gold);
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
}
.lswn-offers__hint svg { width: 44px; overflow: visible; }
.lswn-offers__hint svg path { fill: none; stroke: var(--lswn-gold); stroke-width: 1; stroke-linecap: round; }

/* --- Pin/Viewport/Track ---
   .lswn-offers__pin: äußerer Rahmen, wird von script.js gepinnt (enthält
   Kopf + Hinweis + Viewport als vertikale Spalte).
   .lswn-offers__viewport: NUR dieser Bereich scrollt horizontal — im
   Basiszustand (kein JS/GSAP, prefers-reduced-motion) ganz normal
   scrollbar, funktioniert ohne jede Animation. Erst wenn script.js den Pin
   aktiviert (Klasse "is-pinned"), füllt der Viewport den restlichen Platz
   unter Kopf/Hinweis und der Track läuft per GSAP horizontal durch. */
.lswn-offers__pin {
    display: flex;
    flex-direction: column;
}
.lswn-offers__viewport {
    padding: 24px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.lswn-offers__track {
    display: flex;
    align-items: center;
    gap: clamp(22px, 3vw, 54px);
    padding-inline: var(--lswn-edge);
    width: max-content;
}
.lswn-offers.is-pinned .lswn-offers__pin {
    /* Nicht die volle Fensterhöhe — die höchste Tafel (t-wide) ist ohnehin
       auf max. 620px gedeckelt, bei sehr hohen Bildschirmen (>100svh) blieb
       sonst unnötig viel Leerraum ober-/unterhalb der Tafeln stehen. */
    height: min(100svh, calc(800px + var(--lswn-header-h, 80px)));
    /* Kopf + Hinweis sitzen jetzt in der gepinnten Fläche (siehe render.php)
       und würden sonst unter dem fixierten Header (z-index:8000) beginnen
       und teilweise dahinter verschwinden. */
    padding-top: var(--lswn-header-h, 80px);
}
.lswn-offers.is-pinned .lswn-offers__viewport {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0;
}
.lswn-offers.is-pinned .lswn-offers__track {
    will-change: transform;
}

/* --- Tafel-Basis ---
   Die Höhen sind bewusst ungleich statt gestreckt — die Reihe soll wie eine
   Folge von Plakattafeln wirken, nicht wie eine Kartenzeile. */
.lswn-offers__panel {
    flex: none;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(176, 134, 47, .42);
    background: linear-gradient(172deg, rgba(253, 246, 242, .95), rgba(249, 229, 229, .85));
    padding: 40px 34px;
    display: flex;
    flex-direction: column;
}
.lswn-offers__panel h3 { color: var(--lswn-wine); margin: 0 0 12px; font-family: var(--lswn-serif); font-weight: 400; }
.lswn-offers__panel p { color: var(--lswn-ink-soft); font-size: 15.5px; line-height: 1.78; margin: 0; }
.lswn-offers__rule { height: 1px; background: rgba(176, 134, 47, .4); margin: 0 0 22px; }
.lswn-offers__rule--light { background: rgba(211, 176, 99, .4); }

.lswn-offers__more {
    margin-top: auto;
    padding-top: 24px;
    font-size: 14px;
    color: var(--lswn-gold);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.lswn-offers__more svg { width: 22px; transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
.lswn-offers__panel:hover .lswn-offers__more svg { transform: translateX(8px); }

/* Typ 1 — breite Tafel mit Bildband oben */
.lswn-offers__panel--wide {
    width: clamp(300px, 42vw, 560px);
    height: min(74svh, 620px);
    border-radius: var(--lswn-radius-md);
    padding-top: 0;
}
.lswn-offers__panel-image {
    height: clamp(170px, 26svh, 240px);
    /* !important nötig: global.css setzt ":where(figure):not(#fakeID){margin:0}" —
       das :not(#fakeID) ist ein Spezifitäts-Hack (hebt auf ID-Niveau), den eine
       normale Klassenregel sonst nicht schlägt. */
    margin: 0 -34px 28px !important;
    flex: none;
    overflow: hidden;
    background: linear-gradient(158deg, var(--lswn-rose-md) 0%, var(--lswn-rose-lt) 48%, var(--lswn-gold-lt) 100%);
}
.lswn-offers__panel-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lswn-offers__panel--wide h3 { font-size: clamp(28px, 3vw, 38px); }
.lswn-offers__panel--wide p { font-size: 16.5px; max-width: 44ch; }

/* Typ 2 — schmale Hochtafel */
.lswn-offers__panel--tall {
    width: clamp(232px, 21vw, 300px);
    border-radius: var(--lswn-radius-md-flip);
}
.lswn-offers__panel--tall h3 { font-size: clamp(24px, 2.3vw, 30px); }
.lswn-offers__panel--tall p { font-size: 15px; }

/* Typ 3 — zwei Angebote in einer Spalte */
.lswn-offers__panel--pair {
    width: clamp(258px, 26vw, 360px);
    border-radius: var(--lswn-radius-md);
    gap: 26px;
}
.lswn-offers__panel--pair section { display: flex; flex-direction: column; }
.lswn-offers__panel--pair h3 { font-size: 23px; margin-bottom: 9px; }
.lswn-offers__panel--pair p { font-size: 14.5px; }
.lswn-offers__sep { height: 1px; background: rgba(176, 134, 47, .35); }

/* Typ 4 — Zwischenstück ohne Angebot: nur Ornament + Zitat */
.lswn-offers__panel--quiet {
    width: clamp(210px, 19vw, 270px);
    border: none;
    background: none;
    padding: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 28px;
}
.lswn-offers__quiet-orn { width: 74px; overflow: visible; }
.lswn-offers__quiet-orn path { fill: none; stroke: var(--lswn-gold); stroke-width: 1.1; stroke-linecap: round; }
.lswn-offers__quiet-orn circle { fill: var(--lswn-gold); }
.lswn-offers__panel--quiet q {
    font-family: var(--lswn-serif);
    font-style: italic;
    font-size: 20px;
    line-height: 1.55;
    color: var(--lswn-wine);
    quotes: none;
    margin: 0;
}

/* Typ 5 — Abschluss-Tafel in Wein */
.lswn-offers__panel--end {
    width: clamp(250px, 24vw, 330px);
    border-radius: var(--lswn-radius-md-flip);
    background: linear-gradient(150deg, var(--lswn-wine) 0%, var(--lswn-wine-dk) 100%);
    border-color: rgba(211, 176, 99, .45);
    justify-content: center;
    align-items: flex-start;
}
.lswn-offers__panel--end h3 { color: var(--lswn-parch); font-size: 29px; }
.lswn-offers__panel--end p { color: rgba(253, 246, 242, .74); }
.lswn-offers__panel--end .lswn-offers__more { color: var(--lswn-gold-lt); }

@media (prefers-reduced-motion: reduce) {
    .lswn-offers__panel { transform: none !important; }
}