/* Emergency Contraception – page-only styles (uses theme tokens from styles.css) */

/* ===== Hero with IMG ===== */
.hero--img{
  position:relative;
  min-height: clamp(520px, 60vh, 680px);
  display:grid; place-items:center;
  overflow:hidden;
}
.hero--img .hero-inner{
  position:relative; z-index:1;
  text-align:center; max-width:48rem;
  padding-block: clamp(3rem, 8vw, 6rem);
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.hero-figure{
  position:absolute; left:50%; transform: translateX(-50%);
  top: clamp(36px, 5vh, 72px);
  width: min(92%, var(--container-max));
  height: clamp(260px, 38vh, 420px);
  z-index:0; border-radius: var(--radius-3);
  box-shadow: var(--shadow-2); overflow:hidden;
}
.hero-img{ width:100%; height:100%; object-fit:cover; display:block; }
/* subtle veil */
.hero-figure::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(255,255,255,.78), rgba(255,255,255,.78));
  pointer-events:none;
}
.hero--img h1{ margin-bottom:var(--space-4, 1rem); }
.hero--img p{ margin-bottom:var(--space-5, 1.25rem); color:var(--muted); }

/* ===== Tabs ===== */
.ec-tabs{ padding-block: clamp(1.25rem, 4vw, 2rem); }
.tablist{ display:flex; gap:.5rem; border-bottom:1px solid var(--border); margin-bottom:.75rem; }
.tab{
  appearance:none; border:0; background:transparent; padding:.6rem .9rem;
  font-weight:700; color:var(--muted); border-radius:.75rem .75rem 0 0; cursor:pointer;
}
.tab.is-active{ color:#0f172a; background:color-mix(in oklab, var(--brand-600) 8%, #fff); }
.tabpanel{ display:none; }
.tabpanel.is-active{ display:block; }

/* ===== Overview image ===== */
.ec-figure{ margin-bottom: clamp(1rem, 3vw, 1.5rem); }
.ec-img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius: var(--radius-3); box-shadow: var(--shadow-2);
}

/* ===== EHC basics ===== */
.ehc-basics{
  display:grid; gap: clamp(.9rem, 2.6vw, 1.1rem);
  margin: clamp(.5rem, 2vw, 1rem) 0 clamp(1rem, 3vw, 1.4rem);
}
.ehc-card{
  background:#fff;
  border:2px solid color-mix(in oklab, var(--brand-600) 38%, #fff);
  border-radius: var(--radius-3);
  padding: clamp(1rem, 2.5vw, 1.25rem);
  box-shadow: var(--shadow-2);
}
.ehc-card h3{ margin:0 0 .5rem; color:#0f172a; }
.ehc-card ul{ margin:.4rem 0 0 1.15rem; }

/* ===== Medicine cards ===== */
.ec-meds{ display:grid; gap: clamp(.85rem, 2.6vw, 1.25rem); }
.med-card{
  display:grid; grid-template-columns: minmax(220px, 360px) 1fr;
  gap: clamp(1rem, 3vw, 1.5rem);
  align-items:start;
  background:#fff;
  border:1px solid color-mix(in oklab, var(--border) 80%, transparent);
  border-radius: var(--radius-3);
  padding: clamp(1rem, 2.5vw, 1.25rem);
  box-shadow: var(--shadow-2);
}
.med-media{ min-width:0; }
.med-img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius: var(--radius-2); box-shadow: var(--shadow-1);
}
.med-body{ min-width:0; }
.med-title{ margin-bottom:.35rem; color:#0f172a; }
.med-body p + p, .med-body ul{ margin-top:.45rem; }
.med-body ul{ padding-left:1.1rem; }

/* ===== Benefits ===== */
.ec-benefits{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.75rem, 2.5vw, 1rem);
  margin: clamp(.75rem, 2.5vw, 1.25rem) 0 clamp(1rem, 3vw, 1.5rem);
}
.benefit{
  background:#fff;
  border:1px solid color-mix(in oklab, var(--border) 80%, transparent);
  border-radius: var(--radius-3);
  padding: clamp(.9rem, 2.5vw, 1.1rem);
  box-shadow: var(--shadow-2);
  display:grid; grid-template-columns: auto 1fr; gap:.75rem; align-items:flex-start;
}
.benefit-ico{
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; font-size:1.15rem;
  background: color-mix(in oklab, var(--brand-600) 12%, #fff);
  border: 1px solid color-mix(in oklab, var(--brand-600) 28%, #fff);
}
.benefit p{ margin:0; color:var(--text); }

@media (max-width: 900px){
  .ec-benefits{ grid-template-columns:1fr; }
  .med-card{ grid-template-columns: 1fr; }
}

/* ===== Form polish ===== */
.ec-tabs .pc-card{ margin-top:.5rem; }
.choices{ display:flex; gap:1rem; flex-wrap:wrap; }
.soft{ border:0; height:1px; background:var(--border); margin:1rem 0; }
.elig-msg{
  margin-top:.6rem; padding:.75rem .9rem; border-radius:.75rem;
  background: color-mix(in oklab, #ef4444 10%, #fff);
  border:1px solid color-mix(in oklab, #ef4444 35%, #fff);
  color:#7f1d1d; font-weight:600;
}
.submitted-panel h3{ color:#0f172a; margin-bottom:.25rem; }

/* ===== Invalid-state visuals (triggered by JS adding .invalid) ===== */
.field.invalid > label { color: #b91c1c; font-weight: 700; }

.field.invalid input,
.field.invalid textarea,
.field.invalid select {
  border-color: #ef4444 !important;
  background: color-mix(in oklab, #ef4444 9%, #fff);
  outline: none;
}

.field.invalid input:focus,
.field.invalid textarea:focus,
.field.invalid select:focus {
  box-shadow: 0 0 0 3px color-mix(in oklab, #ef4444 20%, transparent);
}

/* Radio/checkbox groups */
.choices.invalid{
  border: 1.5px solid #ef4444;
  background: color-mix(in oklab, #ef4444 7%, #fff);
  border-radius: .6rem;
  padding: .6rem .7rem;
}

.choices.invalid label{
  color:#7f1d1d;
  font-weight:600;
}