/**
 * Anuncis emergents.
 *
 * Aquest full viu al mòdul i no al SCSS de tbll_bt a propòsit: el web té cinc
 * temes i un anunci pot sortir en pàgines pintades per qualsevol d'ells. Per
 * això aquí no es fa servir cap variable ni cap mixin del tema, i tot va escrit
 * amb valors literals.
 */

/* --- Fons enfosquit ------------------------------------------------------- */

.tbll-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 1090; /* per sobre de la capçalera enganxosa i del menú de mòbil */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Prou coixí perquè el botó de tancar, que surt 12px per fora de la finestra,
     no toqui la vora: aquesta capa es desplaça verticalment i això fa que el
     navegador també retalli pels costats. */
  padding: 1.5rem;
  background-color: rgba(0, 0, 0, 0.55);
  overflow-y: auto;
}

.tbll-popup-overlay[hidden] {
  display: none;
}

/* --- La finestra ---------------------------------------------------------- */

.tbll-popup {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 30rem;
  margin: auto;
  border-radius: 6px;
  /* Visible perquè el botó de tancar pugui sortir per fora i mossegar
     l'angle. Qui retalla la imatge a les cantonades és .tbll-popup__media. */
  overflow: visible;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  /**
   * El color del text no es tria: es dedueix del fons perquè l'editor no pugui
   * fer una combinació il·legible. Els set fons clars de la paleta porten text
   * fosc i només el blau fosc porta text blanc; comprovat que tots passen el
   * contrast 4.5:1 que demana l'AA.
   */
  color: #1a1a1a;
  background-color: #fff;
}

/* El contenidor rep el focus en obrir-se, però no és un control: no ha de
   dibuixar cap anell. Els controls de dins sí que en tenen. */
.tbll-popup:focus {
  outline: none;
}

/* En mòbil i en vertical la imatge va a dalt, o sigui que arrodoneix les dues
   cantonades de dalt. Les variants horitzontals ho reajusten més avall. */
.tbll-popup__media {
  flex: 0 0 auto;
  line-height: 0;
  overflow: hidden;
  border-radius: 6px 6px 0 0;
}

.tbll-popup__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tbll-popup__content {
  flex: 1 1 auto;
  padding: 1.75rem;
}

.tbll-popup__heading {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
  line-height: 1.2;
  color: inherit;
}

.tbll-popup__body {
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

.tbll-popup__body > *:last-child {
  margin-bottom: 0;
}

.tbll-popup__body a {
  color: inherit;
  text-decoration: underline;
}

/* --- Botó de tancar ------------------------------------------------------- */

/**
 * 44 píxels és la mida mínima recomanada per poder-lo encertar amb el dit.
 *
 * Va mossegant l'angle, mig a fora i mig a dins: a dins del tot es plantava
 * sobre el text o sobre la imatge segons la disposició. Així queda sempre al
 * mateix lloc i no tapa mai res. L'ombra el separa del que hi hagi a sota,
 * sigui una foto o un fons de color.
 */
.tbll-popup__close {
  position: absolute;
  top: -0.75rem;
  right: -0.75rem;
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  color: #1a1a1a;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

.tbll-popup__close:hover,
.tbll-popup__close:focus {
  background-color: #fff;
}

.tbll-popup__close:focus-visible {
  outline: 3px solid #396c91;
  outline-offset: 2px;
}

/* --- Botó d'acció --------------------------------------------------------- */

/* El border i el box-shadow a zero són defensius: el botó ha de sortir igual
   amb qualsevol dels cinc temes del web, i algun d'ells decora els enllaços. */
.tbll-popup__button {
  display: inline-block;
  /* A les variants horitzontals el contingut és un flex en columna, i allà els
     fills s'estiren a tota l'amplada per defecte: sense això el botó sortiria
     tan ample com la finestra. També cal el margin-right auto per si un dia el
     contenidor passa a ser flex en fila. */
  align-self: flex-start;
  margin-right: auto;
  padding: 0.65rem 1.5rem;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  background-color: #1a1a1a;
  background-image: none;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.tbll-popup__button:hover,
.tbll-popup__button:focus {
  background-color: #000;
  color: #fff;
  text-decoration: none;
}

.tbll-popup__button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* --- Paleta --------------------------------------------------------------- */

/**
 * La regla és senzilla i es llegeix al nom: els fons "light-*" i el blanc
 * porten text fosc, i els "dark-*" porten text blanc.
 *
 * Tots vuit són exactament els mateixos hexadecimals que les classes
 * background-color-* dels paràgrafs, definides a paragraphs.scss: són els
 * colors de marca i no es toquen. Si algun dia se'n canvia un allà, s'ha de
 * canviar aquí també.
 *
 * Nota de contrast: sobre el taronja i el magenta de marca, el text blanc es
 * queda per sota del 4,5:1 que demana el nivell AA (2,5:1 i 3,5:1). És una
 * decisió presa a consciència, prioritzant la fidelitat als colors de marca.
 * Amb text fosc aquests dos fons sí que passarien el llindar, però es llegeix
 * pitjor del que el número indica: el càlcul de les WCAG 2 només mira la
 * lluminositat i ignora la saturació, i en magentes i taronges saturats això
 * es nota. Els altres sis fons van sobrats.
 */

/* Fons clars: text fosc. */

.tbll-popup--white {
  background-color: #fff;
}

.tbll-popup--light-gray {
  background-color: #f1f1f1;
}

.tbll-popup--light-orange {
  background-color: #fdf3dd;
}

.tbll-popup--light-magenta {
  background-color: #ffd9dd;
}

/* Blau mitjà, prou apagat perquè el text fosc s'hi llegeixi bé: 6,2:1. */
.tbll-popup--light-blue {
  background-color: #61a0ce;
}

/* Fons foscos: text blanc i botó invertit. */

.tbll-popup--dark-orange,
.tbll-popup--dark-magenta,
.tbll-popup--dark-blue {
  color: #fff;
}

.tbll-popup--dark-orange .tbll-popup__button,
.tbll-popup--dark-magenta .tbll-popup__button,
.tbll-popup--dark-blue .tbll-popup__button {
  background-color: #fff;
  color: #1a1a1a;
}

.tbll-popup--dark-orange .tbll-popup__button:hover,
.tbll-popup--dark-orange .tbll-popup__button:focus,
.tbll-popup--dark-magenta .tbll-popup__button:hover,
.tbll-popup--dark-magenta .tbll-popup__button:focus,
.tbll-popup--dark-blue .tbll-popup__button:hover,
.tbll-popup--dark-blue .tbll-popup__button:focus {
  background-color: #f1f1f1;
  color: #1a1a1a;
}

.tbll-popup--dark-orange .tbll-popup__button:focus-visible,
.tbll-popup--dark-magenta .tbll-popup__button:focus-visible,
.tbll-popup--dark-blue .tbll-popup__button:focus-visible {
  outline-color: #fff;
}

.tbll-popup--dark-orange {
  background-color: #ed8b00;
}

.tbll-popup--dark-magenta {
  background-color: #f8485e;
}

.tbll-popup--dark-blue {
  background-color: #396c91;
}

/* --- Variants ------------------------------------------------------------- */

/**
 * En mòbil no hi ha variants: totes s'apilen amb la imatge a sobre. Una imatge
 * al costat del text en una pantalla estreta deixa les dues coses il·legibles.
 * Les diferències només s'apliquen de tauleta amunt.
 */
@media (min-width: 768px) {

  .tbll-popup--vertical {
    max-width: 30rem;
  }

  .tbll-popup--vertical .tbll-popup__media img {
    max-height: 15rem;
  }

  .tbll-popup--horitzontal-dreta,
  .tbll-popup--horitzontal-esquerra {
    flex-direction: row;
    align-items: stretch;
    max-width: 46rem;
  }

  /* La imatge va a la dreta invertint l'ordre, no reordenant el marcatge: amb
     un lector de pantalla i amb el teclat l'ordre segueix sent el del codi. */
  .tbll-popup--horitzontal-dreta {
    flex-direction: row-reverse;
  }

  .tbll-popup--horitzontal-dreta .tbll-popup__media,
  .tbll-popup--horitzontal-esquerra .tbll-popup__media {
    flex: 0 0 45%;
    max-width: 45%;
  }

  /* Aquí la imatge ja no és a dalt sinó a un costat, i les cantonades que ha
     d'arrodonir són les d'aquell costat. */
  .tbll-popup--horitzontal-esquerra .tbll-popup__media {
    border-radius: 6px 0 0 6px;
  }

  .tbll-popup--horitzontal-dreta .tbll-popup__media {
    border-radius: 0 6px 6px 0;
  }

  .tbll-popup--horitzontal-dreta .tbll-popup__content,
  .tbll-popup--horitzontal-esquerra .tbll-popup__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.25rem;
  }

}

/* --- Animació ------------------------------------------------------------- */

.tbll-popup-overlay {
  animation: tbll-popup-fade 0.25s ease-out;
}

.tbll-popup {
  animation: tbll-popup-rise 0.25s ease-out;
}

@keyframes tbll-popup-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes tbll-popup-rise {
  from { transform: translateY(1.5rem); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Qui hagi demanat al sistema que no vol animacions, no en té. */
@media (prefers-reduced-motion: reduce) {
  .tbll-popup-overlay,
  .tbll-popup {
    animation: none;
  }
}