/*
Theme Name: Adi Krüsi — Boom Mode
Theme URI: https://adriankruesi.ch
Author: Loxo / Linda Odermatt
Description: Massgeschneidertes 1:1-Theme der «Boom Mode»-Landingpage für Adi Krüsi. Inhalte & Events via ACF pflegbar, Anmelde-Formular mit Mailversand.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: adi-boommode
*/

/* ===== Fonts ===== */
@font-face{font-family:'Feixen';src:url('assets/fonts/StudioFeixenSerif-WriterBook.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Feixen';src:url('assets/fonts/StudioFeixenSerif-WriterRegular.woff2') format('woff2');font-weight:450;font-style:normal;font-display:swap;}
@font-face{font-family:'Feixen';src:url('assets/fonts/StudioFeixenSerif-WriterMedium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Feixen';src:url('assets/fonts/StudioFeixenSerif-WriterBold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

:root{
  --yellow:#fff23d;
  --black:#000;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
html,body{background:#fff;}
body{font-family:'Feixen',Georgia,serif;color:#000;-webkit-font-smoothing:antialiased;overflow-x:hidden;}

/* ===== Fixes gestricheltes Raster (bleibt beim Scrollen stehen) ===== */
/* Linien alle 6.25vw (=120/1920), erste bei 7.135vw (=137/1920), horizontal gestrichelt.
   In vw-Einheiten deckt sich der Abstand exakt mit dem 1920er-Canvas. */
#gridbg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  /* gleichmässiger Abstand: Kachelhöhe = Zeilenabstand (6.25vw = 120/1920) */
  background-image:linear-gradient(to bottom,#000 0 1px,transparent 1px);
  background-size:100% 6.25vw;
  background-position:0 3.125vw;      /* halber Abstand als Rand oben, danach überall gleich */
  -webkit-mask:repeating-linear-gradient(to right,#000 0 1.56vw,transparent 1.56vw 3.64vw);
          mask:repeating-linear-gradient(to right,#000 0 1.56vw,transparent 1.56vw 3.64vw);
}

/* ===== Bühne: 1920er Design-Canvas ===== */
#viewport{position:relative;width:100%;z-index:1;}
#stage{position:relative;width:1920px;height:10000px;}
.el{position:absolute;}

/* Reveal beim Reinscrollen (gestaffeltes Einblenden, per JS gesteuert).
   filter:opacity statt opacity, weil opacity bei Kindern eines zoom-Elements (Chromium) nicht greift. */
.reveal{transition:filter .55s ease, transform .8s cubic-bezier(.22,.61,.36,1);will-change:filter,transform;}

/* ===== Textstile ===== */
.label{
  display:inline-block;background:#000;color:#fff;
  font-weight:450;font-size:33.6px;line-height:1;
  padding:0;text-decoration:none;
  word-spacing:-0.34em;letter-spacing:-0.04em;  /* an Design-Tracking angleichen (Leerzeichen ~halb) */
}
.body{
  background:#000;color:#fff;
  font-weight:450;font-size:19px;line-height:1.3;
  padding:6px 9px 7px;
  text-align:left;                 /* linksbündig */
}
/* Titel: weisser Hintergrund je Zeile, damit Linien nicht durchlaufen */
.h-hero,.h-big,.h-footer{white-space:nowrap;}
.h-hero span,.h-footer span,.plain span{
  background:#fff;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding:.02em .1em;
}
.h-hero{font-weight:450;font-size:185px;line-height:1.06;letter-spacing:-2px;}
/* grosse Titel: EIN zusammenhängender weisser Block statt pro Zeile -> line-height 1 möglich, g bleibt sichtbar */
.h-big{font-weight:450;font-size:140.875px;line-height:1;letter-spacing:-1px;
  background:#fff;width:max-content;padding:.06em .04em;}
.h-footer{font-weight:500;font-size:51.8px;line-height:1.1;}
.plain{font-weight:500;font-size:29.85px;line-height:1.28;}
.caption{font-weight:400;font-size:18.5px;background:#fff;display:inline-block;padding:0 2px;}

/* Marker (gelb) */
.vmarker{
  writing-mode:vertical-rl;transform:rotate(180deg);
  background:var(--yellow);color:#000;font-weight:450;font-size:33.6px;
  padding:0;line-height:1;word-spacing:-0.34em;letter-spacing:-0.04em;
  text-decoration:none;display:inline-block;
}
a.vmarker{cursor:pointer;}

/* Logo */
.logo img{display:block;width:100%;}

/* Bilder */
img.ph{display:block;max-width:none;}


/* Event-Zeilen */
.eventrow{
  background:#000;color:#fff;font-weight:450;font-size:30px;line-height:1.12;
  display:flex;align-items:flex-start;gap:0;padding:18px 26px;  /* Ausnahme: Event-Zeilen behalten Innenabstand */
  word-spacing:-0.34em;  /* engerer Wortabstand in der ganzen Tabelle */
}
.eventrow .c1{flex:0 0 430px;}
.eventrow .c2{flex:0 0 340px;}
.eventrow .c3{flex:0 0 190px;}
.eventrow .c4{flex:1;text-align:left;}
.eventrow .btn{
  display:inline-block;background:#fff;color:#000;text-decoration:none;
  padding:0;border:none;cursor:pointer;
  font-family:inherit;font-size:inherit;line-height:1;font-weight:inherit;
}

/* Buttons gelb (Footer CTA) */
.cta{
  background:var(--yellow);color:#000;font-weight:500;
  font-size:56px;line-height:1;padding:2px 6px 6px;display:inline-block;
  text-decoration:none;
}

/* Karten-Bilder */
.card{width:353px;height:442px;object-fit:cover;display:block;background:#000;}

/* Fuss-Block (fliessend, wächst mit Events) */
.footerblock .h-footer{margin-bottom:14px;}
.events-list{display:flex;flex-direction:column;gap:18px;}
.footerblock .eventrow{width:1220px;max-width:100%;}
.footer-logo{display:flex;justify-content:flex-end;margin-top:114px;padding-right:56px;}
.footer-logo img{width:116px;display:block;}
.ctas{display:flex;gap:66px;margin-top:404px;flex-wrap:wrap;}

/* ============================================================
   MOBILE / RESPONSIVE  (< 900px): Canvas linearisieren
   ============================================================ */
@media (max-width:899px){
  #gridbg{
    background-image:linear-gradient(to bottom,#000 0 1px,transparent 1px);
    /* Zeilenhöhe = ad-Logohöhe (54px), Linien bei y=26 und y=80 -> Logo passt genau zwischen zwei Linien */
    background-size:100% 54px;
    background-position:0 26px;
    -webkit-mask:repeating-linear-gradient(to right,#000 0 12px,transparent 12px 28px);
            mask:repeating-linear-gradient(to right,#000 0 12px,transparent 12px 28px);
  }
  /* gap = Abstand ZWISCHEN allen Abschnitten; Gruppen-Fortsetzungen (Box unter Titel, Name
     unter Bild, Karten-Bild unter Label, Board an ARBEIT) werden per negativem margin-top herangezogen */
  #stage{width:100%;height:auto;display:flex;flex-direction:column;padding:26px 20px 72px;gap:80px;}
  .el{position:static !important;left:auto !important;top:auto !important;width:auto !important;
      height:auto !important;transform:none !important;}
  /* "Adi Krüsi" gehört zum Bild darüber, zentriert unter dem Bild */
  #stage > .el.adi-name{margin-top:-66px !important;margin-bottom:0 !important;text-align:center;}

  .vmarker{writing-mode:horizontal-tb;transform:none;font-size:20px;padding:6px 12px;align-self:flex-start;}
  /* «Aktuelle Events» oben rechts, vertikal zentriert zum Logo (Logo-Mitte ≈ 53px) */
  #stage > .el.ae-top{position:absolute !important;top:53px !important;right:20px !important;left:auto !important;margin:0 !important;transform:translateY(-50%) !important;z-index:5;}
  .logo{width:96px !important;align-self:flex-start;}
  .logo-mid,.logo-foot{display:none;}      /* nur ein Logo auf Mobile */
  .ae2{display:none;}                        /* zweiten "Aktuelle Events"-Marker ausblenden */

  img.ph.portrait{width:100% !important;max-width:500px;align-self:center;margin-top:-121px;}
  img.ph.arbeit{width:100% !important;}
  /* Surfboard hat ~28% transparenten Rand oben/unten -> stark hochziehen, damit es ARBEIT überlappt */
  img.ph.surf{width:76% !important;align-self:flex-end;margin-top:-216px;margin-bottom:-58px;margin-right:0;}

  .h-hero{font-size:clamp(58px,17vw,120px);line-height:1.04;white-space:normal;}
  .h-big{font-size:clamp(34px,9.5vw,84px);line-height:1.1;white-space:normal;}
  .h-footer{font-size:clamp(34px,10vw,52px);white-space:normal;}
  .plain{font-size:24px;}
  .body{width:100% !important;font-size:16px;margin-top:-66px;}   /* Box eng an ihren Titel */
  .label{font-size:22px;}

  .card{width:100%;height:auto;aspect-ratio:353/442;margin-top:-66px;}  /* Karten-Bild eng an sein Label */
  .cta{font-size:clamp(28px,7.5vw,48px);display:block;text-align:center;}

  .eventrow{flex-direction:column;gap:8px;font-size:20px;width:100% !important;}
  .eventrow .c1,.eventrow .c2,.eventrow .c3,.eventrow .c4{flex:none;}

  .footerblock{display:flex;flex-direction:column;gap:22px;width:100% !important;}
  .footerblock .h-footer{margin-bottom:0;}
  .footer-logo{display:none;}
  .ctas{flex-direction:column;gap:14px;margin-top:6px;}
}

/* ===== Anmelde-Modal ===== */
#modal{
  position:fixed;inset:0;z-index:1000;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.6);
}
#modal.open{display:flex;}
.modal-card{
  background:#fff;width:100%;max-width:520px;border:3px solid #000;
  padding:34px 32px;position:relative;max-height:92vh;overflow:auto;
}
.modal-card h3{font-weight:700;font-size:30px;margin-bottom:4px;}
.modal-card .sub{font-size:16px;margin-bottom:20px;color:#333;}
.modal-card label{display:block;font-size:15px;font-weight:500;margin:14px 0 4px;}
.modal-card input{
  width:100%;font-family:inherit;font-size:17px;padding:10px 12px;border:2px solid #000;background:#fff;
}
.modal-card .submit{
  margin-top:24px;width:100%;background:var(--yellow);border:none;color:#000;
  font-family:inherit;font-weight:700;font-size:22px;padding:14px;cursor:pointer;
}
.modal-card .close{
  position:absolute;top:10px;right:14px;background:none;border:none;color:#000;font-size:30px;cursor:pointer;line-height:1;
}
.modal-msg{margin-top:16px;font-size:16px;}
.modal-msg.ok{color:#0a7d2c;}
.modal-msg.err{color:#c0261a;}

/* ===== 404 ===== */
.err404{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 24px;}
.err-inner{text-align:center;max-width:900px;}
.err-num{font-weight:500;font-size:clamp(96px,26vw,300px);line-height:1;letter-spacing:-2px;}
.err-num span,.err-msg span{background:#fff;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.02em .12em;}
.err-msg{font-weight:450;font-size:clamp(20px,3.2vw,34px);line-height:1.3;margin:28px 0 34px;}
.err-btn{background:var(--yellow);color:#000;font-weight:500;font-size:clamp(24px,3.4vw,42px);line-height:1;padding:8px 16px 14px;display:inline-block;text-decoration:none;}