/* ===========================================================================
   layout.css - page structure, regions, and section composition.
   Depends on tokens from foundation.css. Load order matters.
   =========================================================================== */

/* --- wrappers -------------------------------------------------------------- */
.wrap        { width: min(100% - var(--s5) * 2, var(--wrap)); margin-inline: auto; }
.wrap--narrow{ width: min(100% - var(--s5) * 2, var(--wrap-narrow)); margin-inline: auto; }

.section          { padding-block: var(--s8); }
.section--tight   { padding-block: var(--s7); }
.section--roomy   { padding-block: var(--s9); }
.section--tinted  { background: var(--surface-2); }
.section--inverse { background: var(--night); color: var(--on-night-2); }
.section--inverse h2, .section--inverse h3 { color: var(--on-night); }
.section--inverse .lede { color: var(--on-night-2); }

.section-head { display: grid; gap: var(--s3); margin-block-end: var(--s6); max-width: var(--wrap-narrow); }

.stack > * + * { margin-block-start: var(--s4); }
.stack--lg > * + * { margin-block-start: var(--s6); }

.grid { display: grid; gap: var(--s5); }
@media (min-width: 48em) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--sidebar { grid-template-columns: 2fr 1fr; gap: var(--s7); align-items: start; }
}

/* Header, hero, page heads, bands, logo wall, quotes: see site.css. */

/* --- package tiers ---------------------------------------------------------
   Three columns on desktop, stacked on mobile. The "most booked" tier lifts.
   -------------------------------------------------------------------------- */
.tiers { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 56em) { .tiers { grid-template-columns: repeat(3, 1fr); } }

.tier { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s6) var(--s5); border: var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.tier--featured { border-color: var(--accent); box-shadow: var(--shadow); position: relative; }
.tier--featured::before {
  content: attr(data-badge); position: absolute; inset-block-start: 0; inset-inline-start: var(--s5);
  transform: translateY(-50%); padding: 0.25em 0.8em;
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--step--1); font-weight: 700; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; border-radius: 999px;
}
.tier__name  { font-family: var(--font-display); font-size: var(--step-2); }
.tier__price { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; }
.tier__price sub { font-family: var(--font-body); font-size: var(--step--1); font-weight: 400; color: var(--ink-3); vertical-align: baseline; margin-inline-start: var(--s2); }
.tier__hours { font-size: var(--step--1); color: var(--ink-3); }
.tier__features { display: grid; gap: var(--s3); font-size: var(--step--1); margin-block: var(--s2); }
.tier__features li { display: grid; grid-template-columns: 1.25em 1fr; gap: var(--s2); align-items: start; }
.tier__features li::before { content: "\2713"; color: var(--accent); font-weight: 700; }
.tier__features li[data-inherited="1"] { color: var(--ink-3); }
.tier__features li[data-inherited="1"]::before { color: var(--ink-3); opacity: 0.6; }
.tier .btn { margin-block-start: auto; }

/* --- FAQ accordion ---------------------------------------------------------- */
.faq { display: grid; }
.faq details { border-block-end: var(--border); }
.faq details:first-child { border-block-start: var(--border); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  padding: var(--s5) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: var(--step-2); color: var(--accent); line-height: 1; flex: none; transition: transform var(--transition); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-block-end: var(--s5); color: var(--ink-2); }

/* --- availability calendar --------------------------------------------------
   7-column grid. States are set by data-state on each cell button.
   -------------------------------------------------------------------------- */
.cal { display: grid; gap: var(--s4); max-width: 30rem; }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.cal__month { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; }
.cal__nav { display: flex; gap: var(--s2); }
.cal__nav button { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: var(--border); border-radius: var(--radius); cursor: pointer; }
.cal__nav button:hover:not([disabled]) { border-color: var(--ink-3); }
.cal__nav button[disabled] { opacity: 0.3; cursor: not-allowed; }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s1); }
.cal__dow span { text-align: center; font-size: var(--step--1); font-weight: 600; color: var(--ink-3); padding-block: var(--s2); }
.cal__day {
  aspect-ratio: 1; display: grid; place-items: center; cursor: pointer;
  font-size: var(--step--1); font-variant-numeric: tabular-nums;
  background: none; border: 1px solid transparent; border-radius: var(--radius);
  transition: background var(--transition), border-color var(--transition);
}
.cal__day:hover:not([disabled]) { background: var(--accent-veil); border-color: var(--accent); }
.cal__day[data-state="past"], .cal__day[data-state="empty"] { color: var(--rule); cursor: default; pointer-events: none; }
.cal__day[data-state="taken"] { color: var(--ink-3); text-decoration: line-through; cursor: not-allowed; }
.cal__day[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }

.cal-result { margin-block-start: var(--s5); }
.cal-result[hidden] { display: none; }

/* --- inquiry form ----------------------------------------------------------- */
.form-grid { display: grid; gap: 0 var(--s5); }
@media (min-width: 40em) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .field--full { grid-column: 1 / -1; }
}

/* Footer: see site.css. */

/* --- print (planning forms and timelines go on paper at the gig) ------------- */
@media print {
  .site-header, .site-footer, .nav-toggle, .btn, .no-print { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .section { padding-block: 0; }
  .card { border: 1px solid #999; break-inside: avoid; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}