/*
 * ════════════════════════════════════════════════════════════
 *  Galerie visite — ART AU FÉMININ
 *  Chargé par : galerie/visite.html.erb
 *  The intro card and the merci overlay live in layouts/gallery.css.
 * ════════════════════════════════════════════════════════════
 */

/* Colonne newsletter plus large que le panneau audioguide de galerie#show */
.hero-content { grid-template-columns: 1fr 1fr; }

.hero-right {
  border-left: 1px solid var(--border);
  padding: 2.4rem 2.4rem 2.4rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4rem;
}

.annonce-desc {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  color: var(--muted-foreground);
  line-height: 1.7;
  font-style: italic;
  margin: 0;
}

.annonce-date {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin: 0;
}

/* Email capture in the intro card */

.annonce-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.annonce-form-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.annonce-form-row {
  display: flex;
  gap: 0.5rem;
}

.annonce-form-email {
  flex: 1;
  background: var(--muted);
  border: 0.5px solid var(--input);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.9rem;
  color: var(--foreground);
  font: 0.82rem var(--font-serif);
  outline: none;
  transition: border-color 200ms;
}

.annonce-form-email:focus { border-color: var(--input); }

.annonce-form-email::placeholder { color: var(--muted-foreground); }

.annonce-form-confirm {
  font: italic 0.82rem var(--font-serif);
  color: var(--accent);
  display: none;
}

@media (max-width: 900px) {
    .hero-content { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .hero-right { border-left: none; border-top: 1px solid var(--border); }
}