/*
Theme Name: GeneratePress Child
Template: generatepress
Version: 1.0
*/

@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Barlow:wght@300;400;500;600&display=swap");

/* TIPOGRAFÍA BASE */
body {
  font-family: "Barlow", sans-serif;
  font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* OCULTAR NAV Y FOOTER DE GENERATEPRESS */
.site-header {
  display: none;
}

.site-footer {
  display: none;
}

/* HOME - ancho completo sin márgenes */
.home .entry-header {
  display: none;
}

.home .entry-content {
  max-width: 100%;
  padding: 0;
  margin: 0;
}

.home .site-main {
  padding: 0;
  margin: 0;
}

/* FOOTER A FULL WIDTH */
footer {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

/* NAV LINKS */
.nav-link {
  color: white;
  text-decoration: none;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.2s;
}

.nav-link:hover {
  color: #ea6834 !important;
}

/* BOTÓN PRIMARIO */
.btn-primary {
  background: #ea6834;
  color: white !important;
  text-decoration: none;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.65rem 1.5rem;
  transition: background 0.2s;
  display: inline-block;
}

.btn-primary:hover {
  background: #d45a28 !important;
  color: white !important;
}

/* CTA HERO PRIMARIO */
.siel-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #ea6834;
  color: white !important;
  text-decoration: none;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem 2.2rem;
  transition: background 0.2s;
}

.siel-cta:hover {
  background: #d45a28 !important;
  color: white !important;
}

/* CTA HERO SECUNDARIO */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: white !important;
  text-decoration: none;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 2px;
  transition: opacity 0.2s;
}

.btn-secondary:hover {
  opacity: 1 !important;
}

/* CARDS DE DEPORTES */
.sport-card {
  transition: transform 0.3s;
}

.sport-card:hover {
  transform: scale(1.02);
}

.sport-card:hover .card-cta {
  color: white !important;
}

/* CARDS DE NIVELES */
.level-card {
  transition: transform 0.3s;
}

.level-card:hover {
  transform: scale(1.02);
}

/* CARD CTA TEXT */
.card-cta {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ea6834;
  transition: color 0.2s;
}

/* LEVEL TAGS */
.level-tag {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.75);
}

/* FOOTER LINKS */
.footer-link {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.45) !important;
  text-decoration: none;
  font-weight: 300;
  transition: color 0.2s;
}

.footer-link:hover {
  color: white !important;
}

/* FOOTER IG */
.footer-ig {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-ig:hover {
  color: #ea6834 !important;
}

/* FOOTER LEGAL */
.footer-legal {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.25);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-legal:hover {
  color: white !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* ── Fluid typography (all screens) ── */
h1 {
  font-size: clamp(1.8rem, 5.5vw, 3.5rem);
}

h2 {
  font-size: clamp(1.4rem, 4vw, 2.5rem);
}

/* ── Tablet: 769px – 1024px ── */
@media (max-width: 1024px) and (min-width: 769px) {
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  [style*="grid-template-columns:1fr 1fr"][style*="gap:6rem"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:8rem"] {
    gap: 3rem !important;
  }

  section {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  [style*="padding:0 4rem"] {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  [style*="min-height:600px"] {
    min-height: 450px !important;
  }
}

/* ── Mobile: ≤768px ── */
@media (max-width: 768px) {
  /* Nav */
  #siel-nav {
    padding: 0.8rem 1.2rem !important;
  }

  #siel-nav .siel-desktop-links {
    display: none !important;
  }

  /* Grids → single column */
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  [style*="grid-template-columns:2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Two-column layouts → stack */
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  [style*="grid-template-columns:1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Reduce large gaps */
  [style*="gap:6rem"] {
    gap: 2rem !important;
  }

  [style*="gap:8rem"] {
    gap: 2rem !important;
  }

  [style*="gap:4rem"] {
    gap: 1.5rem !important;
  }

  [style*="gap:3rem"] {
    gap: 1.2rem !important;
  }

  /* Section padding */
  section {
    padding: 2.5rem 1.2rem !important;
  }

  /* Hero sections */
  [style*="min-height:600px"] {
    min-height: 400px !important;
  }

  [style*="min-height:520px"] {
    min-height: 350px !important;
  }

  [style*="min-height:500px"] {
    min-height: 320px !important;
  }

  /* Reduce hero horizontal padding */
  [style*="padding:0 4rem 5rem"],
  [style*="padding:0 4rem 4rem"] {
    padding: 0 1.2rem 3rem !important;
  }

  /* Padding overrides for large horizontal padding */
  [style*="padding:6rem 3rem"],
  [style*="padding:5rem 3rem"] {
    padding: 2.5rem 1.2rem !important;
  }

  [style*="padding:2rem 3rem"],
  [style*="padding:1rem 3rem"] {
    padding: 1.5rem 1.2rem !important;
  }

  /* padding-top for hero sections below fixed nav */
  [style*="padding-top:10rem"] {
    padding-top: 7rem !important;
  }

  [style*="padding-top:8rem"] {
    padding-top: 6rem !important;
  }

  /* Card inner padding */
  [style*="padding:2.5rem"] {
    padding: 1.5rem !important;
  }

  /* CTAs full-width on mobile */
  .siel-cta,
  .btn-primary:not(#siel-nav .btn-primary) {
    width: 100%;
    text-align: center;
    justify-content: center;
    box-sizing: border-box;
  }

  /* Inline font-size overrides for big headings */
  [style*="font-size:3.5rem"],
  [style*="font-size:3rem"] {
    font-size: 2rem !important;
  }

  [style*="font-size:2.5rem"],
  [style*="font-size:2rem"] {
    font-size: 1.6rem !important;
  }

  [style*="font-size:1.8rem"] {
    font-size: 1.3rem !important;
  }

  /* ══════════════════════════════════════════════
     SPORT CARDS (home) — same approach as level cards
     height auto, no forced aspect-ratio
     ══════════════════════════════════════════════ */
  .sport-card {
    aspect-ratio: unset !important;
    height: auto !important;
  }

  .sport-card > div:nth-child(2) {
    background: linear-gradient(to bottom, rgba(10,20,45,0.75) 0%, rgba(10,20,45,0.95) 100%) !important;
  }

  .sport-card h3,
  .sport-card [style*="font-size:2.4rem"] {
    font-size: 2.2rem !important;
    color: white !important;
  }

  .sport-card p {
    font-size: 0.92rem !important;
    color: rgba(255,255,255,0.85) !important;
    line-height: 1.5 !important;
    margin-bottom: 0.5rem !important;
  }

  .sport-card [style*="padding:2rem"] {
    padding: 2rem !important;
  }

  .sport-card .level-tag {
    font-size: 0.72rem !important;
    padding: 0.25rem 0.6rem !important;
    color: rgba(255,255,255,0.85) !important;
    border-color: rgba(255,255,255,0.4) !important;
  }

  .sport-card [style*="margin-bottom:1.2rem"] {
    margin-bottom: 0.6rem !important;
  }

  .sport-card [style*="font-size:1.8rem"] {
    font-size: 1.2rem !important;
    margin-bottom: 0.2rem !important;
  }

  .sport-card .card-cta {
    color: #ea6834 !important;
    font-weight: 700 !important;
  }

  .sport-card [style*="color:rgba(255,255,255,0.65)"] {
    color: rgba(255,255,255,0.85) !important;
  }

  /* ══════════════════════════════════════════════
     LEVEL CARDS (kite/wing/surf hubs + home)
     Heavy content → NO aspect-ratio, height auto
     ══════════════════════════════════════════════ */
  .level-card {
    min-height: auto !important;
    aspect-ratio: unset !important;
    height: auto !important;
  }

  .level-card [style*="min-height"] {
    min-height: auto !important;
  }

  .level-card > div:nth-child(2) {
    background: linear-gradient(to bottom, rgba(10,20,45,0.75) 0%, rgba(10,20,45,0.95) 100%) !important;
  }

  .level-card [style*="padding:2.5rem"] {
    padding: 2rem !important;
  }

  .level-card h3,
  .level-card [style*="font-size:3.2rem"] {
    font-size: 2.2rem !important;
    color: white !important;
    margin-bottom: 0.5rem !important;
  }

  .level-card p,
  .level-card [style*="font-size:1.05rem"] {
    font-size: 0.92rem !important;
    color: rgba(255,255,255,0.85) !important;
    margin-bottom: 0.8rem !important;
    line-height: 1.5 !important;
  }

  .level-card [style*="font-size:0.92rem"] {
    font-size: 0.88rem !important;
    color: rgba(255,255,255,0.75) !important;
  }

  .level-card [style*="margin-bottom:2rem"] {
    margin-bottom: 1rem !important;
  }

  .level-card [style*="font-size:1.3rem"] {
    font-size: 1.1rem !important;
    color: white !important;
  }

  .level-card .level-tag {
    color: rgba(255,255,255,0.85) !important;
    border-color: rgba(255,255,255,0.4) !important;
  }

  .level-card .card-cta {
    color: #ea6834 !important;
    font-weight: 700 !important;
  }

  .level-card [style*="color:rgba(255,255,255,0.85)"] {
    color: rgba(255,255,255,0.95) !important;
  }

  /* Images in grids — keep aspect ratio */
  [style*="object-fit:cover"] {
    max-height: 250px !important;
  }

  /* Stats bar / feature counts */
  [style*="grid-template-columns:repeat(4,1fr)"][style*="text-align:center"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  /* Footer */
  [style*="grid-template-columns:2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: center;
  }

  /* ── Section reorder: pricing first on level pages ── */
  .siel-level-sections {
    display: flex;
    flex-direction: column;
  }

  .siel-level-sections .section-pricing {
    order: 1;
  }

  .siel-level-sections .section-roadmap {
    order: 2;
  }

  .siel-level-sections .section-booking {
    order: 3;
  }

  .siel-level-sections .section-separator {
    order: 2;
  }

  .siel-level-sections > *:not(.section-pricing):not(.section-roadmap):not(.section-booking):not(.section-separator) {
    order: 4;
  }
}

/* ── Small phones: ≤480px ── */
@media (max-width: 480px) {
  section {
    padding: 2rem 0.8rem !important;
  }

  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  [style*="min-height:400px"] {
    min-height: 300px !important;
  }

  [style*="min-height:350px"],
  [style*="min-height:320px"] {
    min-height: 260px !important;
  }

  [style*="font-size:2rem"] {
    font-size: 1.5rem !important;
  }

  [style*="font-size:1.6rem"] {
    font-size: 1.2rem !important;
  }

  [style*="padding:1.5rem"] {
    padding: 1rem !important;
  }

  [style*="gap:2rem"] {
    gap: 1rem !important;
  }

  [style*="gap:1.5rem"] {
    gap: 0.8rem !important;
  }
}

#siel-nav .nav-link {
  color: white !important;
}

#siel-nav .nav-link:hover {
  color: #ea6834 !important;
}

#siel-nav .btn-primary {
  color: white !important;
  background: #ea6834 !important;
}

#siel-nav .btn-primary:hover {
  background: #d45a28 !important;
}

.nav-active {
  color: #ea6834 !important;
}