/* =============================================================
   /medicare-plan-review — AEP ad landing page
   Builds on home.css (split + process sections) and guia.css (hero, form
   card, feature cards, BBB band). This file only adds the key-dates row,
   the phone-only call bar, and small tweaks.
   ============================================================= */

/* Side-by-side hero: a slight zoom anchored on the photo's left edge moves
   the older woman's face from behind the headline into the open space
   between the text and the form card. Stacked layouts keep the framing. */
@media (min-width: 900px) {
  .pr-hero-photo {
    transform: scale(1.1);
    transform-origin: 0 35%;
  }
}

/* Clears the sticky header when "Request a call" links jump to the form. */
.pr-form-card { scroll-margin-top: 7.5rem; }

/* Office hours and the callback prompt are two separate notes. */
.guia-hero__prefer + .guia-hero__prefer { margin-top: var(--space-2xs); }

/* Keep the split-section button its natural width (the column is flex). */
.pr-cta { align-self: flex-start; }

/* Phone numbers in body copy: tap-to-call, never split across lines. */
.pr-tel {
  white-space: nowrap;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------- Key dates ------- */
.pr-dates {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-m);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .pr-dates { grid-template-columns: repeat(3, 1fr); } }

.pr-date {
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  padding: var(--space-l);
  border-radius: var(--radius-m);
  background: var(--color-primary-tint);
  text-align: center;
}
/* Calendar-tile layout: big day number, month under it, then the label —
   lines up across tiles in both languages. */
.pr-date__day {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary-dark);
}
.pr-date__month {
  font-weight: 600;
  color: var(--color-primary-dark);
}
.pr-date__label {
  margin-top: var(--space-2xs);
  line-height: 1.5;
  color: var(--color-text);
}
/* The deadline gets the dark treatment (same as an open FAQ item). */
.pr-date--key { background: var(--color-primary-dark); }
.pr-date--key .pr-date__day,
.pr-date--key .pr-date__month,
.pr-date--key .pr-date__label { color: #fff; }

/* ------- Phone-only call bar ------- */
.pr-callbar { display: none; }
@media (max-width: 899px) {
  .pr-callbar {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 50;
    padding: 0.75rem var(--container-pad) calc(0.75rem + env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
  }
  .pr-callbar__btn {
    width: 100%;
    min-height: 3.25rem;
    font-weight: 600;
  }
  /* Room so the bar never covers the end of the page (this file only loads
     on this page, so the body rule doesn't leak elsewhere). */
  body { padding-bottom: 5rem; }
}