/* ==========================================================================
   Maqueta · Ilustre Municipalidad de Pica
   posters.css — láminas de "Actividades de la semana" (partials/home/poster.php).
   Las cargan la portada y el panel (listado y vista previa), por eso no
   dependen de las variables de main.css: cada color trae sus propios tonos.

   Todo se mide con cqi para escalar como una imagen: el contenedor necesita
   container-type: inline-size (.deck__screen en la portada, .poster-frame aquí).
   ========================================================================== */

.poster-frame {
  container-type: inline-size;
}

.poster-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.poster-link:focus-visible {
  outline: 3px solid #f9dc67;
  outline-offset: -3px;
}

/* --------------------------------------------------------------------------
   1. Colores (ActivitySlideRepository::THEMES)
   -------------------------------------------------------------------------- */
.poster.poster--theme-ocean {
  --poster-bg:
    radial-gradient(70% 60% at 100% 0%, rgba(41, 191, 203, .35), transparent 70%),
    linear-gradient(160deg, #1e94b3 0%, #133b69 100%);
  --poster-solid: #164677;
}

.poster.poster--theme-navy {
  --poster-bg:
    radial-gradient(60% 50% at 100% 0%, rgba(247, 209, 56, .16), transparent 70%),
    linear-gradient(160deg, #164677 0%, #082142 100%);
  --poster-solid: #0d2d54;
}

.poster.poster--theme-green {
  --poster-bg:
    radial-gradient(70% 60% at 100% 0%, rgba(247, 209, 56, .18), transparent 70%),
    linear-gradient(160deg, #3fb488 0%, #1d7a6a 45%, #0f4d4a 100%);
  --poster-solid: #145e57;
}

/* Colores claros: texto azul marino */
.poster.poster--theme-gold,
.poster.poster--theme-coral {
  --poster-ink: #082142;
  --poster-soft: #133b69;
  --poster-accent: #164677;
  --poster-strong: #082142;
  --poster-chip-bg: #082142;
  --poster-chip-ink: #f9dc67;
  --poster-card: rgba(255, 255, 255, .45);
  --poster-pill: rgba(255, 255, 255, .45);
  --poster-rule: #133b69;
  --poster-icon: #133b69;
}

.poster.poster--theme-gold {
  --poster-bg: linear-gradient(150deg, #f9dc67 0%, #f7d138 55%, #e5a81a 100%);
  --poster-solid: #f7d138;
}

.poster.poster--theme-coral {
  --poster-bg: linear-gradient(150deg, #ffc48a 0%, #f7a08a 50%, #f2849a 100%);
  --poster-solid: #f7a08a;
}

/* --------------------------------------------------------------------------
   2. Base de la lámina
   -------------------------------------------------------------------------- */
.poster {
  /* Tonos por omisión (colores oscuros) */
  --poster-ink: #fff;
  --poster-soft: #c9d6e8;
  --poster-accent: #fbe79a;
  --poster-strong: #fbe79a;
  --poster-chip-bg: #f7d138;
  --poster-chip-ink: #082142;
  --poster-card: rgba(255, 255, 255, .1);
  --poster-pill: rgba(8, 33, 66, .4);
  --poster-rule: #8fdde5;
  --poster-icon: #133b69;

  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  aspect-ratio: 5 / 4;
  padding: 6cqi 6.5cqi;
  overflow: hidden;
  background: var(--poster-bg, #133b69);
  color: var(--poster-ink);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 2.55cqi;
  line-height: 1.35;
  text-align: left;
}

.poster > * {
  margin: 0;
}

/* Imagen de fondo (opcional en agenda, aviso y talleres): queda velada con el color elegido */
.poster__backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.poster.has-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--poster-bg);
  opacity: .84;
}

.poster__eyebrow {
  margin-bottom: .6em;
  color: var(--poster-accent);
  font-size: 1.05em;
  font-weight: 600;
  letter-spacing: .04em;
}

.poster__title {
  margin-bottom: .45em;
  color: var(--poster-ink);
  font-family: "Fira Sans Condensed", "Arial Narrow", sans-serif;
  font-size: 2.7em;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.poster__empty {
  padding: 1em 1.2em;
  border: .15em dashed var(--poster-rule);
  border-radius: .6em;
  color: var(--poster-soft);
  font-size: 1.05em;
}

/* --------------------------------------------------------------------------
   3. Afiche en imagen
   -------------------------------------------------------------------------- */
.poster--poster {
  padding: 0;
  background: var(--poster-solid, #133b69);
}

.poster__image,
.poster__blur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.poster__image--cover {
  object-fit: cover;
}

.poster__image--contain {
  object-fit: contain;
}

/* Copia desenfocada que rellena los costados de un afiche vertical o cuadrado */
.poster__blur {
  object-fit: cover;
  filter: blur(18px) brightness(.75) saturate(1.1);
  transform: scale(1.15);
}

.poster__placeholder {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4em;
  padding: 2em;
  color: var(--poster-soft);
  font-size: 1.3em;
  text-align: center;
}

.poster__placeholder i {
  font-size: 3em;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   4. Agenda de la semana
   -------------------------------------------------------------------------- */
.poster__agenda {
  display: grid;
  gap: .65em;
  padding: 0;
  list-style: none;
}

.poster__agenda li {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: .5em .8em;
  border-radius: .6em;
  background: var(--poster-card);
  color: var(--poster-soft);
  font-size: .95em;
}

.poster__agenda strong {
  display: block;
  color: var(--poster-ink);
  font-size: 1.15em;
  font-weight: 600;
}

.poster__day {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3.4em;
  height: 3.4em;
  border-radius: .5em;
  background: var(--poster-chip-bg);
  color: var(--poster-chip-ink);
  font-size: 1.1em;
  font-weight: 800;
  line-height: 1;
}

.poster__day small {
  font-size: .55em;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.poster__more {
  margin-top: auto;
  padding-top: .6em;
  color: var(--poster-accent);
  font-size: .95em;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. Aviso
   -------------------------------------------------------------------------- */
.poster--notice {
  align-items: center;
  text-align: center;
}

.poster--notice .poster__title {
  font-size: 2.3em;
}

.poster--notice .poster__title i {
  color: var(--poster-strong);
  font-size: .8em;
  vertical-align: .05em;
}

.poster__question {
  margin-bottom: .9em;
  padding: .35em 1.1em;
  border-radius: 999px;
  background: var(--poster-pill);
}

.poster__list {
  display: grid;
  gap: .5em;
  margin-bottom: .9em;
  padding: 0;
  list-style: none;
}

.poster__list li {
  color: var(--poster-strong);
  font-size: 1.12em;
  font-weight: 600;
}

.poster__list li + li::before {
  content: "";
  display: block;
  width: 2.4em;
  height: .2em;
  margin: 0 auto .5em;
  border-radius: 1em;
  background: var(--poster-rule);
}

.poster__label {
  margin-bottom: .35em;
  font-size: 1.05em;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.poster__phone {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-bottom: .7em;
  padding: .3em 1.2em .3em .3em;
  border-radius: 999px;
  background: var(--poster-chip-bg);
  color: var(--poster-chip-ink);
  font-size: 1.85em;
  font-weight: 800;
  line-height: 1.1;
}

.poster__phone i {
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--poster-chip-ink);
  color: var(--poster-chip-bg);
  font-size: .7em;
}

.poster__note {
  margin-top: auto;
  color: var(--poster-soft);
  font-size: .82em;
}

/* --------------------------------------------------------------------------
   6. Talleres u oferta (recuadros con ícono)
   -------------------------------------------------------------------------- */
.poster__grid {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(3, 1fr);
  gap: .8em;
  margin-bottom: 1em;
  padding: 0;
  list-style: none;
}

.poster__grid--1 { grid-template-columns: 1fr; }
.poster__grid--2,
.poster__grid--4 { grid-template-columns: repeat(2, 1fr); }

.poster__grid li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4em;
  padding: .8em .4em;
  border-radius: .7em;
  background: var(--poster-card);
  font-size: 1.05em;
  font-weight: 600;
  text-align: center;
}

.poster__grid i {
  color: var(--poster-strong);
  font-size: 2.2em;
  line-height: 1;
}

.poster.poster--theme-gold .poster__grid i,
.poster.poster--theme-coral .poster__grid i {
  color: var(--poster-icon);
}

.poster--grid .poster__note {
  color: var(--poster-soft);
  font-weight: 500;
}