/* ════════════════════════════════════════════════════════════
   reixes.css — Reixes compensades.

   El problema mesurat: les reixes eren de 3 columnes fixes i el nombre
   de peces canvia a cada pàgina (1, 2, 4, 5, 6). Resultat: files finals
   coixes —una targeta sola ocupant un terç i dos forats al costat— a
   dotze de les catorze pàgines.

   La solució: una base de SIS columnes. Sis es divideix per 2 i per 3,
   així que cada peça pot ocupar 2 (tres per fila), 3 (dues per fila) o 6
   (una per fila) i cap fila queda a mitges. El nombre de columnes surt
   del nombre de peces amb :has(), no d'una classe posada a mà.
   ════════════════════════════════════════════════════════════ */

@media (min-width:700px){

  .cards,.tiles{grid-template-columns:repeat(6,1fr)}
  .cards > *,.tiles > *{grid-column:span 2}          /* per defecte, tres per fila */

  /* Dues peces: mitja reixa cadascuna */
  .cards:has(> :nth-child(2):last-child) > *,
  .tiles:has(> :nth-child(2):last-child) > *{grid-column:span 3}

  /* Quatre peces: dues i dues, en comptes de 3 + 1 orfe */
  .cards:has(> :nth-child(4):last-child) > *,
  .tiles:has(> :nth-child(4):last-child) > *{grid-column:span 3}

  /* Cinc peces: tres a dalt i dues a baix, però omplint la fila */
  .cards:has(> :nth-child(5):last-child) > :nth-child(n+4),
  .tiles:has(> :nth-child(5):last-child) > :nth-child(n+4){grid-column:span 3}

  /* Una sola peça (només passa a .tiles): ocupa la fila sencera */
  .tiles:has(> :only-child) > *{grid-column:span 6}
}

/* Vores de la reixa: amb columnes variables, el nth-child de tres ja no val.
   Es dibuixa la vora dreta a tot arreu i s'esborra a l'última de cada fila
   comparant la posició real de cada targeta. */
@media (min-width:700px){
  .cards > .card{border-right:1px solid var(--rule)}
  .cards > .card.is-last-col{border-right:0}
  .tiles{gap:0;background:transparent}
  .tiles > .tile{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .tiles > .tile.is-last-col{border-right:0}
  .tiles > .tile.is-last-row{border-bottom:0}
  .bg-beige .tiles > .tile{background:transparent}
}

/* Els passos i les dades sempre van de tres en tres o de dos en dos */
.steps:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
.facts:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}

/* ── Mòbil: una columna, i que les vores no deixin fils solts ── */
@media (max-width:699px){
  .cards,.tiles{grid-template-columns:1fr;gap:0}
  .cards > .card{border-right:0;border-bottom:1px solid var(--rule)}
  .tiles{background:transparent}
  .tiles > .tile{border-bottom:1px solid var(--rule);border-right:0}
  .tiles > .tile:last-child{border-bottom:0}
}

/* Amb columnes de mides diferents, un aspect-ratio fa que la targeta ampla
   tingui una foto el doble d'alta que la seva veïna. L'alçada de la imatge
   passa a ser fixa: així totes les targetes tenen el mateix pes visual. */
@media (min-width:700px){
  .card-media{aspect-ratio:auto;height:186px}
}
@media (min-width:1100px){ .card-media{height:204px} }

/* La targeta del directori no porta foto. Si es queda blanca al costat d'una
   amb imatge, sembla una targeta a mig fer; en menta i amb el contingut
   centrat, es llegeix com el que és: una porta al catàleg, no un servei. */
.card-plain{background:var(--mint);justify-content:center;gap:10px}
.card-plain:hover{background:var(--mint-deep)}
.card-plain .num{color:var(--ink);opacity:.62}
.card-plain .go{margin-top:18px}

/* ── Capçalera: els ítems del menú, més grans ─────────────────
   Estaven a .85rem, que en una condensada és molt petit per a un
   element de navegació principal. Pugen a 1rem i el CTA els acompanya. */
@media (min-width:1024px){
  .nav a,.nav .subnav-btn{font-size:1rem;letter-spacing:.09em}
  .nav > ul{gap:38px}
  .nav .btn{font-size:.9rem;min-height:50px;padding:0 24px}
  .masthead .shell{min-height:84px}
  .brandmark img{width:148px}
  .areanav{top:84px}
  .pagenav{top:84px}
  section[id]{scroll-margin-top:140px}
  .subnav-col a{font-size:1.02rem}
  .subnav-col h3{font-size:.82rem}
}
@media (min-width:1280px){
  .nav a,.nav .subnav-btn{font-size:1.06rem}
  .nav > ul{gap:44px}
}