/* ============================================================
   Opción 7 · Proyectos en retícula (js/proyectos7.js)
   Se carga DESPUÉS de proyectos6.css: reutiliza sus tokens (--sage, --accent,
   --fs-body-sm…) y todo lo demás de la página (hero, servicios, Drupal, footer).
   ============================================================ */

.pgrid { padding: clamp(3rem,7vw,6rem) var(--pad) clamp(5rem,10vw,9rem);
  background: var(--sage); }

/* ---------- Cabecera: título + filtro ---------- */
.pgrid__head { display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 1.2rem 2rem; margin-bottom: clamp(2.5rem,6vw,5.5rem);
  opacity: 0; transform: translateY(120px);
  transition: opacity .8s var(--ease), transform 1.05s var(--ease); }
.pgrid__head.is-in { opacity: 1; transform: none; }
.pgrid__title { font-family: var(--disp); font-size: clamp(2rem, 6vw, 4.5rem);
  line-height: .95; letter-spacing: -0.03em; }
.pgrid__title sup { font-size: .3em; margin-left: .35em; color: var(--accent);
  letter-spacing: 0; vertical-align: top; position: relative; top: .3em; }

.pgrid__filtro { display: flex; gap: .45rem; flex-wrap: wrap; }
.pgrid__filtro button { font: 500 .88rem/1 var(--sans); letter-spacing: -.005em;
  padding: .72rem 1.05rem; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid rgba(var(--ink-rgb), .22); background: transparent; color: var(--ink);
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.pgrid__filtro button:hover { border-color: var(--ink); }
.pgrid__filtro button.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---------- Retícula ---------- */
.pgrid__grid { display: grid; grid-template-columns: var(--grid12);
  column-gap: var(--gut); row-gap: clamp(3.5rem, 7vw, 7rem);
  align-items: start; }
.pgrid__grid > [hidden] { display: none !important; }

.pg-card { grid-row: var(--fila, auto); min-width: 0; }
.pg-card[data-size="ancha"][data-lado="izq"]    { grid-column: 1 / span 7; }
.pg-card[data-size="estrecha"][data-lado="der"]  { grid-column: 9 / span 4; margin-top: clamp(4rem, 13vw, 13rem); }
.pg-card[data-size="estrecha"][data-lado="izq"]  { grid-column: 1 / span 4; }
.pg-card[data-size="ancha"][data-lado="der"]     { grid-column: 6 / span 7; margin-top: clamp(4rem, 13vw, 13rem); }

/* Pareja de dos del mismo formato: la fila se reparte a mitades (la derecha,
   desplazada hacia abajo como siempre). Más especificidad que las reglas de
   arriba y que las de tablet. */
.pgrid__grid > [data-reparto="mitad"][data-lado="izq"] { grid-column: 1 / span 6; }
.pgrid__grid > [data-reparto="mitad"][data-lado="der"] { grid-column: 7 / span 6; margin-top: clamp(3rem, 9vw, 9rem); }
.pgrid__grid > .pg-card[data-reparto="mitad"][data-size="estrecha"][data-lado="izq"] { grid-column: 2 / span 4; }
.pgrid__grid > .pg-card[data-reparto="mitad"][data-size="estrecha"][data-lado="der"] { grid-column: 8 / span 4; }
/* Tarjeta sin pareja (total impar): centrada */
.pgrid__grid > .pg-card[data-reparto="sola"][data-size="ancha"]    { grid-column: 3 / span 8; }
.pgrid__grid > .pg-card[data-reparto="sola"][data-size="estrecha"] { grid-column: 5 / span 4; }

/* ---------- Tarjeta ---------- */
.pg-card__media { position: relative; display: block; overflow: hidden; border-radius: var(--r-sm);
  background: var(--placeholder); isolation: isolate; }
.pg-card[data-size="ancha"] .pg-card__media    { aspect-ratio: 16 / 10; }
.pg-card[data-size="estrecha"] .pg-card__media { aspect-ratio: 4 / 5; }

.pg-card__m { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
  transform: scale(1.14); transition: transform 1.6s var(--ease); }
.pg-card[data-size="ancha"] .pg-card__m--estrecha,
.pg-card[data-size="estrecha"] .pg-card__m--ancha { display: none; }
.pg-card.is-in .pg-card__m { transform: scale(1); }
.pg-card.is-in .pg-card__media:hover .pg-card__m { transform: scale(1.04); transition-duration: 1.1s; }

.pg-card__badge { position: absolute; top: clamp(.7rem,1.2vw,1rem); left: clamp(.7rem,1.2vw,1rem); z-index: 1;
  font: 500 .72rem/1 var(--sans); letter-spacing: .01em; color: var(--white);
  padding: .5rem .75rem; border-radius: var(--r-pill);
  background: rgba(var(--ink-rgb), .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

.pg-card__info { display: grid; row-gap: .5rem; margin-top: clamp(.9rem, 1.5vw, 1.3rem); }
.pg-card__name { font-family: var(--disp); font-weight: 400; line-height: 1; letter-spacing: -0.025em;
  font-size: clamp(1.4rem, 2.5vw, 2.5rem); }
.pg-card[data-size="estrecha"] .pg-card__name { font-size: clamp(1.25rem, 1.9vw, 1.9rem); }
.pg-card__name a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size .5s var(--ease); padding-bottom: .06em; }
.pg-card__name a:hover, .pg-card:has(.pg-card__media:hover) .pg-card__name a { background-size: 100% 2px; }
.pg-card__sub { display: flex; justify-content: space-between; align-items: baseline;
  gap: .4rem 1.2rem; flex-wrap: wrap; }
.pg-card__tags { font-size: .8rem; color: var(--soft); line-height: 1.45; }
.pg-card__tags i { font-style: normal; opacity: .55; }
.pg-card__site { font-size: .8rem; font-weight: 500; white-space: nowrap;
  border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: color .3s; }
.pg-card__site:hover { color: var(--accent); }

/* Entrada: sube y se destapa de abajo arriba; la imagen se asienta (scale) */
.pg-card { opacity: 0; transform: translateY(90px);
  transition: opacity .9s var(--ease), transform 1.2s var(--ease); }
.pg-card .pg-card__media { clip-path: inset(22% 0 0 0 round var(--r-sm));
  transition: clip-path 1.3s var(--ease); }
.pg-card.is-in { opacity: 1; transform: none; }
.pg-card.is-in .pg-card__media { clip-path: inset(0 0 0 0 round var(--r-sm)); }

/* ---------- Transición del filtro (View Transitions) ---------- */
::view-transition-group(*) { animation-duration: .7s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .pg-card[data-size="ancha"][data-lado="izq"]    { grid-column: 1 / span 7; }
  .pg-card[data-size="estrecha"][data-lado="der"]  { grid-column: 8 / span 5; }
  .pg-card[data-size="estrecha"][data-lado="izq"]  { grid-column: 1 / span 5; }
  .pg-card[data-size="ancha"][data-lado="der"]     { grid-column: 6 / span 7; }
}

/* ---------- Móvil: una columna, todas las tarjetas a todo el ancho ---------- */
@media (max-width: 760px) {
  .pgrid__grid { grid-template-columns: minmax(0, 1fr); row-gap: clamp(2.8rem, 12vw, 4rem); }
  .pg-card { grid-row: auto; grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .pg-card[data-size="ancha"] .pg-card__media { aspect-ratio: 4 / 3; }
  /* Las verticales también a todo el ancho (conservan su imagen en 4:5) */
  .pgrid__head { align-items: flex-start; flex-direction: column; }
}

/* Movimiento reducido: cabecera y tarjetas entran con fundido, sin subir ni
   destaparse; el cambio de filtro es directo (sin View Transition). */
@media (prefers-reduced-motion: reduce) {
  .pgrid__head, .pg-card, .pg-card .pg-card__media, .pg-card__m {
    transform: none !important; clip-path: none !important; }
  .pgrid__head, .pg-card { transition-duration: 1.2s !important; }
  ::view-transition-group(*) { animation: none; }
}