/* webrun.ai in Spanish: layout adjustments. includes/header.php links this file on /es/ pages
   only (lang.php on the /es/ 404 too), after the page stylesheets. English never loads it. */

/* Header nav between 901 and 1199 px, where the bar shows every link. The Spanish labels run
   longer than the English ones. No label or button wraps (nowrap). Below 1100 px the links sit
   closer together and the two buttons get slimmer side padding; from 1100 px the bar keeps the
   English spacing. Free space each side of the links, measured 31 Oct (English in brackets):
   developer-style nav at 901 px 54 (25), business nav at 1025 px 70 (69), at 1100 px 73 (106).
   With the glossary's long forms swapped in ("Para desarrolladores", "Para empresas", "Iniciar
   sesión"), still 20 px or more everywhere, so a reviewer can restore them without touching this
   file. */
@media (min-width: 901px) and (max-width: 1199px) {
  :lang(es) .nav-links > li > a,
  :lang(es) .nav-cta .btn { white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1099px) {
  :lang(es) .nav-links { gap: 1.5rem; }
  :lang(es) .nav-cta .btn { padding-left: 0.95rem; padding-right: 0.95rem; }
}
@media (min-width: 901px) and (max-width: 979px) {
  :lang(es) .nav-links { gap: 1.1rem; }
  :lang(es) .nav-cta .btn { padding-left: 0.8rem; padding-right: 0.8rem; }
}

/* Environments, dashboard with notes: the middle column and the two panel columns may shrink
   below their content, as the memory lines are one-line text that ends in an ellipsis. Without
   this the Spanish memory lines widen the dashboard and push the right-hand notes off the screen
   (53 px clipped at 1440, 130 to 260 px at 1280 and 1100). English has the same fault, smaller
   (61 px clipped at 1280, 175 px at 1100): reported in build/notes/polish-ja-es-fr.md. Phones
   keep their one-column panels (environments.php, 768 px and below). */
@media (min-width: 769px) {
  html:lang(es) .env-dash-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1025px) {
  html:lang(es) .env-dash-wrapper { grid-template-columns: 170px minmax(0, 1fr) 170px; }
}
/* Between 1025 and 1199 px the panels are narrowest (266 to 330 px): slimmer Chrome stat boxes,
   and a panel header may put its badge on a second line instead of running past the panel
   ("Instrucciones personalizadas"). The Spanish stat labels ("EXTENSIONES") also need a
   tighter row there. */
@media (min-width: 1025px) and (max-width: 1199px) {
  html:lang(es) .env-chrome-stat-box { padding-left: 6px; padding-right: 6px; }
  html:lang(es) .env-dash-panel-header { flex-wrap: wrap; row-gap: 6px; }
  html:lang(es) .env-chrome-stats { gap: 6px; }
  html:lang(es) .env-chrome-stat-label { letter-spacing: 0; }
}

/* Blog tables on phones: the Spanish column heads and cells hold longer words than the English
   ones, and the table ran past the screen (to 504 px at 390). Smaller type and tighter cells; the
   row labels in the first column stay whole, long words in the other columns are hyphenated
   (with "-", which Inter has; words of 8 letters or more, 3 or more on each side), and a word
   that still does not fit breaks where it must. (The English table is 425 px wide at 390 too.) */
@media (max-width: 600px) {
  html:lang(es) .article-body table { font-size: 0.875rem; }
  html:lang(es) .article-body :is(th, td) {
    padding: 0.7rem 0.55rem;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
    -webkit-hyphenate-character: "-";
    hyphenate-character: "-";
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 3;
    hyphenate-limit-chars: 8 3 3;
  }
  html:lang(es) .article-body :is(th, td):first-child { overflow-wrap: normal; -webkit-hyphens: manual; hyphens: manual; }
  html:lang(es) .article-body th { font-size: 0.75rem; letter-spacing: 0; }
}

/* Home film window on phones: the footer button "Empieza gratis" stays on one line (it wrapped to
   two at 390 px, where English "Start Free" fits); the line beside it wraps instead. */
html:lang(es) .film-foot .btn { white-space: nowrap; }

/* Template library (English-only pages, read with the Spanish cookie): the category menu's
   first link, "Todo en {name}", wraps onto a second line instead of ending in "…" when the
   industry name is long ("Software, datos y herramientas de desarrollo"). */
.agl-browse:lang(es) .agl-mega-sub-all { white-space: normal; }