/**
 * Destacat temporal: banner, targeta i franja.
 *
 * Els tres comparteixen tipografia, colors i botó; l'únic que canvia és quant
 * espai ocupen a la portada i com de fort criden.
 */

.destacat-temporal .dt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-sans, sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgb(var(--brand-accent));
  margin: 0 0 0.75rem;
}

.destacat-temporal .dt-filet {
  display: block;
  width: 2.5rem;
  height: 2px;
  background: rgb(var(--brand-accent));
}

.destacat-temporal .dt-titol {
  font-family: var(--font-heading, sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.03;
  letter-spacing: 0.01em;
  margin: 0;
}

.destacat-temporal .dt-intro {
  font-family: var(--font-sans, sans-serif);
  line-height: 1.65;
  margin: 1rem 0 0;
}

.destacat-temporal .dt-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.75rem;
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius-pill, 2px);
  background: rgb(var(--brand-accent));
  color: rgb(var(--on-accent, var(--brand-primary)));
  font-family: var(--font-heading, sans-serif);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  box-shadow: 0 10px 24px -12px rgb(var(--brand-accent) / 0.9);
  transition: filter 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.destacat-temporal .dt-cta:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -14px rgb(var(--brand-accent) / 1);
  color: rgb(var(--on-accent, var(--brand-primary)));
}

.destacat-temporal .dt-cta .material-icons-outlined {
  font-size: 1.125rem;
  transition: transform 0.25s ease;
}

.destacat-temporal .dt-cta:hover .material-icons-outlined {
  transform: translateX(5px);
}

/* ==== Format 1: banner ====
   Foto sencera, text a l'esquerra alineat amb la resta de la portada i un
   degradat que ve de banda, no de baix: així la cara de la foto no queda
   tapada i el text sempre té fons. */
.dt-banner .dt-banner__media {
  position: relative;
  min-height: 30rem;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.dt-banner .dt-banner__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 8s ease-out;
}

.dt-banner:hover .dt-banner__media > img {
  transform: scale(1.08);
}

.dt-banner .dt-banner__vel {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg,
      rgb(var(--brand-primary) / 0.94) 0%,
      rgb(var(--brand-primary) / 0.78) 38%,
      rgb(var(--brand-primary) / 0.25) 68%,
      rgb(var(--brand-primary) / 0.10) 100%),
    linear-gradient(to top, rgb(var(--brand-primary) / 0.45), transparent 45%);
}

.dt-banner .dt-banner__cos {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: 4rem;
}

.dt-banner .dt-banner__caixa {
  max-width: 34rem;
  color: #fff;
}

.dt-banner .dt-titol {
  color: #fff;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  text-shadow: 0 2px 20px rgb(var(--brand-primary) / 0.4);
}

.dt-banner .dt-intro {
  color: rgb(255 255 255 / 0.88);
  font-size: 1.0625rem;
  max-width: 30rem;
}

/* ==== Format 2: targeta ====
   La foto s'enganxa a la vora esquerra i el text va sobre un panell tenyit.
   L'asimetria és el que la treu de semblar una card de llistat. */
.dt-targeta {
  background:
    linear-gradient(to bottom,
      rgb(var(--neutral-bg, 245 247 250)) 0%,
      rgb(var(--neutral-bg, 245 247 250)) 62%,
      transparent 62%);
}

.dt-targeta .dt-targeta {
  position: relative;
  display: grid;
  gap: 0;
  overflow: hidden;
  border-radius: var(--radius-lg, 2px);
  background: #fff;
  box-shadow: 0 30px 60px -38px rgb(var(--brand-primary) / 0.6);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.dt-targeta .dt-targeta:hover {
  transform: translateY(-4px);
  box-shadow: 0 38px 70px -38px rgb(var(--brand-primary) / 0.7);
}

@media (min-width: 64rem) {
  .dt-targeta .dt-targeta {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

.dt-targeta .dt-targeta__media {
  position: relative;
  overflow: hidden;
}

.dt-targeta .dt-targeta__media img {
  width: 100%;
  height: 100%;
  min-height: 19rem;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease;
}

.dt-targeta .dt-targeta:hover .dt-targeta__media img {
  transform: scale(1.05);
}

/* Panell de text: tinta molt suau de marca i una corba a la vora. */
.dt-targeta .dt-targeta__cos {
  position: relative;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(120% 100% at 100% 0%, rgb(var(--brand-accent) / 0.10) 0%, transparent 55%),
    linear-gradient(180deg, #fff 0%, rgb(var(--neutral-bg, 245 247 250)) 100%);
}

@media (min-width: 64rem) {
  .dt-targeta .dt-targeta__cos {
    padding: 3rem 3.25rem;
  }

  /* La foto entra al panell amb una corba, no amb un tall recte. */
  .dt-targeta .dt-targeta__cos::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: -2.5rem;
    width: 2.5rem;
    background: inherit;
    border-start-start-radius: 2.5rem;
    border-end-start-radius: 2.5rem;
  }
}

/* Xip de data: surt del panell i trepitja la foto. */
.dt-targeta .dt-xip {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  margin: 0 0 1.25rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill, 2px);
  background: rgb(var(--brand-primary));
  color: #fff;
  font-family: var(--font-sans, sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  box-shadow: 0 8px 18px -10px rgb(var(--brand-primary) / 0.9);
}

.dt-targeta .dt-xip .material-icons-outlined {
  font-size: 1rem;
  color: rgb(var(--brand-accent));
}

.dt-targeta .dt-titol {
  color: rgb(var(--brand-primary));
  font-size: clamp(1.6rem, 2.6vw, 2.375rem);
}

.dt-targeta .dt-intro {
  color: rgb(var(--neutral-text-muted));
  font-size: 1rem;
  max-width: 34rem;
}

.dt-targeta .dt-cta {
  align-self: flex-start;
  margin-top: 1.75rem;
}

/* ==== Format 3: franja ====
   Avís de cartellera: no ha de competir amb el que hi ha a sobre, però
   tampoc passar desapercebut. */
.dt-franja .dt-franja {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.15rem 1.5rem 1.15rem 2.25rem;
  border-radius: var(--radius-lg, 2px);
  background: #fff;
  border: 1px solid rgb(var(--neutral-border));
  box-shadow: 0 14px 34px -26px rgb(var(--brand-primary) / 0.55);
  overflow: hidden;
  flex-wrap: wrap;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.dt-franja .dt-franja:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px -26px rgb(var(--brand-primary) / 0.65);
}

/* Franja d'accent ratllada, com la cinta d'un cartell. */
.dt-franja .dt-franja::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 10px;
  background: repeating-linear-gradient(
    -45deg,
    rgb(var(--brand-accent)) 0 6px,
    rgb(var(--brand-accent) / 0.55) 6px 12px);
}

.dt-franja .dt-franja__miniatura {
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgb(var(--brand-accent));
  flex-shrink: 0;
}

.dt-franja .dt-franja__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
  min-width: 14rem;
}

.dt-franja .dt-eyebrow {
  margin: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
}

/* Punt que batega mentre el destacat és vigent. */
.dt-franja .dt-pols {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(var(--brand-accent));
  box-shadow: 0 0 0 0 rgb(var(--brand-accent) / 0.7);
  animation: dt-batec 2.4s ease-out infinite;
}

@keyframes dt-batec {
  0% { box-shadow: 0 0 0 0 rgb(var(--brand-accent) / 0.7); }
  70% { box-shadow: 0 0 0 8px rgb(var(--brand-accent) / 0); }
  100% { box-shadow: 0 0 0 0 rgb(var(--brand-accent) / 0); }
}

.dt-franja .dt-titol {
  color: rgb(var(--brand-primary));
  font-size: 1.25rem;
}

.dt-franja .dt-intro {
  color: rgb(var(--neutral-text-muted));
  font-size: 0.9375rem;
  margin: 0.2rem 0 0;
}

/* Línia de punts que separa l'avís de l'acció. */
.dt-franja .dt-franja__separador {
  align-self: stretch;
  width: 1px;
  margin-inline: 0.5rem;
  border-inline-start: 2px dotted rgb(var(--neutral-border));
  flex-shrink: 0;
}

@media (max-width: 48rem) {
  .dt-franja .dt-franja__separador { display: none; }
}

.dt-franja .dt-cta {
  margin-top: 0;
  flex-shrink: 0;
  padding: 0.75rem 1.4rem;
  background: transparent;
  color: rgb(var(--brand-primary));
  border: 2px solid rgb(var(--brand-primary));
  box-shadow: none;
  font-size: 0.8125rem;
}

.dt-franja .dt-cta:hover {
  background: rgb(var(--brand-primary));
  color: #fff;
  filter: none;
  box-shadow: 0 14px 26px -16px rgb(var(--brand-primary) / 0.9);
}