/* ==========================================================
   BUILD 12.0 — Uniformitat total de totes ses seccions inferiors
   ========================================================== */
:root{
  --et12-gap:14px;
  --et12-card-width:min(74vw,310px);
  --et12-card-image-h:228px;
  --et12-comic-image-h:360px;
  --et12-corral-image-h:132px;
  --et12-voice-image-h:260px;
}

/* Neteja de qualsevol regla antiga que deformi ses targetes. */
.et12-track,
.et12-track *{
  box-sizing:border-box;
}
.et12-track{
  min-width:0!important;
  align-items:stretch!important;
}
.et12-card{
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
  height:auto!important;
  margin:0!important;
  padding:0 14px!important;
  border-right:1px solid var(--rule)!important;
  background:transparent!important;
  overflow:hidden!important;
}
.et12-card:first-child{padding-left:0!important}
.et12-card:last-child{padding-right:0!important;border-right:0!important}

/* ==========================================================
   TARGETA UNIVERSAL: FEMILLISTA + GASTRÒPOLIS
   ========================================================== */
.et12-news-track{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  width:100%!important;
  overflow:visible!important;
}
.et12-news-card{
  display:grid!important;
  grid-template-rows:var(--et12-card-image-h) 34px 78px 22px!important;
  align-content:start!important;
}
.et12-news-card>a{
  display:block!important;
  width:100%!important;
  height:var(--et12-card-image-h)!important;
  min-height:var(--et12-card-image-h)!important;
  max-height:var(--et12-card-image-h)!important;
  margin:0!important;
  overflow:hidden!important;
  background:#ece7dd!important;
  aspect-ratio:auto!important;
}
.et12-news-card>a picture,
.et12-news-card>a img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  max-height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  aspect-ratio:auto!important;
}
.et12-news-card .eyebrow{
  align-self:end!important;
  min-height:0!important;
  margin:9px 0 4px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.et12-news-card h3{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;
  overflow:hidden!important;
  min-height:0!important;
  max-height:78px!important;
  margin:0!important;
  font-size:20px!important;
  line-height:1.05!important;
}
.et12-news-card .story-meta{
  align-self:end!important;
  min-height:0!important;
  margin:0!important;
  padding-top:7px!important;
}

/* ==========================================================
   ES CORRAL DE DALT: mateixa caixa, mateixa proporció 2,35:1
   ========================================================== */
.et12-corral-track .et12-news-card{
  grid-template-rows:var(--et12-corral-image-h) 34px 56px 22px!important;
}
.et12-corral-track .et12-news-card>a{
  height:var(--et12-corral-image-h)!important;
  min-height:var(--et12-corral-image-h)!important;
  max-height:var(--et12-corral-image-h)!important;
}
.et12-corral-track .et12-news-card h3{
  -webkit-line-clamp:2!important;
  max-height:56px!important;
}

/* ==========================================================
   SÀTIRACÒMICA: totes ses làmines idèntiques
   ========================================================== */
.et12-comic-track{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  width:100%!important;
  overflow:visible!important;
}
.et12-comic-card{
  display:grid!important;
  grid-template-rows:var(--et12-comic-image-h) 34px 50px!important;
  align-content:start!important;
}
.et12-comic-card>a{
  display:block!important;
  width:100%!important;
  height:var(--et12-comic-image-h)!important;
  min-height:var(--et12-comic-image-h)!important;
  max-height:var(--et12-comic-image-h)!important;
  overflow:hidden!important;
  background:#eee8db!important;
  border:1px solid #d8d0c3!important;
  aspect-ratio:auto!important;
}
.et12-comic-card>a picture,
.et12-comic-card>a img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  max-height:100%!important;
  object-fit:cover!important;
  aspect-ratio:auto!important;
}
.et12-comic-card .eyebrow{
  min-height:0!important;
  margin:8px 0 4px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.et12-comic-card h3{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
  min-height:0!important;
  max-height:50px!important;
  margin:0!important;
  font-size:18px!important;
  line-height:1.05!important;
  text-align:left!important;
}

/* ==========================================================
   SES VEUS DES TANCAT: retrats i peus exactament alineats
   ========================================================== */
.et12-voices-track{
  display:flex!important;
  gap:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-snap-type:x proximity!important;
  -webkit-overflow-scrolling:touch!important;
  padding:0 0 12px!important;
}
.et12-voice-card{
  flex:0 0 244px!important;
  display:grid!important;
  grid-template-rows:var(--et12-voice-image-h) 48px 48px!important;
  scroll-snap-align:start!important;
  border:0!important;
  border-right:1px solid var(--rule)!important;
  padding:0 14px!important;
}
.et12-voice-card:first-child{padding-left:0!important}
.et12-voice-card:last-child{padding-right:0!important;border-right:0!important}
.et12-voice-card>a{
  display:contents!important;
}
.et12-voice-card img{
  display:block!important;
  width:100%!important;
  height:var(--et12-voice-image-h)!important;
  min-height:var(--et12-voice-image-h)!important;
  max-height:var(--et12-voice-image-h)!important;
  object-fit:cover!important;
  object-position:center!important;
  aspect-ratio:auto!important;
  border:1px solid #d8d2c8!important;
  background:#f7f3eb!important;
}
.et12-voice-card h3{
  align-self:end!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
  min-height:0!important;
  max-height:48px!important;
  margin:9px 0 2px!important;
  font-size:20px!important;
  line-height:1.05!important;
  text-align:center!important;
}
.et12-voice-card p{
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
  min-height:0!important;
  max-height:48px!important;
  margin:0!important;
  font-size:13px!important;
  line-height:1.25!important;
  text-align:center!important;
}

/* ==========================================================
   AGENDA: totes ses files amb exactament sa mateixa alçada
   ========================================================== */
.et12-events-list{
  padding-top:0!important;
}
.et12-event-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 40%!important;
  gap:26px!important;
  align-items:stretch!important;
  min-height:230px!important;
  height:230px!important;
  padding:18px 0!important;
  overflow:hidden!important;
}
.et12-event-copy{
  display:grid!important;
  grid-template-rows:28px 62px 64px 24px!important;
  align-content:center!important;
  min-width:0!important;
  padding:0 12px!important;
  overflow:hidden!important;
}
.et12-event-copy .eyebrow{
  align-self:end!important;
  margin:0 0 6px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.et12-event-copy h3{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
  min-height:0!important;
  max-height:62px!important;
  margin:0!important;
  font-size:27px!important;
  line-height:1.03!important;
}
.et12-event-copy>p:not(.eyebrow):not(.v9-event-meta){
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;
  overflow:hidden!important;
  min-height:0!important;
  max-height:64px!important;
  margin:7px 0 0!important;
  font-size:15px!important;
  line-height:1.35!important;
}
.et12-event-copy .v9-event-meta{
  align-self:end!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.et12-event-image{
  display:block!important;
  width:100%!important;
  height:194px!important;
  min-height:194px!important;
  max-height:194px!important;
  align-self:center!important;
  overflow:hidden!important;
  aspect-ratio:auto!important;
}
.et12-event-image picture,
.et12-event-image img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  max-height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  aspect-ratio:auto!important;
}

/* ==========================================================
   ARXIUS: mateix sistema també fora de sa portada
   ========================================================== */
.et12-archive-grid,
.et12-feature-side{
  align-items:stretch!important;
}
.et12-archive-grid>article,
.et12-feature-side>article{
  display:grid!important;
  grid-template-rows:210px 32px 58px 64px 22px!important;
  align-content:start!important;
  min-width:0!important;
  height:auto!important;
  overflow:hidden!important;
}
.et12-archive-grid>article>a,
.et12-feature-side>article>a{
  display:block!important;
  width:100%!important;
  height:210px!important;
  min-height:210px!important;
  max-height:210px!important;
  overflow:hidden!important;
  aspect-ratio:auto!important;
}
.et12-archive-grid>article>a picture,
.et12-archive-grid>article>a img,
.et12-feature-side>article>a picture,
.et12-feature-side>article>a img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  aspect-ratio:auto!important;
}
.et12-archive-grid>article h2,
.et12-feature-side>article h2{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
  min-height:0!important;
  max-height:58px!important;
  margin:0!important;
}
.et12-corral-archive>article{
  grid-template-rows:125px 32px 58px!important;
}
.et12-corral-archive>article>a{
  height:125px!important;
  min-height:125px!important;
  max-height:125px!important;
}
.et12-comic-archive>article{
  grid-template-rows:340px 32px 52px!important;
}
.et12-comic-archive>article>a{
  height:340px!important;
  min-height:340px!important;
  max-height:340px!important;
}

/* ==========================================================
   MÒBIL: una fila, una mida, cap superposició
   ========================================================== */
@media (max-width:760px){
  :root{
    --et12-card-width:min(76vw,300px);
    --et12-card-image-h:220px;
    --et12-comic-image-h:360px;
    --et12-corral-image-h:126px;
    --et12-voice-image-h:260px;
  }

  .et12-news-track,
  .et12-comic-track{
    display:grid!important;
    grid-template-columns:none!important;
    grid-template-rows:1fr!important;
    grid-auto-flow:column!important;
    grid-auto-columns:var(--et12-card-width)!important;
    gap:var(--et12-gap)!important;
    align-items:stretch!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:inline mandatory!important;
    overscroll-behavior-inline:contain!important;
    -webkit-overflow-scrolling:touch!important;
    padding:0 14px 12px 0!important;
    margin:0 -14px 0 0!important;
    scrollbar-width:none!important;
  }
  .et12-news-track::-webkit-scrollbar,
  .et12-comic-track::-webkit-scrollbar{display:none!important}
  .et12-card{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    padding:0!important;
    border-right:0!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
  }
  .et12-news-card{
    grid-template-rows:var(--et12-card-image-h) 34px 78px 22px!important;
  }
  .et12-news-card>a{
    height:var(--et12-card-image-h)!important;
    min-height:var(--et12-card-image-h)!important;
    max-height:var(--et12-card-image-h)!important;
  }
  .et12-news-card h3{font-size:20px!important}

  .et12-corral-track{
    grid-auto-columns:min(82vw,340px)!important;
  }
  .et12-corral-track .et12-news-card{
    grid-template-rows:var(--et12-corral-image-h) 34px 56px 22px!important;
  }
  .et12-corral-track .et12-news-card>a{
    height:var(--et12-corral-image-h)!important;
    min-height:var(--et12-corral-image-h)!important;
    max-height:var(--et12-corral-image-h)!important;
  }

  .et12-comic-track{
    grid-auto-columns:min(64vw,270px)!important;
  }
  .et12-comic-card{
    grid-template-rows:var(--et12-comic-image-h) 34px 50px!important;
  }
  .et12-comic-card>a{
    height:var(--et12-comic-image-h)!important;
    min-height:var(--et12-comic-image-h)!important;
    max-height:var(--et12-comic-image-h)!important;
  }

  .et12-voices-track{
    display:grid!important;
    grid-template-columns:none!important;
    grid-template-rows:1fr!important;
    grid-auto-flow:column!important;
    grid-auto-columns:min(66vw,270px)!important;
    gap:14px!important;
    padding:0 14px 12px 0!important;
    margin:0 -14px 0 0!important;
    scrollbar-width:none!important;
  }
  .et12-voices-track::-webkit-scrollbar{display:none!important}
  .et12-voice-card{
    display:grid!important;
    grid-template-rows:var(--et12-voice-image-h) 48px 48px!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    padding:0!important;
    border-right:0!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
  }

  .et12-event-row{
    grid-template-columns:minmax(0,1fr) 42%!important;
    gap:13px!important;
    min-height:198px!important;
    height:198px!important;
    padding:14px 0!important;
  }
  .et12-event-copy{
    grid-template-rows:24px 48px 54px 22px!important;
    padding:0!important;
  }
  .et12-event-copy h3{
    max-height:48px!important;
    font-size:21px!important;
    line-height:1.05!important;
  }
  .et12-event-copy>p:not(.eyebrow):not(.v9-event-meta){
    max-height:54px!important;
    font-size:13px!important;
    line-height:1.35!important;
  }
  .et12-event-image{
    height:170px!important;
    min-height:170px!important;
    max-height:170px!important;
  }

  .et12-archive-grid,
  .et12-feature-side{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .et12-archive-grid>article,
  .et12-feature-side>article{
    grid-template-rows:220px 32px 58px 64px 22px!important;
  }
  .et12-archive-grid>article>a,
  .et12-feature-side>article>a{
    height:220px!important;
    min-height:220px!important;
    max-height:220px!important;
  }
}

@media (max-width:430px){
  :root{--et12-card-width:80vw}
  .et12-event-row{grid-template-columns:minmax(0,1fr) 39%!important}
}