/* Kroma Living — Responsive layer.
   Grids only ever change column-count to a number that divides the item
   count evenly (or collapse straight to 1 column) — never a partial last row.
   Breakpoints: 1500 (large desktop → small desktop), 1100 (tablet), 640 (mobile). */

/* ---------- Symmetric grids: base (large desktop) column counts ---------- */
.grid-sym-2 { grid-template-columns: repeat(2, 1fr); }
.grid-sym-3 { grid-template-columns: repeat(3, 1fr); }
.grid-sym-4 { grid-template-columns: repeat(4, 1fr); }
.grid-sym-5 { grid-template-columns: repeat(5, 1fr); }
.grid-sym-6 { grid-template-columns: repeat(3, 1fr); }
.grid-sym-7 { grid-template-columns: repeat(7, 1fr); }

/* ---------- Equal-height titles within a row: paragraphs start level ---------- */
[data-i18n^="a.num"][data-i18n$=".title"],
[data-i18n^="b.card"][data-i18n$=".title"],
[data-i18n^="b.tech"][data-i18n$=".title"],
[data-i18n^="a.promise"][data-i18n$=".title"] {
  min-height: 2.2em;
}

/* ==================================================================
   1500px — small desktop / laptop: items with no valid multi-column
   split (5 coverage phases, 7 team photos) go straight to a single
   column instead of leaving a broken last row.
   ================================================================== */
@media (max-width: 1500px) {
  .grid-sym-5, .grid-sym-7 { grid-template-columns: 1fr !important; }
  .grid-sym-7 .k-flip { max-width: 260px; margin: 0 auto; width: 100%; }
}

/* ==================================================================
   1100px — tablet
   ================================================================== */
@media (max-width: 1100px) {
  /* closed header: hamburger stays a small icon at the edge (the
     conventional, thumb-reachable spot for a menu trigger); the logo is
     the one thing that reads as centred, positioned independently of the
     hamburger's own width so it's always exactly centred. */
  #site-header { justify-content: flex-start; }
  .logo-link { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

  #nav-toggle { display: flex !important; align-items: center; justify-content: center; }
  #nav-links {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px !important;
    padding: 18px 24px 26px;
    background: var(--kroma-calma);
    border-bottom: 1px solid rgba(29,28,59,.1);
    box-shadow: 0 18px 34px rgba(29,28,59,.1);
  }
  #nav-links.nav-open { display: flex !important; }
  #nav-links a { padding: 12px 4px; border-bottom: 1px solid rgba(29,28,59,.08); }
  #nav-links a[data-i18n="nav.cta"] { border-bottom: 0; text-align: center; margin-top: 10px; }
  #lang-toggle { align-self: center; margin-top: 4px; }

  #top, #bloque-a, #bloque-b, #bloque-d, #bloque-e, #bloque-c {
    padding-left: 48px !important;
    padding-right: 32px !important;
  }
  #contacto { padding-left: 48px !important; padding-right: 32px !important; }

  #top { grid-template-columns: 1fr !important; min-height: 0 !important; padding-top: 32px !important; padding-bottom: 60px !important; gap: 48px !important; }
  .hero-visual { height: 46vh !important; order: -1; }
  .hero-visual-img { height: 34vh !important; }

  .grid-sym-4, .grid-sym-6 { grid-template-columns: repeat(2, 1fr) !important; }

  .map-layout { grid-template-columns: 1fr !important; }
  .map-holder spain-map { height: 420px !important; }
  /* tablet keeps the padded/rounded/shadowed card (desktop no longer has
     it — see styles.css); mobile's own 640px rules below zero it out
     again for the full-bleed treatment there. */
  .map-card {
    padding: 20px;
    border-radius: 24px;
    background: rgba(255,255,255,.6);
    border: 1px solid var(--calma-200);
    box-shadow: 0 14px 34px rgba(29,28,59,.07);
  }

  /* minmax(0, 1fr), not plain 1fr: the Kroma logo's fixed 340px width was
     forcing this column wider than the viewport (a grid track's default
     min-width is its content's min-content, not zero), which pushed the
     heading and the whole form past the edge, invisibly clipped by this
     section's own overflow-x:hidden. minmax(0, ...) lets the column
     actually shrink so the logo's own max-width:100% can do its job. */
  .contact-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 48px !important; }

  [data-i18n="a.heading"], [data-i18n="b.heading"], [data-i18n="e.heading"],
  [data-i18n="c.heading"], [data-i18n="a.readyHeading"], [data-i18n="contact.heading"] {
    font-size: 2.7rem !important;
  }
  .hero-claim { font-size: 3.1rem !important; }
  .big-counter { font-size: 3rem !important; }
}

/* ==================================================================
   640px — mobile
   ================================================================== */
@media (max-width: 640px) {
  #site-header { padding: 14px 20px !important; }
  #nav-links { padding: 16px 20px 22px; }

  #top, #bloque-a, #bloque-b, #bloque-d, #bloque-e, #bloque-c {
    padding-left: 22px !important;
    padding-right: 22px !important;
    padding-bottom: 72px !important;
  }
  #contacto { padding: 64px 22px 40px !important; border-radius: 32px 32px 0 0 !important; }

  #top { padding-top: 24px !important; gap: 32px !important; }
  .hero-rotator { height: 132px !important; }
  .hero-rotator-logo { height: 78px !important; }
  .hero-claim { font-size: 2.1rem !important; line-height: 1.15 !important; }
  .hero-visual { height: 30vh !important; }
  .hero-visual-img { height: 22vh !important; }

  [data-i18n="hero.subtitle"] { font-size: 1.2rem !important; }

  [data-i18n="a.heading"], [data-i18n="b.heading"], [data-i18n="e.heading"],
  [data-i18n="c.heading"], [data-i18n="a.readyHeading"], [data-i18n="contact.heading"] {
    font-size: 2.75rem !important;
  }
  [data-i18n="a.attrHeading"] { font-size: 2.1rem !important; }
  [data-i18n="b.coverageHeading"], [data-i18n="b.techHeading"] { font-size: 1.9rem !important; }
  [data-i18n="d.investorHeading"], [data-i18n="d.residentHeading"] { font-size: 2.2rem !important; }
  /* the intro paragraphs read oversized next to their (now bigger) headings */
  [data-i18n="a.body"] { font-size: 1.0625rem !important; }
  [data-i18n="b.body"] { font-size: 1rem !important; }

  /* "Visión de / inversor" only needs its own line to match its siblings
     on desktop/tablet (single-row grid) — mobile stacks one card per row,
     so let it read as one line there. */
  br.k-desktop-break { display: none; }

  .k-card.k-card-open { transform: translateY(-6px); background: #fff; box-shadow: 0 26px 54px rgba(29,28,59,.10); }
  /* instant, not animated: animating grid-template-rows is a layout
     (non-compositor) transition, and on tap it visibly juddered */
  .k-card .k-card-body { transition: none; }
  .k-card.k-card-open .k-card-body { grid-template-rows: 1fr; opacity: 1; }
  .k-card.k-card-open .k-card-rule { width: 64px; }


  .grid-sym-2, .grid-sym-3, .grid-sym-4, .grid-sym-5, .grid-sym-6, .grid-sym-7 {
    grid-template-columns: 1fr !important;
  }
  .grid-sym-7 .k-flip { max-width: 220px; }

  .counter-col, .counter-col:nth-child(2), .counter-col:nth-child(3) {
    padding: 20px 0 !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(29,28,59,.12);
  }
  .counter-col:first-child { border-top: 0; padding-top: 0 !important; }
  .big-counter { font-size: 2.6rem !important; }

  .map-stats { gap: 10px !important; }

  /* immersive map by default on mobile: full-bleed and near full-screen,
     pannable/zoomable by touch (see spain-map.js setZoomable, wired up in
     script.js for mobile widths only), with the info card floating over
     it — both are visible at a glance, with nothing to tap or scroll to */
  .map-layout { position: relative; }
  .map-holder { margin-left: -22px; margin-right: -22px; width: calc(100% + 44px); }
  .map-card { padding: 0; border-radius: 0; border: 0; box-shadow: none; background: none; }
  .map-holder spain-map { height: 100vh !important; height: 100dvh !important; }
  #city-panel {
    position: absolute;
    left: 22px;
    right: 22px;
    top: 16px;
    z-index: 2;
    max-height: 42vh;
    overflow-y: auto;
    background: rgba(255,255,255,.94) !important;
    backdrop-filter: blur(6px);
  }

  .form-grid { grid-template-columns: 1fr !important; }
  .form-grid label { grid-column: 1 / -1 !important; }

  .footer-bottom { justify-content: center !important; text-align: center; }
  .footer-bottom > div:first-child { justify-content: center; }

  section[id] { border-radius: 0; }
}

@media (max-width: 420px) {
  .k-num { width: 64px !important; height: 64px !important; font-size: 1.9rem !important; }
  [data-i18n="a.heading"], [data-i18n="b.heading"], [data-i18n="e.heading"],
  [data-i18n="c.heading"], [data-i18n="a.readyHeading"], [data-i18n="contact.heading"] {
    font-size: 2.3rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #nav-links { transition: none !important; }
}