/* =====================================================================
   STAYTEX — Exhibitors & sponsors page (/exhibitors)
   Page-specific styles on top of css/style.css: static hero, 4-up benefits,
   package cards fed by /api/booth-types, application form extras.
   ===================================================================== */

/* ---------- header: link back to the main site ---------- */
.back-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; padding: 9px 13px; border-radius: 999px; border: 1.5px solid currentColor; opacity: .85; transition: opacity .2s, background .2s; white-space: nowrap; }
.back-link:hover { opacity: 1; background: rgba(0, 54, 41, .06); }
.site-header.on-hero .back-link:hover { background: rgba(255, 255, 255, .12); }
@media (max-width: 960px) { .back-link span { display: none; } .back-link { padding: 9px; } }

/* ---------- hero (no video: pattern + petals) ---------- */
.hero-exh { min-height: 0; padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(48px, 8vw, 96px)); padding-bottom: clamp(72px, 9vw, 120px); }
.hero-exh .band-pattern { opacity: .14; mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .25)); -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .25)); }
.hero-exh .petal-gold.big { inset-inline-start: -200px; top: -140px; opacity: .55; }
.hero-exh .petal-sky.big { inset-inline-end: -220px; bottom: -220px; opacity: .45; }
.hero-exh .hero-inner { z-index: 1; }
.hero-exh .hero-title { max-width: 18ch; }
.hero-exh .chips .ic { color: var(--gold); }

/* ---------- why exhibit ---------- */
.why-exh { background: var(--cream); }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.why-grid .feature h3 { font-size: 1.08rem; margin: 0 0 8px; }
.fi-gold { background: var(--gold); color: var(--green); }

/* ---------- packages ---------- */
.packages { background: var(--paper); border-block: 1px solid var(--line); }
.pkg-group { margin-top: clamp(28px, 4vw, 44px); }
.pkg-group .group-title { font-family: var(--font-display); font-size: 1.25rem; display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--green); }
.pkg-group .group-title .ic { color: var(--coral); width: 26px; height: 26px; }
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pkg { position: relative; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); border-end-end-radius: 56px; padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); min-width: 0; }
.pkg:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.pkg-kind { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--coral); }
.pkg-kind::before { content: ""; width: 20px; height: 4px; border-radius: 2px; background: var(--gold); }
.pkg h3 { margin: 0; font-size: 1.2rem; line-height: 1.4; }
.pkg-size { color: var(--ink-2); display: flex; gap: 8px; align-items: center; margin: 0; font-weight: 600; font-size: .95rem; }
.pkg-size .ic { color: var(--green); }
.pkg-size .num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.pkg-price { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--green); margin: 4px 0 0; font-variant-numeric: tabular-nums; line-height: 1.2; }
.pkg-price small { font-size: .85rem; font-weight: 600; color: var(--muted); margin-inline-start: 4px; font-family: var(--font-body); }
.pkg-price.per { font-size: 1.1rem; color: var(--coral); }
.pkg-desc { margin: 0; color: var(--ink-2); font-size: .95rem; white-space: pre-line; }
.pkg-benefits { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; font-size: .93rem; }
.pkg-benefits li { display: flex; gap: 8px; align-items: flex-start; }
.pkg-benefits .ic { color: var(--gold); margin-top: .25em; flex: none; }
.pkg .btn { margin-top: auto; align-self: flex-start; }
.pkg .btn-outline { border-width: 1.5px; }
.pkg.sponsor { background: var(--green); color: #fff; border-color: transparent; }
.pkg.sponsor::after { content: ""; position: absolute; inset-inline-end: -70px; top: -70px; width: 170px; height: 170px; background: var(--gold); border-radius: 14% 14% 14% 100%; opacity: .22; pointer-events: none; }
.pkg.sponsor > * { position: relative; z-index: 1; }
.pkg.sponsor h3 { color: #fff; }
.pkg.sponsor .pkg-kind { color: var(--gold); }
.pkg.sponsor .pkg-price { color: var(--gold); }
.pkg.sponsor .pkg-price.per { color: #fff; }
.pkg.sponsor .pkg-price small { color: rgba(255, 255, 255, .7); }
.pkg.sponsor .pkg-desc, .pkg.sponsor .pkg-size { color: rgba(255, 255, 255, .82); }
.pkg.sponsor .pkg-size .ic, .pkg.sponsor .pkg-benefits .ic { color: var(--gold); }
.pkg.sponsor .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .55); }
.pkg.sponsor .btn-outline:hover { background: rgba(255, 255, 255, .12); }
.pkg-state { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 28px 20px; border: 1.5px dashed var(--line); border-radius: var(--radius); }
.pkg-state.error { color: var(--coral); }
.pkg-foot { margin-top: clamp(24px, 3vw, 36px); font-size: .9rem; }

/* ---------- application form extras ---------- */
.apply .form-card { border-start-start-radius: 72px; }
.field-hint { font-size: .8rem; color: var(--muted); font-weight: 500; margin-inline-start: 4px; }
.radio-grid { grid-template-columns: repeat(3, 1fr); }
.chk input[type="radio"] { border-radius: 50%; }
.field textarea { width: 100%; min-width: 0; padding: 13px 15px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; font: inherit; color: var(--ink); resize: vertical; min-height: 110px; transition: border-color .2s, box-shadow .2s; line-height: 1.6; }
.field textarea::placeholder { color: #9aa7a2; }
.field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(0, 54, 41, .1); }
.lead-form.validated .field textarea:invalid { border-color: var(--coral); }
.field input.is-invalid, .field select.is-invalid, .field textarea.is-invalid { border-color: var(--coral); }
.lead-form.validated .consent:has(input:invalid) { color: var(--coral); }
.field[hidden] { display: none; }
.form-success h3 { margin: 0 0 6px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .why-grid { grid-template-columns: 1fr 1fr; }
  .pkg-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .why-grid, .pkg-grid, .radio-grid { grid-template-columns: 1fr; }
  .pkg { border-end-end-radius: 36px; padding: 22px 20px 20px; }
  .pkg .btn { align-self: stretch; }
  .hero-exh .petal-gold.big { width: 260px; height: 260px; inset-inline-start: -140px; top: -80px; }
  .hero-exh .petal-sky.big { width: 260px; height: 260px; inset-inline-end: -150px; bottom: -150px; }
}