/* =========================================================================
   PATIENT FORMS TEMPLATE (template-patient-forms.php)

   The simplest of the three reference pages — a welcome hero, two short
   info notes (what the first visit covers, how long to plan for) and the
   two external form links. The source page has no sub-headings between
   its paragraphs, so none are invented here either; sections without a
   heading get an aria-label instead. Every rule here is presentation
   only — the words it styles are copied verbatim from the live Patient
   Forms page into template-patient-forms.php's content, not invented by
   this stylesheet.
   ========================================================================= */

/* -------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------- */
.pforms-hero.fold { padding-top: calc(var(--fold) + var(--sp-2)); padding-bottom: var(--sp-6); }

.pforms-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: clamp(1.75rem, 3.4vw, 3.6rem);
  align-items: center;
}
.pforms-hero-copy { max-width: 62ch; }
.pforms-hero-copy .lead { margin-top: var(--sp-3); }
/* Same fix as .pinfo-hero-copy h1 in patient-info.css — the h1's own .d4
   class reads noticeably larger than this page's H2s further down, so
   it's pinned to the same .d3 size those use. */
.pforms-hero-copy h1 { font-size: var(--fs-d3); }

.pforms-hero-shot {
  position: relative;
  margin: 0; border-radius: var(--r-md); overflow: hidden;
  background: var(--n-10);
  height: 538px;
  box-shadow: 0 30px 60px -34px rgba(var(--deep-rgb), 0.35);
}
.pforms-hero-shot img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-3) var(--ease);
}
@media (hover: hover) {
  .pforms-hero-shot:hover img { transform: scale(1.05); }
}

.pforms-hero-actions {
  display: flex; flex-wrap: wrap;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  margin-top: var(--sp-4);
}

/* -------------------------------------------------------------------------
   VISIT INFO — the two paragraphs on what the first visit covers and how
   long to plan for, as a pair of plain notes rather than a wall of text.
   ------------------------------------------------------------------------- */
.pforms-info.fold { padding-block: calc(var(--fold) / 2); }

.pforms-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}
.pforms-info-card {
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: 0 22px 44px -34px rgba(var(--deep-rgb), 0.3),
              inset 0 0 0 var(--hair) var(--rule-quiet);
}
.pforms-info-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--tint-open); color: var(--leaf);
}
.pforms-info-icon svg { width: 22px; height: 22px; }
.pforms-info-card p { margin-top: var(--sp-3); font-size: var(--fs-body); line-height: 1.65; color: var(--ink-mid); }

/* -------------------------------------------------------------------------
   FORM LINKS — the two external forms, linked out to patientforms.ca.
   ------------------------------------------------------------------------- */
.pforms-links.fold { padding-block: calc(var(--fold) / 2); }

.pforms-links-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}
.pforms-link-card {
  display: flex; align-items: center; gap: 1rem;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: 0 22px 44px -34px rgba(var(--deep-rgb), 0.3),
              inset 0 0 0 var(--hair) var(--rule-quiet);
  transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
}
.pforms-link-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--tint-open); color: var(--leaf);
  flex: none;
}
.pforms-link-icon svg { width: 22px; height: 22px; }
.pforms-link-t { font-size: var(--fs-md); font-weight: 700; letter-spacing: var(--track-tight); color: var(--ink); }
.pforms-link-sub { display: block; margin-top: 0.2rem; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-quiet); }
.pforms-link-arrow {
  margin-left: auto; flex: none;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-quiet); color: var(--leaf);
  transition: background var(--t-2) var(--ease), color var(--t-2) var(--ease), transform var(--t-2) var(--ease);
}
.pforms-link-arrow svg { width: 15px; height: 15px; }
@media (hover: hover) {
  .pforms-link-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 54px -30px rgba(var(--deep-rgb), 0.38),
                inset 0 0 0 var(--hair) var(--rule-quiet);
  }
  .pforms-link-card:hover .pforms-link-arrow { background: var(--deep); color: var(--sage); transform: translateX(3px); }
}

/* -------------------------------------------------------------------------
   CLOSING CTA — same reasoning as .cdcp-cta / .pinfo-cta: the fold--quiet
   section right above it now runs at half padding, so the CTA panel needs
   its own top space back.
   ------------------------------------------------------------------------- */
.pforms-cta { margin-top: calc(var(--sp-2) - 5px); }

/* -------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .pforms-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .pforms-hero-shot { order: -1; aspect-ratio: 16 / 9; height: auto; }
  .pforms-info-grid { grid-template-columns: minmax(0, 1fr); }
  .pforms-links-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  /* Mobile-only unification: every reference page's CTA lands on the same
     top space here, though each keeps its own desktop value above. */
  .pforms-cta { margin-top: var(--sp-5); }
  .pforms-hero.fold { padding-bottom: var(--sp-5); }
  .pforms-hero-shot { aspect-ratio: 4 / 3; }
  .pforms-hero-actions .btn i { display: none; }
  .pforms-link-card { flex-wrap: wrap; }
}