/*
Theme Name: Gijs Bodenstaff
Theme URI: https://gijsbodenstaff.nl/
Author: Gijs Bodenstaff
Author URI: https://gijsbodenstaff.nl/
Description: Custom WordPress theme voor Gijs Bodenstaff — GEO Specialist & Local Entity SEO Expert Nederland. Wikidata Q139585063.
Version: 58.0
License: Private
Text Domain: gijsbodenstaff
*/

/* ════════════════════════════════════════════════════════════
   MOBILE VIDEO FIX v45 — Verticale video's als visitekaartje
   Alle YouTube Shorts (padding-bottom:177%) worden op mobiel
   omgezet naar een compact visitekaartje-formaat.
   ════════════════════════════════════════════════════════════ */

/* ── 1. TRAININGSBOXEN ──────────────────────────────────── */
@media(max-width:640px){
  .tr-grid{grid-template-columns:1fr!important}
  .tr-img{aspect-ratio:auto!important;max-height:280px;object-fit:contain}
}
@media(max-width:900px){
  .tr-grid{grid-template-columns:1fr 1fr}
}

/* ── 2. STATS GRID — nooit 1 kolom ─────────────────────── */
.gb-stats{grid-template-columns:repeat(2,1fr)!important}
@media(min-width:641px){
  .gb-stats{grid-template-columns:repeat(4,1fr)!important}
}

/* ── 3. VERTICAL VIDEO VISITEKAARTJE ────────────────────── */
/*
 * Desktop: floated short-video naast tekst is max 180px — prima.
 * Mobiel:  video mag NOOIT full-screen domineren.
 *          Oplossing: max-width + aspect-ratio cap = visitekaartje.
 */

/* Alle floated kort-video containers */
.gb-short-card {
  float: right;
  width: 160px;
  clear: right;
}

/* Desktop: floated containers behouden hun breedte */
[style*="float:right"][style*="width:175px"],
[style*="float:right"][style*="width:180px"],
[style*="float:right"][style*="width:160px"] {
  max-width: 180px;
}

/* MOBIEL ≤640px: compact visitekaartje */
@media(max-width:640px){

  /* Floated video-kaartjes: niet meer floaten, maar centreer als kaartje */
  [style*="float:right"][style*="width:175px"],
  [style*="float:right"][style*="width:180px"],
  [style*="float:right"][style*="width:160px"],
  .gb-short-card {
    float: none !important;
    width: 140px !important;
    margin: 0 auto 14px !important;
    display: block !important;
    clear: both !important;
  }

  /* Hero video: compact */
  .gb-hero-video-wrap {
    max-width: 150px !important;
    margin: 0 auto 12px !important;
  }

  /* CAP: alle padding-bottom:177% wrappers → max 133% (portret kaartje)
     Dit zorgt voor ~210px hoogte bij 160px breedte = visitekaartje */
  [style*="padding-bottom:177"],
  [style*="padding-bottom: 177"] {
    padding-bottom: 133% !important;
  }

  /* Video grid sectie: één kolom */
  .gbs-vg, .gbs-vg-3, .gbs-video-grid {
    grid-template-columns: 1fr !important;
  }
}

/* KLEIN MOBIEL ≤400px: nóg compacter */
@media(max-width:400px){
  [style*="float:right"][style*="width:175px"],
  [style*="float:right"][style*="width:180px"],
  [style*="float:right"][style*="width:160px"],
  .gb-short-card {
    width: 120px !important;
  }
  .gb-hero-video-wrap {
    max-width: 130px !important;
  }
}

/* ── 4. NAV ACTIVE STATE ────────────────────────────────── */
.gb-menu a[aria-current="page"],
.gb-menu a.nav-active {
  color:#ea580c!important;
  font-weight:700!important;
  border-bottom:2px solid #ea580c!important;
}

/* ── 5. LANG-SWITCH desktop ─────────────────────────────── */
/* Desktop: zichtbaar. Mobiel (<900px): verborgen (zit in mobile menu tabs) */
@media(max-width:900px){
  .gb-menu .lang-switch { display:none }
}