/* ==========================================================================
   Law Optional Writing Practice page — page head with Quick Facts, numbered
   "how it works" cards, subject tiles with test counts, "what you get" cards,
   FAQ accordion, enquiry panel, related cards, mobile sticky contact bar.
   Requires tokens.css + base.css. Mobile-first (360), enhanced at 640 / 960.
   (.page-head, .crumbs, .facts, .faq and the sticky bar mirror test-series.css:
   see pages/writing-practice/SHARED_REQUESTS.md)
   ========================================================================== */

/* Page head ------------------------------------------------------------ */
.page-head { padding-block: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-line); }
.page-head__inner { display: grid; gap: var(--s-3); }
.page-head__text { display: grid; gap: var(--s-2); justify-items: start; min-width: 0; }
.page-head__kicker {
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--c-red-text);
}
.page-head__title { font-size: var(--fs-h1); }
.page-head__intro { max-width: 60ch; color: var(--c-text-muted); }
.page-head__batch { display: flex; }
.page-head__actions { width: 100%; margin-top: var(--s-1); }

/* Breadcrumb */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0 var(--s-1); font-size: var(--fs-sm); color: var(--c-text-muted); }
.crumbs li + li::before { content: "\203A"; margin-right: var(--s-1); color: var(--c-text-muted); }
.crumbs a { color: var(--c-link-text); text-decoration: none; display: inline-flex; align-items: center; min-height: 28px; }
.crumbs a:hover { text-decoration: underline; }

/* Icon inside a button (WhatsApp / Call) */
.btn__icon { flex: 0 0 auto; width: 18px; height: 18px; }

/* Quick Facts: a white card with a highlighted title and a two-column dl */
.facts { gap: var(--s-2); }
.facts__title { font-size: var(--fs-h3); }
.facts__list { display: grid; gap: 0; margin: 0; }
.facts__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px var(--s-2);
  padding-block: var(--s-1);
  border-top: 1px solid var(--c-line);
}
.facts__row dt {
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.facts__row dd { margin: 0; color: var(--c-text); overflow-wrap: anywhere; }
.facts__row dd a { color: var(--c-link-text); text-decoration: none; font-weight: 700; }
.facts__row dd a:hover { text-decoration: underline; }

@media (min-width: 640px) {
  .facts__row { grid-template-columns: 11rem minmax(0, 1fr); align-items: baseline; }
}
@media (min-width: 960px) {
  .page-head { padding-block: var(--s-4) var(--s-5); }
  /* 960–1199: a narrower facts card (labels stacked) so the three buttons fit on one row */
  .wp-hero {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas: "crumbs crumbs" "text facts";
    column-gap: var(--s-6);
    row-gap: var(--s-4);
    align-items: start;
  }
  .wp-hero > .crumbs { grid-area: crumbs; }
  .wp-hero > .page-head__text { grid-area: text; }
  .wp-hero > .facts { grid-area: facts; }
  .facts__row { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1200px) {
  .wp-hero { grid-template-columns: minmax(0, 1fr) 440px; }
  .facts__row { grid-template-columns: 9.5rem minmax(0, 1fr); align-items: baseline; }
}

/* How it works: numbered cards ------------------------------------------- */
.wp-step { position: relative; }
.wp-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-family: var(--ff-display);
  font-size: 1.125rem;
  line-height: 1;
  color: var(--c-white);
  background: var(--c-red-text);
  border-radius: 50%;
}
.wp-step__title { color: var(--c-slate); }
@media (min-width: 960px) {
  .wp-steps.grid--4 { gap: var(--s-3); }
}

/* The 25 tests: subject tiles and the total tag -------------------------- */
/* on phones each subject is one compact row (name left, count right);
   from 640px they become the bordered tiles used elsewhere on the site */
.wp-subjects { gap: var(--s-2); }
.wp-subject {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
}
.wp-subject .tile__title { font-size: 1.125rem; min-width: 0; }
.wp-subject__count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--ff-display);
  font-size: var(--fs-base);
  color: var(--c-text-muted);
  white-space: nowrap;
}
.wp-subject__count strong { font-size: 2rem; line-height: 1; color: var(--c-charcoal); }
@media (min-width: 640px) {
  .wp-subjects { gap: var(--s-3); }
  .wp-subject { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: var(--s-3); }
  .wp-subject .tile__title { font-size: var(--fs-h3); }
  .wp-subject__count { margin-top: auto; }
}
.wp-total { display: flex; justify-content: center; margin-top: var(--s-3); }
.wp-total .tag { font-size: var(--fs-base); padding: 0.5rem 0.9rem; }

/* Opening calendar (rendered only once the rule is confirmed) */
.wp-openings {
  display: grid;
  gap: var(--s-2);
  max-width: 640px;
  margin: var(--s-4) auto 0;
  padding: var(--s-3);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.wp-openings__title { font-size: var(--fs-h3); }
.wp-openings__note { color: var(--c-text-muted); }
.wp-openings__list { display: grid; gap: 0; }
.wp-openings__row {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--s-2);
  padding-block: var(--s-1);
  border-top: 1px solid var(--c-line);
}
.wp-openings__month { font-family: var(--ff-display); color: var(--c-slate); }

/* What you get: three cards */
.wp-includes { max-width: 1120px; margin-inline: auto; }

/* Fee card (rendered only once the fee is confirmed) */
.wp-fee { gap: var(--s-3); max-width: 640px; margin-inline: auto; }

/* FAQ accordion (native details) ------------------------------------------ */
.faq { display: grid; gap: var(--s-1); max-width: 860px; margin-inline: auto; }
.faq__item {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  transition: border-color var(--ease);
}
.faq__item[open] { border-color: var(--c-slate); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-2) var(--s-3);
  font-family: var(--ff-display);
  font-size: 1.0625rem;
  line-height: var(--lh-snug);
  color: var(--c-slate);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  flex: 0 0 auto;
  width: 24px;
  font-size: 1.5rem;
  line-height: 1;
  text-align: center;
  color: var(--c-red-text);
}
.faq__item[open] .faq__q::after { content: "\2212"; }
.faq__q:hover { color: var(--c-charcoal); }
.faq__a { padding: 0 var(--s-3) var(--s-3); }
.faq__a a { color: var(--c-link-text); }

/* Enquire panel ---------------------------------------------------------- */
.wp-enquire {
  gap: var(--s-3);
  max-width: 980px;
  margin-inline: auto;
  padding: var(--s-4) var(--s-3);
  border: 2px solid var(--c-charcoal);
}
.wp-enquire__text { display: grid; gap: var(--s-2); }
.wp-enquire__title { font-size: var(--fs-h2); }
.wp-enquire__body { color: var(--c-text-muted); max-width: 52ch; }
@media (min-width: 640px) {
  .wp-enquire__actions .btn { flex: 1 1 auto; }
}
@media (min-width: 960px) {
  .wp-enquire {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
    padding: var(--s-5) var(--s-6);
  }
  .wp-enquire__text { flex: 1 1 auto; min-width: 0; }
  .wp-enquire__actions { flex: 0 0 auto; flex-direction: column; width: 260px; }
  .wp-enquire__actions .btn { width: 100%; }
}

/* Mobile sticky contact bar: Call · WhatsApp · Enquire ------------------- */
/* one set of actions on phones: the shared FAB is hidden on this page */
.page-writing-practice .whatsapp-fab { display: none; }
.page-writing-practice { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
.wp-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--c-white);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -4px 16px rgba(20, 24, 28, 0.08);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.wp-sticky__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-1);
  padding-block: var(--s-1);
}
.wp-sticky__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap-min);
  padding: 0 var(--s-1);
  font-family: var(--ff-display);
  font-size: 1rem;
  line-height: 1.2;
  color: var(--c-charcoal);
  background: var(--c-white);
  border: 2px solid var(--c-charcoal);
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--ease), color var(--ease);
}
.wp-sticky__btn svg { flex: 0 0 auto; width: 18px; height: 18px; }
.wp-sticky__btn:hover { background: var(--c-charcoal); color: var(--c-white); }
.wp-sticky__btn--red { color: var(--c-white); background: var(--c-red-text); border-color: var(--c-red-text); }
.wp-sticky__btn--red:hover { background: #B82323; border-color: #B82323; color: var(--c-white); }
@media (min-width: 960px) {
  .wp-sticky { display: none; }
  .page-writing-practice { padding-bottom: 0; }
}