/* ==========================================================================
   pages.css — page-level layout
   Contents: home hero · page heroes · catalogue · show detail · meet Sue ·
             about · contact · CTA band
   ========================================================================== */

/* ============================== Home hero ============================== */

.hero {
  position: relative;
  background:
    radial-gradient(60rem 30rem at 70% -10%, rgba(227, 181, 84, 0.16), transparent 60%),
    linear-gradient(175deg, var(--velvet-deep) 0%, var(--velvet) 68%, var(--velvet-soft) 100%);
  color: var(--paper);
  overflow: hidden;
}
.hero-inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(4rem, 10vw, 7.5rem) clamp(4.5rem, 10vw, 8rem);
  max-width: 46rem;
}
.hero-eyebrow { color: var(--brass-bright); }
.hero-title {
  font-size: var(--text-hero);
  font-weight: 640;
  margin-bottom: var(--space-3);
  color: var(--paper);
}
.hero-title em {
  font-style: italic;
  font-weight: 420;
  color: var(--brass-bright);
}
.hero-lede {
  font-size: var(--text-md);
  color: rgba(250, 245, 234, 0.88);
  max-width: 38rem;
  margin-bottom: var(--space-4);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }

.hero-proof {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: 0;
  margin: 0;
  font-size: var(--text-sm);
  color: rgba(250, 245, 234, 0.75);
}
.hero-proof strong { color: var(--brass-bright); }

/* Soft moving spotlight — decorative only, disabled with reduced motion */
.hero-spotlight {
  position: absolute;
  inset: -20%;
  background: radial-gradient(28rem 28rem at 20% 30%, rgba(250, 245, 234, 0.07), transparent 65%);
  animation: spotlight-drift 14s var(--ease-soft) infinite alternate;
  pointer-events: none;
}
@keyframes spotlight-drift {
  to { transform: translate(12%, 6%) scale(1.08); }
}

/* Curtain scallop: the hem of the curtain along the hero's bottom edge */
.curtain-scallop {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1.4rem;
  background: var(--paper);
  -webkit-mask: radial-gradient(1.4rem at 50% 0, transparent 97%, #000) 50% / 2.8rem 100%;
  mask: radial-gradient(1.4rem at 50% 0, transparent 97%, #000) 50% / 2.8rem 100%;
}

/* ============================ Page heroes ============================== */

.page-hero {
  background: linear-gradient(180deg, var(--paper-tint), var(--paper));
  border-bottom: 1px solid var(--line);
  padding-block: var(--space-5) var(--space-4);
}
.page-title { font-size: var(--text-xl); font-weight: 640; }
.page-lede { color: var(--ink-soft); max-width: 42rem; margin: 0; }
.page-hero .hero-actions { margin-top: var(--space-3); margin-bottom: 0; }

/* ============================= Catalogue =============================== */

.catalogue-controls {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  display: grid;
  gap: var(--space-2);
}
.search-field {
  position: relative;
  display: flex;
  align-items: center;
}
.search-field svg {
  position: absolute;
  left: 0.9rem;
  color: var(--ink-soft);
  pointer-events: none;
}
.search-field input {
  width: 100%;
  padding-left: 2.6rem;
  font-size: var(--text-md);
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: end;
}
.filter-select { display: grid; gap: 0.25rem; flex: 1 1 10rem; }
.filter-select span {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.catalogue-count {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
}

/* Filtered-out cards collapse; matches animate back in */
#show-grid .ticket { animation: rise-in var(--dur) var(--ease-out); }
#show-grid .ticket[hidden] { display: none; }

.catalogue-empty {
  text-align: center;
  padding-block: var(--space-5);
  color: var(--ink-soft);
}

/* ============================ Show detail ============================== */

.breadcrumbs {
  display: flex;
  gap: 0.5rem;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin-bottom: var(--space-4);
}
.breadcrumbs a { color: var(--ink-soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--velvet); text-decoration: underline; }

.show-detail-grid {
  display: grid;
  grid-template-columns: minmax(16rem, 26rem) 1fr;
  gap: var(--space-5);
  align-items: start;
  margin-bottom: var(--space-5);
}
@media (max-width: 760px) {
  .show-detail-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* Poster placeholder until real artwork arrives */
.show-poster-frame {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(24rem 16rem at 50% 0%, rgba(227, 181, 84, 0.22), transparent 70%),
    linear-gradient(170deg, var(--velvet-deep), var(--velvet));
  color: var(--paper);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-3);
  box-shadow: var(--shadow-md);
}
.show-poster-glyph { font-size: 3rem; }
.show-poster-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 640;
  max-width: 14ch;
}
.show-poster-note {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-bright);
}

.show-buy .show-title { font-size: var(--text-xl); }
.show-price {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 640;
  color: var(--velvet);
  margin-bottom: var(--space-3);
}

.show-meta {
  list-style: none;
  padding: var(--space-2) 0;
  margin: 0 0 var(--space-3);
  border-top: 2px dashed var(--line);
  border-bottom: 2px dashed var(--line);
  display: grid;
  gap: 0.4rem;
}
.show-meta li { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); }
.meta-label {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: var(--ink-soft);
  align-self: center;
}

.buy-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); }

/* Add-to-basket success morph */
.btn-add-to-cart { position: relative; min-width: 11rem; }
.btn-add-to-cart .atc-done {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn-add-to-cart.is-added { background: var(--success); }
.btn-add-to-cart.is-added .atc-label { opacity: 0; }
.btn-add-to-cart.is-added .atc-done { opacity: 1; transform: none; }
.btn-add-to-cart .atc-label { transition: opacity var(--dur-fast) var(--ease-out); }

.buy-assurances {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.3rem;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.buy-assurances li::before { content: "\2713\00a0\00a0"; color: var(--success); font-weight: 700; }

.show-detail-body {
  display: grid;
  grid-template-columns: 1fr minmax(15rem, 20rem);
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
@media (max-width: 760px) { .show-detail-body { grid-template-columns: 1fr; } }

.show-description h2, .show-included h2 { font-size: var(--text-lg); }
.show-description p { color: var(--ink); }

.show-included {
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  align-self: start;
  position: sticky;
  top: 5.5rem;
}
.show-included ul { padding-left: 1.1rem; margin: 0; display: grid; gap: 0.45rem; font-size: var(--text-sm); }

/* ============================== Meet Sue =============================== */

.meet-sue {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-5);
  align-items: center;
}
@media (max-width: 820px) { .meet-sue { grid-template-columns: 1fr; } }
.meet-sue-copy .btn { margin-top: var(--space-2); }

/* ================================ About ================================ */

.about-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; } }

.approach-list { padding-left: 1.1rem; display: grid; gap: 0.6rem; }

.profile-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.profile-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.profile-card > h2, .profile-card > p { padding-inline: var(--space-3); }
.profile-name { margin-top: var(--space-3); margin-bottom: 0; }
.profile-role {
  color: var(--brass);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.profile-blurb { font-size: var(--text-sm); color: var(--ink-soft); padding-bottom: var(--space-3); }

.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
@media (max-width: 680px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
}
.faq-item summary {
  font-weight: 700;
  cursor: pointer;
  padding-block: 0.3rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-display);
  color: var(--brass);
  font-size: 1.2rem;
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: var(--space-1) 0 0.35rem; font-size: var(--text-sm); color: var(--ink-soft); }

/* =============================== Contact =============================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.contact-side { display: grid; gap: var(--space-3); }
.contact-card {
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.contact-card h2 { font-size: var(--text-md); }
.contact-card p { font-size: var(--text-sm); color: var(--ink-soft); }

/* =============================== CTA band ============================== */

.cta-band {
  background:
    radial-gradient(40rem 18rem at 80% 0%, rgba(227, 181, 84, 0.18), transparent 65%),
    var(--velvet);
  color: var(--paper);
  margin-top: var(--space-6);
}
.cta-inner { text-align: center; padding-block: var(--space-5); }
.cta-title { color: var(--paper); font-size: var(--text-xl); }
.cta-inner p { color: rgba(250, 245, 234, 0.85); margin-bottom: var(--space-3); }