/* ============================================================================
   content.css — what the content pages add to site.css: clases muestra (.cm-*),
   seminarios (.smn-*) and contacto (.ct-*). Loaded by those templates through
   {% block head_extra %}.
   ========================================================================== */

/* a group of lines under one small heading ("Próximos", "Anteriores") */
.lp .ct-group, .lp .smn-group { margin-bottom: 1.1rem; }
.lp .smn-group:not(:first-child) { margin-top: clamp(3rem, 6vw, 4.5rem); }
/* what closes a list: one quiet line of help */
.lp .ct-help { margin-top: clamp(2rem, 4vw, 3rem); color: var(--muted); font-size: 0.95rem; }

/* ============================================================ CLASES MUESTRA */
.lp .cm-filters { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.lp .cm-card[hidden] { display: none; }
body .lp .cm-card__play { display: flex; flex-direction: column; color: var(--ink); }
.lp .cm-card__play .lp-card__media img { opacity: 0.92; transition: transform 1.2s var(--ease), opacity 0.4s ease; }
.lp .cm-card__play .lp-card__media + .lp-card__title { margin-top: 1rem; }
.lp .cm-card__from { margin-top: 0.6rem; font-size: 0.9rem; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .lp .cm-card__play:hover .lp-card__media img { transform: scale(1.035); opacity: 1; }
  .lp .cm-card__play:hover .lp-player__play { transform: scale(1.06); background: var(--ink); color: #fff; }
}
.lp .cm-card__play:focus-visible { outline-offset: 6px; }

/* the end of the page: where a class leads */
.lp .cm-next { margin-top: clamp(3.5rem, 8vw, 6rem); padding-top: clamp(2.25rem, 5vw, 3.5rem); border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem clamp(1.5rem, 4vw, 3rem); align-items: end; }
.lp .cm-next__act { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1.5rem; }

/* the player: a dialog over the page */
/* The box is as wide as a 16:9 picture can be with all of it still on screen: on a short laptop the video
   shrinks instead of pushing its own title and buttons out of sight. 21rem is what surrounds the picture
   (the box's padding, the bar above, the words and buttons below); 3rem is the padding at its sides. */
.lp .cm-dialog { padding-block: 0.75rem; }
.lp .cm-dialog .lp-dialog__box {
  padding: clamp(1rem, 2.4vw, 1.5rem);
  max-height: calc(100vh - 1.5rem); max-height: calc(100svh - 1.5rem);
  width: min(100%, 980px, max(300px, calc((100vh - 21rem) * 16 / 9 + 3rem)));
  width: min(100%, 980px, max(300px, calc((100svh - 21rem) * 16 / 9 + 3rem)));
}
.lp .cm-dialog__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.lp .cm-dialog__pos { font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.lp .cm-dialog__close { min-width: 44px; min-height: 44px; padding: 0 0.25rem; border: 0; background: none; cursor: pointer; font: 600 0.92rem var(--display); color: var(--ink); }
.lp .cm-dialog__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: var(--ink); }
.lp .cm-dialog__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lp .cm-dialog__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem clamp(1.25rem, 3vw, 2.5rem); align-items: start; margin-top: 1.1rem; }
.lp .cm-dialog__title { margin-top: 0.4rem; font: 600 clamp(1.15rem, 2vw, 1.45rem)/1.2 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.lp .cm-dialog__desc { margin-top: 0.45rem; max-width: 64ch; color: var(--muted); font-size: 0.95rem; }
.lp .cm-dialog__from { margin-top: 0.75rem; font-size: 0.95rem; }
.lp .cm-dialog__nav { display: flex; gap: 0.5rem; }
.lp .cm-dialog__nav .lp-btn { min-height: 44px; }

/* ============================================================ SEMINARIOS */
/* a line of the list opens with its date, the way a programme of events does */
body .lp .smn-row { grid-template-columns: 4.4rem minmax(0, 1fr); align-items: start; }
.lp .smn-date { display: grid; gap: 0.35rem; justify-items: start; padding-top: 0.15rem; }
.lp .smn-date b { font: 600 2rem/0.9 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.lp .smn-date span { font: 500 0.66rem/1.3 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.lp .smn-row--past .smn-date b, .lp .smn-row--past .lp-row__title { color: var(--muted); }
.lp .smn-row .lp-row__title { margin-top: 0.35rem; }

/* on air: the words, and a dot that breathes */
.lp .smn-live { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ink); }
.lp .smn-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); animation: smn-breathe 1.8s ease-in-out infinite; }
@keyframes smn-breathe { 50% { opacity: 0.25; } }

/* the ticket: when it is, how long is left, and the one action */
.lp .smn-ticket { scroll-margin-top: calc(var(--bar) + 1.25rem); }
.lp .smn-ticket__date { margin-top: 0.7rem; font: 600 clamp(1.4rem, 2.2vw, 1.7rem)/1.12 var(--display); letter-spacing: -0.025em; text-wrap: balance; }
.lp .smn-ticket__time { margin-top: 0.4rem; font-size: 0.92rem; color: var(--muted); }
.lp .smn-count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1.2rem; padding-block: 1rem; border-block: 1px solid var(--line); }
.lp .smn-count > div { display: grid; gap: 0.25rem; }
.lp .smn-count b { font: 600 1.45rem/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.lp .smn-count span { font: 500 0.62rem var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.lp .smn-state { margin-top: 1.25rem; }
.lp .smn-state > * + * { margin-top: 0.75rem; }
.lp .smn-state__title { font: 600 1.15rem/1.25 var(--display); letter-spacing: -0.015em; }
.lp .smn-state .lp-buy__note { margin-top: 0.75rem; }
.lp .smn-alert { margin-top: 0.9rem; }
.lp .smn-code { display: grid; gap: 0.6rem; padding: 1rem; border-radius: var(--radius); background: var(--tint); }
.lp .smn-code__value { font: 600 1.3rem/1.1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.lp .smn-code__until { font-size: 0.84rem; color: var(--muted); }
.lp .smn-agenda { counter-reset: smn-item; border-top: 1px solid var(--line); }
.lp .smn-agenda li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: baseline; padding: 0.85rem 0; border-bottom: 1px solid var(--line); font-size: 0.98rem; }
.lp .smn-agenda li::before { content: counter(smn-item, decimal-leading-zero); counter-increment: smn-item; font: 500 0.72rem var(--display); letter-spacing: 0.1em; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ============================================================ CONTACTO */
.lp .ct-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1.5rem; margin-top: clamp(1.4rem, 3vw, 2rem); }
.lp .ct-quick .fa-whatsapp { font-size: 1.05em; }
.lp .ct-channels { border-top: 1px solid var(--line); }
.lp .ct-channels > div { display: grid; gap: 0.3rem; padding: 0.95rem 0; border-bottom: 1px solid var(--line); }
.lp .ct-channels dt { font: 500 0.66rem/1.4 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.lp .ct-channels dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; font-size: 0.98rem; overflow-wrap: anywhere; }
.lp .ct-channels .lp-link { font-size: 0.98rem; }
.lp .ct-copy { font-size: 0.84rem; }
/* site.css marks an invalid input and select; the message is a textarea */
.lp .lp-field.is-error .lp-textarea, .lp .lp-textarea[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.lp .ct-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.lp .ct-status { margin-top: 0.25rem; }
.lp .ct-status[hidden] { display: none; }
.lp .ct-status .lp-link { font-size: inherit; }

@media (max-width: 991.98px) {
  /* the ticket follows the top of the page at once, with its own button */
  .lp .smn-top-cta { display: none; }
}

@media (max-width: 700px) {
  /* the date stays beside its line; only the far end drops below */
  body .lp .smn-row { grid-template-columns: 3.3rem minmax(0, 1fr); gap: 0.4rem 1rem; }
  .lp .smn-date b { font-size: 1.6rem; }
  .lp .cm-next { grid-template-columns: 1fr; align-items: start; }
  .lp .cm-dialog__foot { grid-template-columns: 1fr; }
  .lp .cm-dialog__nav .lp-btn { flex: 1 1 0; }
}

@media (max-width: 560px) {
  .lp .cm-next__act .lp-btn, .lp .ct-quick .lp-btn, .lp .ct-form__foot .lp-btn { width: 100%; }
  .lp .smn-count b { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lp .smn-live::before { animation: none; }
  .lp .cm-card__play .lp-card__media img { transition: none; }
}