/*
Theme Name: Vimyon
Theme URI: https://vimyon.com
Author: Vimyon
Description: Block-Theme fuer Kundenseiten. Design steckt in theme.json,
  Abschnitte in patterns/. Kein Page Builder, keine Lizenz, keine Abhaengigkeit.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GPLv2 or later
Text Domain: vimyon
*/

/* ── Aufklapper (core/details) ─────────────────────────────
   Ohne das zeigt der Browser seine eigenen Dreiecke. Wir wollen
   das Plus wie auf der statischen Seite. */
.wp-block-details summary{
  cursor:pointer; list-style:none; position:relative; padding-right:28px;
  font-family:var(--wp--preset--font-family--heading);
  font-weight:500; color:var(--wp--preset--color--primary);
}
.wp-block-details summary::-webkit-details-marker{display:none}
.wp-block-details summary::marker{content:""}
.wp-block-details summary::after{
  content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-size:20px; font-weight:300; line-height:1; color:var(--wp--preset--color--primary);
  transition:transform .3s;
}
.wp-block-details[open] summary::after{transform:translateY(-50%) rotate(45deg)}

/* Karten sollen gleich hoch sein, egal wie lang der Text ist */
.wp-block-columns .wp-block-column{align-self:stretch}

/* Fokus sichtbar halten — WCAG 2.4.7 */
:where(a,button,summary):focus-visible{
  outline:2px solid var(--wp--preset--color--primary); outline-offset:3px;
}

/* ── Case-Study-Kacheln ────────────────────────────────────
   Bild mit Verlauf und Titel darauf, klickbar. */
.vy-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.vy-case{position:relative;overflow:hidden;display:block;width:100%;padding:0;border:0;
  background:none;cursor:pointer;text-align:left}
.vy-case img{width:100%;height:200px;object-fit:cover;display:block;transition:transform .3s}
.vy-case:hover img,.vy-case:focus-visible img{transform:scale(1.05)}
.vy-case__cap{position:absolute;inset:auto 0 0 0;padding:28px 16px 12px;
  background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.88) 100%)}
.vy-case__t{display:block;font-family:var(--wp--preset--font-family--heading);
  font-size:13px;font-weight:500;color:#fff;line-height:1.35}
.vy-case__m{display:block;font-size:11px;color:rgba(255,255,255,.75);margin-top:2px}

/* ── Dialog ────────────────────────────────────────────────
   display:flex NUR mit [open], sonst haengt der Dialog
   unsichtbar ueber der Seite und faengt Klicks ab. */
.vy-modal{position:fixed;inset:0;z-index:9999;border:0;padding:24px;background:transparent;
  width:100%;max-width:100%;height:100%;max-height:100%;display:none;
  align-items:center;justify-content:center}
.vy-modal[open]{display:flex}
.vy-modal::backdrop{background:rgba(0,0,0,.6)}
.vy-modal__box{background:#fff;max-width:640px;width:100%;max-height:85vh;overflow:auto;position:relative}
.vy-modal__box img{width:100%;height:220px;object-fit:cover}
.vy-modal__close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;
  border-radius:18px;background:rgba(0,0,0,.55);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.vy-modal__body{padding:32px}
.vy-tag{display:inline-block;font-family:var(--wp--preset--font-family--heading);font-size:11px;
  font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#fff;
  background:var(--wp--preset--color--primary);padding:4px 10px;margin:0 8px 16px 0}
.vy-tag--out{color:var(--wp--preset--color--primary);background:transparent;
  border:1px solid var(--wp--preset--color--border)}
.vy-blk{margin-bottom:20px}
.vy-blk__l{font-family:var(--wp--preset--font-family--heading);font-size:11px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;color:var(--wp--preset--color--primary);margin-bottom:6px}
.vy-blk p{font-size:14px;color:var(--wp--preset--color--muted);line-height:1.75;margin:0}

/* ── Feinschliff ───────────────────────────────────────────*/
.vy-label{font-family:var(--wp--preset--font-family--heading);font-size:11px;font-weight:600;
  letter-spacing:3px;text-transform:uppercase;color:var(--wp--preset--color--muted);margin-bottom:12px}
.vy-label--light{color:rgba(255,255,255,.6)}
.vy-note{font-size:13px;color:var(--wp--preset--color--light);font-style:italic}
.vy-dash{list-style:none;padding-left:18px;position:relative}
.vy-dash li{position:relative;padding-left:18px;margin-bottom:6px;color:var(--wp--preset--color--contrast)}
.vy-dash li::before{content:"—";position:absolute;left:0;color:var(--wp--preset--color--primary)}