/* =========================================================================
   OFFICE POLICIES TEMPLATE (template-office-policies.php)

   Hero, a payment-responsibility notice (the regulatory/co-payment
   paragraphs read better as a distinct callout than folded into the
   hero), and the three admin-services cards. The source page has no
   sub-headings between its paragraphs beyond the one intro line before
   the services list, so none are invented here either — the notice
   section gets an aria-label instead of a heading. Every rule here is
   presentation only — the words it styles are copied verbatim from the
   live Office Policies page into template-office-policies.php's content,
   not invented by this stylesheet.
   ========================================================================= */

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

.opol-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;
}
.opol-hero-copy { max-width: 62ch; }
.opol-hero-copy .lead { margin-top: var(--sp-3); }

.opol-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);
}
.opol-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) {
  .opol-hero-shot:hover img { transform: scale(1.05); }
}

.opol-hero-actions { margin-top: var(--sp-4); }

/* -------------------------------------------------------------------------
   PAYMENT RESPONSIBILITY NOTICE — the regulatory + co-payment paragraphs,
   set apart as a callout since the source treats this as a formal notice.
   ------------------------------------------------------------------------- */
.opol-notice.fold { padding-block: calc(var(--fold) / 2); }

.opol-notice-panel {
  display: flex; gap: 1.1rem;
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 var(--hair) var(--rule),
              0 22px 44px -34px rgba(var(--deep-rgb), 0.25);
}
.opol-notice-icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--tint-open); color: var(--leaf);
  flex: none;
}
.opol-notice-icon svg { width: 21px; height: 21px; }
.opol-notice-copy p { font-size: var(--fs-body); line-height: 1.68; color: var(--ink-mid); }
.opol-notice-copy p + p { margin-top: var(--sp-3); }

/* -------------------------------------------------------------------------
   ADMINISTRATIVE SERVICES
   ------------------------------------------------------------------------- */
.opol-admin.fold { padding-block: calc(var(--fold) / 2); }
.opol-admin-lead { margin-top: 0; max-width: 66ch; }

.opol-admin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: var(--sp-5);
}
.opol-admin-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);
}
.opol-admin-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--tint-open); color: var(--leaf);
}
.opol-admin-icon svg { width: 22px; height: 22px; }
/* The source numbers these three services 1, 2, 3 and then refers back to
   "no 3" by number in the paragraph above them. An earlier pass replaced
   the numerals with icons, which left that cross-reference pointing at
   nothing — so the numeral is the badge here, and it is content, not
   decoration. Dark fill rather than the tinted circle the icons used, so a
   numeral reads as a numeral at a glance instead of as another glyph. */
.opol-admin-num {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--deep); color: var(--on-deep);
  font-size: var(--fs-lg); font-weight: 700; letter-spacing: var(--track-tight);
  transition: transform var(--t-2) var(--ease);
}
@media (hover: hover) {
  .opol-admin-card:hover .opol-admin-num { transform: scale(1.08); }
}

.opol-admin-card h3 {
  margin-top: var(--sp-3);
  font-size: var(--fs-md); font-weight: 700;
  letter-spacing: var(--track-tight); line-height: 1.25;
}
.opol-admin-card p { margin-top: 0.5rem; font-size: var(--fs-body); line-height: 1.65; color: var(--ink-mid); }

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

/* -------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .opol-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .opol-hero-shot { order: -1; aspect-ratio: 16 / 9; height: auto; }
  .opol-admin-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. */
  .opol-cta { margin-top: var(--sp-5); }
  .opol-hero.fold { padding-bottom: var(--sp-5); }
  .opol-hero-shot { aspect-ratio: 4 / 3; }
  .opol-notice-panel { flex-direction: column; }
}