/**
 * BNE — /contact
 *
 * Estructura del nodo 10069 ("Contacto BNE"), Layout Builder `layout_onecol`
 * con 2 componentes en la region `content`:
 *   1. block_content 58bdfb06-1e82-49c3-ac56-a4e146454aba -> .bne-contact-card
 *      (linea 1: "Contacto BNE:" + pills; linea 2: "Siguenos:" + redes;
 *       linea 3: texto de horarios)
 *   2. webform_block (webform_id: contact) -> tarjeta del formulario
 *
 * Solo se estilan estas dos tarjetas. No se toca ningun otro selector
 * compartido: ni .bne-footer, ni los SDC (pill/social-link), ni Bootstrap.
 *
 * Este archivo se carga DESPUES de footer.css (ver bne_theme.libraries.yml),
 * lo que permite neutralizar por orden de cascada los overrides moviles del
 * footer que NO estan scopeados a .bne-footer (ver seccion 5).
 */

/* =========================================================
   1) CHROME DE LAS CARDS
   [FIGMA MEDIDO] Reutiliza el de las cajas ya validadas del proyecto
   (.bne-job-fairs__banner / .bne-job-fairs__schedule, home.css):
   radius-md (20px) + shadow 0 4px 10px rgba(111,123,133,0.4).
   Fondo --bne-color-white (#EDF0F5), por indicacion de diseno.
   OJO: ese token es identico a --bs-body-bg, asi que la card ya no se
   separa del fondo de pagina por color: el borde lo define unicamente
   la sombra. Si se quiere recuperar contraste de superficie, la
   alternativa es #fff literal (criterio de .bne-faq-sidebar en faq.css).
   ========================================================= */
.bne-contact-card,
.block-webform-block {
  background-color: var(--bne-color-white);
  border-radius: var(--bne-radius-md);
  box-shadow: 0 4px 10px rgba(111, 123, 133, 0.4);
  padding: var(--bne-space-6);
  box-sizing: border-box;
}

/* Espaciado vertical: separacion con el h1 del page title y entre las dos
   cards. Se declara en la card interior (no en el wrapper del bloque) para
   no depender del UUID del bloque; los margenes colapsan a traves del
   wrapper, que no tiene padding ni borde, con lo que el efecto visual es el
   mismo.
   El gap de 40px (--bne-space-10) separa los tres hijos: fila 1 / fila 2 /
   parrafo. El padding-bottom es de 48px: como el parrafo es el ultimo hijo,
   esa es la distancia de su borde inferior al borde inferior de la card.
   La escala de espaciado no tiene un token de 48px (va 4/8/12/16/20/24/32/40),
   de ahi el literal. */
.bne-contact-card {
  display: flex;
  flex-direction: column;
  gap: var(--bne-space-10);
  padding-bottom: 48px;
  margin-top: var(--bne-space-6);
  margin-bottom: var(--bne-space-6);
}

/* Separacion entre el borde inferior de la card del formulario y el comienzo
   del footer: 69px. Sin esto ambas cajas se tocan (separacion medida = 0px en
   1440, 1024 y 375).
   Va como margin-bottom del propio bloque y no como padding-bottom de
   .layout__region--content, que es compartido por todos los layouts de
   Layout Builder del sitio. La escala de espaciado no tiene token de 69px
   (4/8/12/16/20/24/32/40), de ahi el literal. */
.block-webform-block {
  margin-bottom: 69px;
}

/* =========================================================
   2) FILAS DE LA CARD 1
   Etiqueta a la izquierda, contenido a la derecha
   (justify-content: space-between).

   [FIGMA] Tipografia de las dos lineas de texto de la card 1:
     .bne-contact-card__label -> gobCL Bold   20px / 100%  / ls 0
     .bne-contact-card__text  -> gobCL Regular 16px / 16px / ls 0.1%
   leading-trim y vertical-align se declaran tal cual, aunque leading-trim
   sea el valor inicial y vertical-align no aplique: ambos elementos son flex
   items (la card es flex-column, la label es item de la row) y vertical-align
   solo afecta a cajas inline-level y a celdas de tabla.

   Las dos filas comparten una columna de etiqueta fija de 132px
   (flex-basis 132px, sin shrink) seguida de 12px de separacion, de modo que
   los grupos de contenido de ambas filas arrancan en el mismo x. Por eso la
   row va con justify-content: flex-start y no space-between: este ultimo
   mandaba cada grupo al borde derecho y las separaciones reales quedaban en
   736px (pills) y 775px (redes) a 1440, ignorando el gap.
   ========================================================= */
.bne-contact-card__row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--bne-space-3);
}

.bne-contact-card__label {
  margin: 0;
  flex: 0 0 132px;
  font-family: var(--bne-font-family-base);
  font-size: 20px;
  font-weight: var(--bne-font-weight-bold);
  line-height: 100%;
  letter-spacing: 0;
  leading-trim: none;
  vertical-align: middle;
  color: var(--bne-color-primary-60);
}

.bne-contact-card__text {
  margin: 0;
  /* 1028px de ancho de diseno a 1440. Se declara max-width y no width para
     que en viewports mas angostos se encoja al ancho disponible en vez de
     desbordar la card (que a 1024 solo ofrece 880px de ancho interior). */
  max-width: 1028px;
  font-family: var(--bne-font-family-base);
  font-size: 16px;
  font-weight: var(--bne-font-weight-regular);
  line-height: 16px;
  letter-spacing: 0.1%;
  leading-trim: none;
  color: var(--bne-color-primary-60);
}

/* =========================================================
   3) REDES SOCIALES
   El <ul> lo produce el override social-media-links-platforms.html.twig
   (módulo contrib social_media_links). Sus reglas reales en footer.css
   estan scopeadas a ".bne-footer .bne-footer-social", así que aqui solo
   llega el CSS generico del módulo contrib (margenes y vinetas). Se
   reproduce el layout del footer: flex, gap 22px, sin vinetas.
   Los <a class="bne-social-link"> ya traen su CSS del SDC social-link
   ( circulos de 44px, hover con sombra), que es autocontenido.
   ========================================================= */
.bne-contact-card ul.social-media-links--platforms {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bne-contact-card ul.social-media-links--platforms li {
  margin: 0;
  padding: 0;
}

/* =========================================================
   4) CARD 2 — FORMULARIO (webform "contact")
   Los form-item son hijos directos del <form>, con clases
   .js-form-item-name / -email / -subject / -message mas .form-actions.
   Grid de 2 columnas: Nombre + Apellidos en la linea 1; Asunto, Mensaje y
   el boton a ancho completo.
   Los input[type=hidden] tambien son hijos directos del form pero llevan
   display:none del user agent, asi que no generan caja en el grid.
   ========================================================= */
.block-webform-block form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bne-space-4) var(--bne-space-5);
  margin: 0;
}

/* min-width:0 evita que el minimo implicito "auto" (min-content) de un
   grid item ensanche la columna y desborde el ancho de la card. */
.block-webform-block .form-item,
.block-webform-block .form-actions {
  min-width: 0;
}

.block-webform-block .js-form-item-subject,
.block-webform-block .js-form-item-message,
.block-webform-block .form-actions {
  grid-column: 1 / -1;
}

/* El template form-element-label de bootstrap5 no emite .form-label en esta
   version de Drupal, asi que las etiquetas no reciben el margin-bottom del
   Bootstrap: se declara aqui.

   [FIGMA] Tipografia: gobCL Bold 20px / 20px / ls 0, vertical-align bottom
   (inerte: la etiqueta es un bloque dentro de un .form-item, no una celda de
   tabla ni una caja inline). */
.block-webform-block .form-item > label {
  display: block;
  margin-bottom: var(--bne-space-2);
  font-family: var(--bne-font-family-base);
  font-size: 20px;
  font-weight: var(--bne-font-weight-bold);
  line-height: 20px;
  letter-spacing: 0;
  leading-trim: none;
  vertical-align: bottom;
  color: var(--bne-color-primary-60);
}

/* =========================================================
   5) BORDES DE LOS CAMPOS DEL FORMULARIO
   Bootstrap pinta .form-control con #dee2e6 y, en :focus, con #86b7fe.
   Ambos se sustituyen por --bne-color-primary-60 (#0070C0). El :focus se
   declara aparte porque su especificidad es la misma (0,2,0) que la regla
   base y el desempate dependeria del orden de agregacion del CSS.
   ========================================================= */
.block-webform-block .form-control,
.block-webform-block .form-control:focus {
  border-color: var(--bne-color-primary-60);
}

/* =========================================================
   6) ACCION DEL FORMULARIO
   El boton se alinea a la derecha: .form-actions es un grid item con
   grid-column 1/-1 y display:block, asi que basta con text-align.
   [FIGMA] El texto del boton usa Roboto, a diferencia del resto de la card
   (gobCL): Bold 14px / 100% / ls 0, con cifras lining y tabulares.
   No hay token de Roboto-first en tokens.css (--bne-font-family-base arranca
   en gobCL), de ahi el stack literal. El 14px si es
   --bne-font-size-body-md.
   Las cifras lining/tabulares van por el shorthand font-variant-numeric y no
   por los longhands font-variant-numeric-figure/-spacing: Chrome no
   implementa los longhands (CSS.supports devuelve false) y los descarta en
   silencio, dejando el computed en "normal". El shorthand si se aplica.
   ========================================================= */
.block-webform-block .form-actions {
  text-align: right;
}

.block-webform-block #edit-actions-submit {
  font-family: Roboto, Arial, sans-serif;
  font-weight: var(--bne-font-weight-bold);
  font-size: var(--bne-font-size-body-md);
  line-height: 100%;
  letter-spacing: 0;
  leading-trim: none;
  vertical-align: middle;
  font-variant-numeric: lining-nums tabular-nums;
  border-radius: 16px;
  padding: 8px 16px;
  border-width: 1px;
  gap: 8px;
  /* 129px de ancho de diseno. Con padding 8/16 y borde 1px el ancho natural
     del boton queda en 127px, porque el navegador mide "Send message" en
     93px y Figma en 95px. Se usa min-width y no width: fija los 129px
     exactos y, a diferencia de width, nunca recorta el texto si la etiqueta
     se alarga o cambia de idioma. */
  min-width: 129px;
  /* #006BB9 no coincide con ningun token (los mas cercanos son
     --bne-color-primary-60 #0070C0 y --bne-color-gob-blue #0f69b4), de ahi
     el literal. El borde de 1px va en el mismo color que el fondo para que
     no se vea el anillo #0D6EFD que trae .btn-primary de Bootstrap. */
  background-color: #006BB9;
  border-color: #006BB9;
}

/* =========================================================
   7) DESACOPLE DE LOS OVERRIDES MOVILES DEL FOOTER
   footer.css NO scopea estas reglas a .bne-footer, asi que tambien alcanzan
   a .bne-footer-contact en /contact y hay que anularlas:
     - footer.css:577  flex-wrap:wrap; justify-content:space-between
     - footer.css:585  .bne-pill--phone  147px
     - footer.css:589  .bne-pill--email  205px
     - footer.css:604  position:relative; flex-wrap:nowrap; gap:0
     - footer.css:611  .bne-pill--email position:absolute; right:-15px
   Se restauran los valores de escritorio con selectores mas especificos
   (0,2,0) y (0,3,0) > (0,1,0) y (0,2,0) de footer.css. Declarados fuera de
   media query a proposito: ganan en todos los anchos, incluido el
   @media (max-width:25.9375em) de footer.css:603.
   ========================================================= */
.bne-contact-card .bne-footer-contact {
  position: static;
  flex-wrap: nowrap;
  justify-content: flex-start;
  grid-row: auto;
  /* 8px = --bne-space-2, la separacion real del footer intacto (verificado
     en /faq a 1440px: 151px + 8px + 215px = 374px). */
  gap: var(--bne-space-2);
}

/* Escritorio: los anchos del diseno, 151px y 215px (footer.css:287 y :295).
   Calzan EXACTOS con el contenido actual a 15px: el telefono necesita 151px
   justos y el email 205px de los 215px disponibles. Por eso la tipografia
   solo se reduce en movil (seccion 6), donde los anchos son otros. */
.bne-contact-card .bne-footer-contact .bne-pill--phone {
  width: 151px;
}

.bne-contact-card .bne-footer-contact .bne-pill--email {
  position: static;
  right: auto;
  width: 215px;
}

/* =========================================================
   6) RESPONSIVE  (<75em, mismo breakpoint que el resto del tema)
   - las filas de la card 1 pasan a columna (etiqueta arriba, contenido abajo)
   - las pills van a ancho completo apiladas: 151+215+8 = 374px no entran en
     375px de viewport menos el padding de la card (24px*2)
   - el formulario pasa a una sola columna
   ========================================================= */
@media (max-width: 74.98em) {
  .bne-contact-card {
    /* 12px en vez de los 20px de --bne-space-5: es lo que permite que las
       dos pills entren en una misma fila desde 375px de viewport.
         127 + 7 + 177 = 311px
         ancho util = viewport - 40 (contenedor) - 24 (padding 12+12)
         311 <= viewport - 64  ->  viewport >= 375px
       Con 20px de padding el minimo era 391px y en 375px la fila no cabia. */
    padding: var(--bne-space-3);
    /* El shorthand de arriba revierte el padding-bottom: se re-declara para
       mantener los 48px del borde del parrafo al borde de la card. */
    padding-bottom: 48px;
  }

  .bne-contact-card__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bne-space-3);
  }

  /* La columna de etiqueta fija es del eje horizontal: en column, el
     flex-basis:132px se aplicaria al alto y inflaria la etiqueta. */
  .bne-contact-card__label {
    flex: 0 0 auto;
  }

  .bne-contact-card .bne-footer-contact {
    flex-wrap: nowrap;
    gap: 7px;
  }

  /* Movil: 127px + 7px + 177px = 311px, siempre en la misma fila.
     Con el padding de card en 12px la fila entra desde 375px de viewport;
     por debajo de 375px se apilan (ver seccion 8). */
  .bne-contact-card .bne-footer-contact .bne-pill--phone {
    width: 127px;
  }

  .bne-contact-card .bne-footer-contact .bne-pill--email {
    width: 177px;
  }

  /* A 127px y 177px el contenido a 15px no cabe (el telefono necesita 151px y
     el email 205px), asi que se compacta SOLO en movil. Reparto con 13px /
     padding 14px / gap 10px:
       telefono  14 + 15 (icono) + 10 + 70 (texto) + 14 = 123px  de 127px
       email     14 + 24 (icono) + 10 + 109 (texto) + 14 = 171px de 177px
     En escritorio no se toca nada de esto: ahi los anchos son 151/215 y el
     texto a 15px calza exacto. */
  .bne-contact-card .bne-footer-contact .bne-pill,
  .bne-contact-card .bne-footer-contact .bne-pill__text {
    font-size: 13px;
  }

  .bne-contact-card .bne-footer-contact .bne-pill {
    gap: 10px;
  }

  .bne-contact-card .bne-footer-contact .bne-pill--phone,
  .bne-contact-card .bne-footer-contact .bne-pill--email {
    padding-left: 14px;
    padding-right: 14px;
  }

  .block-webform-block {
    padding: var(--bne-space-5);
  }

  .block-webform-block form {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Movil: el boton toma todo el ancho del formulario. El margen que tiene hoy
     respecto del contenedor es 0px a la derecha (esta alineado con
     text-align:right y su borde derecho coincide con el del contenedor, que no
     tiene padding: medido 0.0px a 375, 768 y 1440px). Respetar "el mismo
     margen por la derecha y por la izquierda" es entonces simplemente ocupar el
     100%: 0px a cada lado. A 375px el boton pasa de 129px a 295px.
     min-width:129px sigue vigente pero sin efecto: el contenedor mas angosto
     medido es de 256px, siempre por encima de 129px. */
  .block-webform-block #edit-actions-submit {
    width: 100%;
  }

  /* [USUARIO] En movil tambien se quita el "margin: 1em 0" de Drupal core en
     los campos del form: el espaciado entre campos lo controla el gap del
     grid (ver comentario de la regla equivalente en desktop). */
  .block-webform-block .form-item,
  .block-webform-block .form-actions {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* [USUARIO] Padding de 24px en movil (override del 12px de arriba, necesario
     para que quepan las pills en una sola fila). Al declararse despues, el
     shorthand revierte tambien el padding-bottom de 48px de la base. */
  .bne-contact-card {
    padding: var(--bne-space-6);
  }

  /* [USUARIO] Padding de 24px en movil para la card del formulario (override
     del var(--bne-space-5)=20px declarado arriba). */
  .block-webform-block {
    padding: var(--bne-space-6);
  }

  /* [USUARIO] Separacion vertical de 20px entre las dos filas de la card 1 en
     movil. El gap de la card sigue en 40px (el del parrafo no se toca): se
     compensa con un margin-bottom negativo en la fila 1 (flex item), que
     resta 20px al gap de 40px (40 - 20 = 20). --bne-space-5 = 20px. */
  .bne-contact-card__row:first-child {
    margin-bottom: calc(-1 * var(--bne-space-5));
  }

  /* [USUARIO] Separacion de 20px entre el borde inferior del <ul> de redes
     (fila 2) y el borde superior del parrafo de horarios: el gap de la card
     sigue en 40px y se resta el mismo 20px con margin-bottom negativo en la
     fila 2. */
  .bne-contact-card__row:nth-child(2) {
    margin-bottom: calc(-1 * var(--bne-space-5));
  }

  /* [USUARIO] Separacion vertical de 25px entre los .form-item del form en
     movil (base: --bne-space-4 = 16px). No hay token de 25px en la escala de
     espaciado, de ahi el literal. En movil el grid es de una sola columna,
     asi que el gap de fila controla la separacion entre campos. */
  .block-webform-block form {
    row-gap: 25px;
  }
}

/* =========================================================
   7) REDES SOCIALES EN MOVIL (<=30em / 480px)
   Con los circulos de 44px y gap 22px la fila mide 44*6 + 22*5 = 374px, asi
   que en cualquier movil de 320 a 414px los 6 iconos se partian en dos lineas.
   Objetivo: los 6 en una sola linea, con el primero a 24px del borde izquierdo
   del card y el ultimo a 24px del borde derecho.

   Como el card tiene 12px de padding lateral en movil, al <ul> se le dan 12px
   mas: 12px (padding) + 12px = 24px exactos respecto del borde del card.

   El ancho disponible para iconos + separacion es:
     card - 24 - 24 = (viewport - 40) - 48 = viewport - 88px
   y con space-between la separacion se reparte el sobrante, asi que la
   unica restriccion es que entren los 6:

     viewport 320px -> 232px disponibles -> icono <= 32px  (gap resultante  ~8px)
     viewport 375px -> 287px disponibles -> icono <= 38px  (gap resultante ~12px)
     viewport 414px -> 326px disponibles -> icono <= 42px  (gap resultante ~14px)
     viewport 480px -> 392px disponibles -> icono <= 58px  (ya alcanza 44px)

   Por eso el tamano va con clamp() en vez de un breakpoint fijo: 11vw - 3px
   resuelve 32px en 320px de viewport y llega a los 44px del escritorio cerca
   de los 430px. El minimo de 28px es una red de seguridad para viewports
   menores a 282px, donde los 6 iconos con 32px ya no entrarian.
   ========================================================= */
@media (max-width: 30em) {
  .bne-contact-card ul.social-media-links--platforms {
    --bne-social-link-size: clamp(28px, 11vw - 3px, 44px);

    /* nowrap + space-between: los 6 quedan siempre en una unica linea y la
       separacion se reparte sola. Con flex-wrap:wrap el ultimo icono podia
       caer a una segunda linea y romper el margen de 24px.

       [USUARIO] Sin padding-inline: las redes quedan alineadas con el borde
       izquierdo del contenido del card (antes el primer icono iba a 12px del
       borde del <ul>, sumados a los 24px de padding del card). */
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0;

    /* Imprescindible: .bne-contact-card__row usa align-items:flex-start en
       movil, asi que sin esto el <ul> se encoge al ancho de su contenido y
       space-between no tiene nada que repartir (el ultimo icono terminaba a
       63-152px del borde derecho del card en vez de a 24px). */
    width: 100%;
  }

  /* El SVG del SDC social-link viene fijo en 24px dentro del circulo de 44px.
     Se escala en la misma proporcion que el circulo (24/44) para que el
     glifo no se vea desproporcionado al achicar el icono. */
  .bne-contact-card ul.social-media-links--platforms .bne-social-link svg {
    width: calc(var(--bne-social-link-size) * 24 / 44);
    height: calc(var(--bne-social-link-size) * 24 / 44);
  }
}

/* =========================================================
   8) PILLS APILADAS POR DEBAJO DE 375px
   Las dos pills en fila miden 127 + 7 + 177 = 311px y el ancho util del card
   es viewport - 40 (contenedor) - 24 (padding 12+12) = viewport - 64. La fila
   entra justo desde viewport 375px (375 - 64 = 311px, sin holgura), asi que
   por debajo de 375px se apilan al 100% para no provocar scroll horizontal.

   El corte va en 23.375em (374px) y no en 23.4375em (375px) porque
   max-width es inclusivo: con 23.4375em los 375px caian dentro del bloque y
   las pills quedaban apiladas justo en el viewport al que se queria llegar.
   ========================================================= */
@media (max-width: 23.375em) {
  .bne-contact-card .bne-footer-contact {
    flex-wrap: wrap;
    /* Necesario: como flex item con align-items:flex-start el contenedor se
       encoge al contenido, y el width:100% de las pills pasa a resolver
       contra un ancho circular (299px en vez de los 310px reales a 374px). */
    width: 100%;
  }

  .bne-contact-card .bne-footer-contact .bne-pill--phone,
  .bne-contact-card .bne-footer-contact .bne-pill--email {
    width: 100%;
  }
}

/* =========================================================
   9) RESPONSIVE DESKTOP (>=75em)
   Solo en desktop de /contact se neutraliza el padding que plantean los
   layouts para este nodo: el usuario pidio explicitamente .region.region-content
   con padding 0 px (se descarto la variante "box-shadow en .region-content").
   Las cards mantienen su propio padding; el aire superior (40px respecto a
   .bne-topbar__line) lo da el margin-top que ya traia la base.

   Layout.common: .region-content es compartido por todos los layouts de
   Layout Builder, y layout.css:104 ya lo deja con padding 0 en desktop con
   especificidad (0,4,2). Para no rozar otros nodos (ficha article, etc.) se
   acota con :has(.bne-contact-card): solo existe en /contact, asi que la
   regla se desactiva sola en cualquier otro nodo.
   ========================================================= */
@media (min-width: 75em) {
  html body.path-node .container .region.region-content:has(.bne-contact-card) {
    padding: 0px;
    margin-top: 40px;
  }

  /* Card del formulario: mantiene el padding de 48px (el form queda a 48px del
     borde del bloque). Se conserva el margin-bottom de 69px que separa del
     footer (contact.css:65). */
  .block-webform-block {
    padding: 48px;
  }

  /* Drupal core (.form-item) aplica "margin: 1em 0" a cada campo del form.
     Dentro del grid de .block-webform-block form ese margen se suma al gap del
     grid y agranda la separacion entre campos; el usuario pidio quitarlo en
     desktop de /contact. El espaciado entre campos lo controla el gap. */
  .block-webform-block .form-item,
  .block-webform-block .form-actions {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* [USUARIO] En desktop el gap del grid del form pasa a --bne-space-6 (24px)
     en ambas direcciones (base: --bne-space-4/--bne-space-5). */
  .block-webform-block form {
    gap: var(--bne-space-6) var(--bne-space-6);
  }
}