/* =====================================================================
   Tickets (pages/tickets.html). Every rule is scoped to [data-page="tickets"].
   Controls stay flat (site.css). Surfaces use the shared tokens only:
   .page-header (--grad-page-header), .section--alt, and --grad-panel on the
   summary card and the confirmation panel. No hand-rolled gradients.
   ===================================================================== */

/* ---------- Page header: compact on phones (spec 4.3) ---------- */
[data-page="tickets"] .tickets-header{padding-block:24px 20px}
[data-page="tickets"] .tickets-header :is(h1,.h1){margin-top:8px}
[data-page="tickets"] .tickets-header .lede{margin-top:12px}
[data-page="tickets"] .tickets-facts{margin-top:12px}
@media (max-width:767px){
  /* Two lines: "Saturday, January 16, 2027 · Doors 9:00 AM" / the venue */
  [data-page="tickets"] .tickets-facts{display:block;font:500 14px/22px var(--f-label);color:var(--fg-2)}
  [data-page="tickets"] .tickets-facts > div{display:inline}
  [data-page="tickets"] .tickets-facts :is(dt,dd){display:inline;font:inherit;color:inherit;letter-spacing:0;text-transform:none}
  [data-page="tickets"] .tickets-facts > div:nth-child(2){white-space:nowrap}
  [data-page="tickets"] .tickets-facts > div:nth-child(1)::after{content:" \00B7"}
  [data-page="tickets"] .tickets-facts > div:nth-child(3){display:block}
  [data-page="tickets"] .tickets-facts > div:is(:nth-child(1),:nth-child(3)) dt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
}
@media (min-width:768px){
  [data-page="tickets"] .tickets-header{padding-block:48px 40px}
  [data-page="tickets"] .tickets-header .lede{margin-top:16px}
  [data-page="tickets"] .tickets-facts{margin-top:32px;max-width:52rem;grid-template-columns:max-content max-content minmax(0,1fr);column-gap:48px}
}
@media (min-width:1024px){
  [data-page="tickets"] .tickets-header{padding-block:88px 56px}
  [data-page="tickets"] .tickets-header .lede{margin-top:24px}
  [data-page="tickets"] .tickets-facts{margin-top:40px}
}

/* ---------- Section headings on this page (Meritta, a step quieter than the H1) ---------- */
@media (min-width:1024px){
  [data-page="tickets"] .tickets-h2{font-size:40px;line-height:44px}
}
[data-page="tickets"] .tickets-step{display:block}
[data-page="tickets"] .tickets-step + .tickets-h2{margin-top:8px}

/* ---------- Reserve section: one form, the summary beside it on desktop ---------- */
[data-page="tickets"] .tickets-reserve{padding-block:24px 64px}
@media (min-width:768px){[data-page="tickets"] .tickets-reserve{padding-block:48px 96px}}
@media (min-width:1024px){[data-page="tickets"] .tickets-reserve{padding-block:72px 128px}}

[data-page="tickets"] .tickets-form{gap:32px}
@media (min-width:1024px){
  [data-page="tickets"] .tickets-form{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:64px;align-items:start}
  [data-page="tickets"] .tickets-form > *{grid-column:1 / 8}
  [data-page="tickets"] .tickets-form > .tickets-summary{grid-column:8 / 13;grid-row:1 / span 2;margin-left:24px}
  [data-page="tickets"] .tickets-summary > .summary-card__title{font-size:26px;line-height:32px}
}
@media (min-width:1280px){
  [data-page="tickets"] .tickets-form > .tickets-summary{grid-column:9 / 13;margin-left:0}
  [data-page="tickets"] .tickets-summary > .summary-card__title{font-size:30px;line-height:36px}
}

/* Chooser (a fieldset whose legend holds the H2) */
[data-page="tickets"] .tickets-choose{margin:0;padding:0;border:0;min-width:0}
[data-page="tickets"] .tickets-legend{display:block;width:100%;padding:0;margin:0}
[data-page="tickets"] .tickets-choose__meta{margin-top:8px}
[data-page="tickets"] .tickets-options{margin-top:20px}
@media (min-width:1024px){[data-page="tickets"] .tickets-options{margin-top:24px;gap:16px}}

/* Radio cards: name leads, the price sits plainly at the right */
[data-page="tickets"] .tickets-option .radio-card__price{font-size:32px;line-height:36px}
[data-page="tickets"] .tickets-option .radio-card__price small{margin-top:2px}
@media (min-width:1024px){
  [data-page="tickets"] .tickets-option .radio-card__main{padding:24px}
  [data-page="tickets"] .tickets-option .radio-card__price{font-size:36px;line-height:40px}
  [data-page="tickets"] .tickets-option .radio-card__extra{padding:0 24px 24px 58px}
}
@media (max-width:399px){
  [data-page="tickets"] .tickets-option .radio-card__eyebrow{letter-spacing:.08em}
}
[data-page="tickets"] .tickets-option .radio-card__extra{display:grid;gap:12px}
[data-page="tickets"] .stepper .field__error{order:9;flex-basis:100%}

/* At a stepper's limit: the note with Mila Sexton's address and a Copy button */
[data-page="tickets"] .tickets-limit:not([hidden]){display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font:400 15px/22px var(--f-body);color:var(--fg-2)}
[data-page="tickets"] .tickets-limit .copy-value{flex:none;font:600 15px/22px var(--f-body);color:var(--fg)}

/* Organization line inside the table option */
[data-page="tickets"] .tickets-org{padding-top:12px;border-top:1px solid var(--rule);font:400 15px/22px var(--f-body);color:var(--fg-2)}
[data-page="tickets"] .tickets-org .link-arrow{margin-top:2px}

/* ---------- Summary card ("Your reservation") ---------- */
[data-page="tickets"] .tickets-summary{background:var(--grad-panel)}
[data-page="tickets"] .tickets-summary .summary-card__note{margin-top:12px}
[data-page="tickets"] .tickets-reception{font:400 15px/22px var(--f-body);color:var(--fg-2)}
[data-page="tickets"] .tickets-reception .link-arrow{margin-top:4px}

/* ---------- Your details ---------- */
[data-page="tickets"] .tickets-details{display:grid;gap:32px;min-width:0}
[data-page="tickets"] .tickets-step-head .meta{margin-top:12px;max-width:36rem}
[data-page="tickets"] .tickets-call{--copy-label-w:120px;margin-top:16px;border-bottom:1px solid var(--rule)}
/* From 480px only: below it the shared rule puts the buttons on their own line, so the address stays whole */
@media (min-width:480px){[data-page="tickets"] :is(.tickets-call,.tickets-rows) .copy-value{flex-basis:9rem;overflow-wrap:break-word}}
[data-page="tickets"] .tickets-guests textarea{min-height:120px}
[data-page="tickets"] .tickets-details .fieldset > legend{margin-bottom:12px}
/* The ruled fieldset legend fix now lives in site.css (.fieldset--ruled > legend) */
[data-page="tickets"] .tickets-details .fine{margin-top:4px}
[data-page="tickets"] .tickets-details > .error-summary{margin-bottom:0}

/* Confirm the morning: event facts at the point of request */
[data-page="tickets"] .tickets-morning{padding-top:32px;border-top:1px solid var(--rule)}
[data-page="tickets"] .tickets-morning__h{font:500 22px/28px var(--f-serif);color:var(--fg)}
@media (min-width:1024px){[data-page="tickets"] .tickets-morning__h{font-size:26px;line-height:32px}}
[data-page="tickets"] .tickets-morning__list{margin-top:16px;border-top:1px solid var(--rule)}
[data-page="tickets"] .tickets-morning__list > div{display:grid;gap:2px;padding:12px 0;border-bottom:1px solid var(--rule)}
[data-page="tickets"] .tickets-morning__list dt{font:600 13px/18px var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
[data-page="tickets"] .tickets-morning__list dd{font:600 16px/24px var(--f-body);color:var(--fg)}
@media (min-width:600px){
  [data-page="tickets"] .tickets-morning__list > div{grid-template-columns:144px minmax(0,1fr);column-gap:16px;align-items:baseline}
}

/* Submit: the page's one gold button */
[data-page="tickets"] .tickets-submit{display:grid;gap:12px}
[data-page="tickets"] .tickets-submit__sum{font:600 17px/24px var(--f-body);color:var(--fg)}
[data-page="tickets"] .tickets-submit .meta{max-width:34rem}
@media (min-width:1024px){[data-page="tickets"] .tickets-submit__sum{display:none}}

/* Without JavaScript: the request goes by phone or email */
[data-page="tickets"] .tickets-nojs{padding:20px 24px;border:1px solid var(--rule);border-radius:var(--r-card);color:var(--fg-1)}

/* ---------- Confirmation panel (rendered by SiteForms after the form) ---------- */
[data-page="tickets"] .tickets-reserve .confirm{max-width:52rem;background:var(--grad-panel)}

/* ---------- Unable to attend? ---------- */
[data-page="tickets"] .tickets-gift__head .lede{margin-top:16px}
[data-page="tickets"] .tickets-gift__body{display:grid;gap:20px;align-content:start;min-width:0}
[data-page="tickets"] .tickets-gift__body > p{max-width:var(--measure);color:var(--fg-1)}
[data-page="tickets"] .tickets-rows{--copy-label-w:120px;border-bottom:1px solid var(--rule)}
@media (min-width:1024px){
  [data-page="tickets"] .tickets-gift__body{padding-top:8px}
}
/* 1024 to 1279px: the two columns are too narrow for the contact rows, so stack them */
@media (min-width:1024px) and (max-width:1279px){
  [data-page="tickets"] .tickets-gift .split > *{grid-column:1 / -1}
  [data-page="tickets"] .tickets-gift .split--gap > :nth-child(2){padding-left:0}
  [data-page="tickets"] .tickets-gift__body{max-width:48rem;padding-top:0}
}