/* Avisos · touradasacorda.com — the e-mail sign-up: an alert when a tourada goes live, and (a separate, unticked
   choice) shop offers and news of special events. Two shapes: the full panel for the Em direto section and a
   compact one for the footer. Hidden until /api/subscribe says it is ready (avisos.js).
   Flat like the rest of the wall: square, no gradients, no shadows, no hairlines, no pills. Type only on the
   hub's steps (--t-small 18, --t-body 20, --t-lead 24, --t-h2 44); the input is 60px so it is easy to hit. */

.avisos { background: var(--paper, #F8F9FB); color: var(--ink, #10285C); }
.avisos[hidden] { display: none !important; }
.avisos *, .av-obrigado * { box-sizing: border-box; }
.avisos [hidden] { display: none !important; }

/* ---- the full panel: it sits on the navy Em direto wall like the channels panel does ---- */
.avisos--cheio {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 24px clamp(32px, 4vw, 64px); align-items: start; padding: 28px;
}
.live-in > .avisos { grid-column: 1 / -1; }
.av-txt { display: grid; gap: 14px; align-content: start; }
.av-txt .sub { margin: 0; }
.av-lead { margin: 0; font-size: var(--t-lead, 24px); line-height: 1.4; max-width: 30ch; }
.av-freq { margin: 0; font-size: var(--t-small, 18px); line-height: 1.5; color: var(--muted, #3D4966); max-width: 44ch; }

/* ---- the compact one, on the footer's white tiles ---- */
.avisos--compacto { display: grid; gap: 14px; padding: 24px; width: min(100%, 640px); margin-top: 8px; }
.avisos--compacto .sub { margin: 0; }
.avisos--compacto .av-lead { font-size: var(--t-body, 20px); max-width: 44ch; }

/* ---- the form ---- */
.av-form { display: grid; gap: 16px; align-content: start; min-width: 0; }
.av-field { display: grid; gap: 8px; }
.av-lab { font-size: var(--t-small, 18px); font-weight: 600; }
.av-in {
  width: 100%; min-height: 60px; padding: 0 18px; border: 0; border-radius: 0; appearance: none;
  font: 400 var(--t-body, 20px)/1.2 var(--f, Georgia, serif); color: var(--ink, #10285C); background: var(--tone, #D9E1EF);
}
.av-in::placeholder { color: var(--muted, #3D4966); opacity: 1; }
.av-in[aria-invalid="true"] { outline: 3px solid var(--red, #B3261E); outline-offset: 0; }

/* the optional choice: its own box, unticked, with a tap area as tall as the input */
.av-check { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; min-height: 56px; padding: 10px 0; cursor: pointer; }
.av-check input { width: 30px; height: 30px; margin: 2px 0 0; accent-color: var(--ink, #10285C); cursor: pointer; }
.av-check-t { display: block; font-size: var(--t-body, 20px); line-height: 1.4; }
.av-check-n { display: block; margin-top: 2px; font-size: var(--t-small, 18px); color: var(--muted, #3D4966); }

.av-consent { margin: 0; font-size: var(--t-small, 18px); line-height: 1.5; color: var(--muted, #3D4966); max-width: 60ch; }
.av-consent a { color: var(--cobalt, #1C4597); font-weight: 600; text-underline-offset: 4px; padding: 10px 0; }
@media (hover: hover) and (pointer: fine) { .av-consent a:hover { color: var(--ink, #10285C); } }

.av-go { justify-self: start; min-width: 240px; }
.av-go[disabled] { opacity: .7; cursor: progress; transform: none; }

/* the honeypot: out of sight and out of the tab order, but present for any script that fills every field */
.av-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* what the visitor is told */
.av-live { min-width: 0; }
.av-msg { margin: 0; font-size: var(--t-body, 20px); line-height: 1.4; font-weight: 600; }
.av-msg.err { color: var(--red, #B3261E); }
.av-ok { background: var(--tone, #D9E1EF); padding: 22px 24px; display: grid; gap: 8px; }
.av-ok p { margin: 0; }
.av-ok-t { font-size: var(--t-lead, 24px); font-weight: 600; line-height: 1.35; }
.av-ok-n { font-size: var(--t-small, 18px); color: var(--muted, #3D4966); }
.av-form[hidden] { display: none !important; }

/* the note that greets someone back from the confirmation e-mail (added by avisos.js at the top of <main>) */
.av-obrigado { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px var(--m, 24px); background: var(--ink, #10285C); color: var(--paper, #F8F9FB); }
.av-obrigado p { margin: 0; font-size: var(--t-body, 20px); line-height: 1.4; font-weight: 600; }
.av-obrigado button { flex: none; min-height: 52px; padding: 0 22px; border: 0; border-radius: 0; background: var(--paper, #F8F9FB); color: var(--ink, #10285C); font: 600 var(--t-small, 18px)/1 var(--f, Georgia, serif); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .av-obrigado button:hover { background: var(--tone, #D9E1EF); } }
.av-obrigado :focus-visible { outline-color: var(--paper, #F8F9FB); }

@media (max-width: 1080px) {
  .avisos--cheio { grid-template-columns: 1fr; }
  .av-lead, .av-freq { max-width: 52ch; }
}
@media (max-width: 760px) {
  .avisos--cheio { padding: 22px 18px; gap: 20px; }
  .avisos--compacto { padding: 20px 18px; }
  .av-go { width: 100%; min-width: 0; }
  .av-obrigado { align-items: flex-start; flex-direction: column; }
}

/* one tile beside the form: a sealed letter with a festa rocket, two courses square */
.av-azulejo { display: block; width: calc(var(--step, 87px) * 2); max-width: 200px; height: auto; }