/* ============================================================
   Hawaz LEAP26 booth — components.css
   Hero, cards, grids, forms, chips, pickers, panels.
   Tokens and base live in theme.css.
   ============================================================ */

/* ---------- hero (index) ---------- */
.hero {
  position:relative;
  padding-block:4rem 3.5rem;
  overflow:hidden;
}
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(42rem 22rem at 85% -10%, rgba(0,81,67,.08), transparent 60%),
    radial-gradient(30rem 16rem at 5% 110%, rgba(244,125,66,.07), transparent 60%);
  pointer-events:none;
}
.hero-inner { position:relative; max-width:44rem; margin-inline:auto; text-align:center; }
.hero h1 {
  font-size:clamp(1.8rem, 5.5vw, 2.8rem);
  font-weight:700;
  letter-spacing:-.01em;
}
.hero-lead {
  margin-block-start:1rem;
  color:var(--ink-soft);
  font-size:clamp(1.1rem, 2.7vw, 1.25rem);
  max-width:38rem;
  margin-inline:auto;
}
.hero-cta {
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-block-start:1.75rem;
  justify-content:center;
}
.hero-note {
  margin-block-start:1rem;
  font-size:.92rem;
  color:var(--ink-soft);
}

/* ---------- subpage hero ---------- */
.page-hero { padding-block:2.75rem 1rem; text-align:center; }
.page-hero h1 { font-size:clamp(1.8rem, 5vw, 2.5rem); margin-block-start:.4rem; }
.page-hero p {
  margin-block-start:.7rem;
  color:var(--ink-soft);
  font-size:clamp(1.1rem, 2.6vw, 1.25rem);
  line-height:1.75;
  max-width:42rem;
  margin-inline:auto;
}

/* ---------- card grids ---------- */
.grid {
  display:grid;
  gap:var(--gap);
  grid-template-columns:1fr;
}
@media (min-width:640px)  { .grid-2up { grid-template-columns:repeat(2,1fr); } }
@media (min-width:760px)  { .grid-3up { grid-template-columns:repeat(3,1fr); } }

/* ---------- card base ---------- */
.card {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.card h3 { font-size:1.15rem; }
.card p { font-size:.98rem; color:var(--ink-soft); }
.card-icon {
  width:44px; height:44px;
  border-radius:12px;
  background:rgba(0,81,67,.07);
  color:var(--green);
  display:grid;
  place-items:center;
}
.card-icon svg { width:22px; height:22px; }
.card-points {
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap:.4rem;
  font-size:.85rem;
  color:var(--ink-soft);
}
.card-points li {
  display:flex;
  gap:.5rem;
  align-items:baseline;
}
.card-points li::before {
  content:"";
  flex-shrink:0;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--orange);
  transform:translateY(-.15em);
}
.card-cta { margin-block-start:auto; padding-block-start:.5rem; }
.card-link {
  font-weight:600;
  font-size:.9rem;
}
a.card-hover { color:inherit; }
a.card-hover:hover { text-decoration:none; border-color:var(--green); }

/* ---------- brochures teaser + cards ---------- */
.brochure-card { padding:0; overflow:hidden; }
.brochure-cover {
  aspect-ratio:4/3;
  background:linear-gradient(135deg, rgba(0,81,67,.10), rgba(244,125,66,.08));
  border-block-end:1px solid var(--line);
  object-fit:cover;
  inline-size:100%;
}
.brochure-body { padding:1.1rem 1.25rem 1.25rem; display:flex; flex-direction:column; gap:.55rem; }
.brochure-meta { font-size:.78rem; color:var(--ink-soft); }

/* ---------- CTA band ---------- */
.band {
  background:var(--green);
  border-radius:var(--radius);
  color:#fff;
  padding:2.25rem 1.75rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
@media (min-width:760px) {
  .band { flex-direction:row; align-items:center; justify-content:space-between; padding:2.5rem; }
}
.band h2 { color:#fff; font-size:clamp(1.35rem, 3.2vw, 1.75rem); }
.band p { color:rgba(254,245,232,.92); font-size:1rem; margin-block-start:.4rem; max-width:30rem; }
.band .btn-accent { flex-shrink:0; }

/* ---------- quiz entry cards ---------- */
.quiz-card { gap:.6rem; }
.quiz-meta {
  font-size:.78rem;
  color:var(--ink-soft);
  display:flex;
  align-items:center;
}

/* ---------- forms ---------- */
.form-panel {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.75rem 1.5rem;
  max-width:44rem;
  margin-inline:auto;
}
@media (min-width:640px) { .form-panel { padding:2rem; } }
.form-grid { display:grid; gap:1.1rem; grid-template-columns:1fr; }
@media (min-width:640px) { .form-grid-2 { grid-template-columns:repeat(2,1fr); } }
.field { display:flex; flex-direction:column; gap:.35rem; }
.field label { font-size:.85rem; font-weight:600; color:var(--ink); }
.field .req { color:var(--orange-600); }
.field input,
.field select,
.field textarea {
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fff;
  padding:.65rem .85rem;
  font-size:.95rem;
  inline-size:100%;
  transition:border-color .15s ease;
}
.field textarea { min-block-size:6.5rem; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none;
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(0,81,67,.10);
}
.field.has-error input, .field.has-error textarea, .field.has-error select {
  border-color:var(--orange-600);
}
.field-error {
  font-size:.78rem;
  color:var(--orange-600);
  min-block-size:1em;
}
.form-hint { font-size:.82rem; color:var(--ink-soft); }
.form-legend {
  font-size:1rem;
  font-weight:600;
  color:var(--green);
  padding-block-start:.5rem;
  border-block-start:1px solid var(--line);
  margin-block-start:.5rem;
}
.form-status { font-size:.88rem; min-block-size:1.4em; }
.form-status.err { color:var(--orange-600); }

/* ---------- chips (day picker) ---------- */
.chip-row { display:flex; flex-wrap:wrap; gap:.5rem; }
.chip { position:relative; }
.chip input {
  position:absolute;
  opacity:0;
  inset:0;
  cursor:pointer;
}
.chip span {
  display:inline-block;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  padding:.45rem 1rem;
  font-size:.85rem;
  font-weight:500;
  color:var(--ink-soft);
  transition:all .15s ease;
}
.chip input:checked + span {
  background:var(--green);
  border-color:var(--green);
  color:#fff;
}
.chip input:focus-visible + span { outline:2px solid var(--orange); outline-offset:2px; }

/* ---------- member picker ---------- */
.member-list { display:grid; gap:.6rem; grid-template-columns:1fr; }
@media (min-width:640px) { .member-list { grid-template-columns:repeat(2,1fr); } }
.member { position:relative; }
.member input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.member-body {
  display:flex;
  align-items:center;
  gap:.8rem;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fff;
  padding:.7rem .9rem;
  transition:all .15s ease;
}
.member input:checked + .member-body {
  border-color:var(--green);
  box-shadow:0 0 0 2px rgba(0,81,67,.18);
  background:var(--panel);
}
.member input:focus-visible + .member-body { outline:2px solid var(--orange); outline-offset:2px; }
.member-photo {
  width:44px; height:44px;
  border-radius:50%;
  object-fit:cover;
  background:rgba(0,81,67,.08);
  flex-shrink:0;
  display:grid;
  place-items:center;
  color:var(--green);
  font-weight:700;
}
.member-name { font-weight:600; font-size:.92rem; color:var(--ink); }
.member-title { font-size:.78rem; color:var(--ink-soft); }

/* ---------- success / gate panels ---------- */
.notice-panel {
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow:var(--shadow);
  padding:2.25rem 1.5rem;
  text-align:center;
  max-width:34rem;
  margin-inline:auto;
}
.notice-panel h2 { font-size:1.3rem; }
.notice-panel p { color:var(--ink-soft); margin-block-start:.6rem; }
.notice-panel .btn { margin-block-start:1.4rem; }
.notice-icon {
  width:56px; height:56px;
  margin-inline:auto;
  margin-block-end:1rem;
  border-radius:50%;
  background:rgba(65,230,97,.14);
  color:var(--green);
  display:grid;
  place-items:center;
}
.notice-icon svg { width:26px; height:26px; }

/* ---------- baleegh highlights ---------- */
.pillars { display:grid; gap:.9rem; grid-template-columns:1fr; margin-block:1.5rem; }
@media (min-width:640px) { .pillars { grid-template-columns:repeat(3,1fr); } }
.pillar {
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--panel);
  padding:1.25rem 1.35rem;
  font-size:1.05rem;
  line-height:1.65;
  color:var(--ink);
}

/* ---------- quiz root ---------- */
#quiz-root { margin-block:2rem; min-block-size:2rem; max-inline-size:44rem; margin-inline:auto; }