/*
  Organizer page (/business). Loads after launch-base.css and launch-cinema.css
  and adds only what that page has on top of the home page: the four-field
  organizer form, the correction block and the current-page header link.
*/

/* ------------------------------------------------------------------ header */

.header-link[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 6px; }
.site-footer nav a[aria-current="page"] { color: var(--ink); }

/* ------------------------------------------------------------------ layout */

.correction { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------------------------------------------------------- organizer form */
/* Stacked on phones; two by two where the hero column is wide enough, with the
   button under the fields. */

.organizer-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.organizer-fields .field { min-width: 0; }
.field > label .optional { color: var(--faint); font-weight: 400; }
.organizer-form input[type="url"] { width: 100%; min-height: 50px; padding: 0 16px; border: 1px solid var(--border); border-radius: 10px; background: rgba(23, 27, 37, .92); color: var(--ink); font-size: 1rem; }
.organizer-form input[type="url"]:hover { border-color: rgba(255, 255, 255, .26); }
.organizer-form input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.organizer-form .button { align-self: stretch; }

@container (min-width: 460px) {
  .organizer-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .organizer-form .button { align-self: flex-start; }
}

.cta-request .confirmation-heading strong { color: var(--ink); font-weight: 600; }

/* -------------------------------------------------------------- correction */

.correction h2 { color: var(--ink); font-size: 1.25rem; letter-spacing: -0.025em; }
.correction p { max-width: 60ch; margin-top: 6px; color: var(--text); }
.correction a { display: inline-block; min-height: 44px; padding: 12px 2px; margin: -12px -2px; }

/* ------------------------------------------------------------------- hero */
/* One capture on this page: C1 alone, no peek behind it. */

@media (min-width: 768px) {
  .hero-visual { width: 360px; padding-left: 0; }
}

@media (min-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr) 420px; }
  .correction { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  .correction h2 { grid-column: 1; }
  .correction p { grid-column: 2; grid-row: 1; margin-top: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .correction { animation: cinema-reveal linear both; animation-timeline: view(); animation-range: entry 5% entry 65%; }
  }
}

/* ------------------------------------------------------------- back link */
/* The same "← Back to Locol" link and rule that support.html has (styles.css .legal-related),
   set in this page's column. */

.legal-related { display: flex; flex-wrap: wrap; gap: 12px 18px; width: 100%; max-width: var(--max); margin: 36px auto 0; padding: 24px var(--gutter) 0; }
.legal-related a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }