/* ========================================================================
   PAID-SEARCH LANDING PAGES
   Loads on the three LP templates, after assessment-page.css. See
   page-ai-for-roofing-hvac.php, page-ai-for-medical-practices.php and
   page-ai-assessment-virginia.php. Also loads on the Richmond city page,
   template-parts/location-richmond.php, which borrows the hero grid inside the
   location template's .loc-hero; its few extra rules are at the bottom.

   This file holds only what assessment-page.css lacks: the two-column hero,
   the price tiers, a plain list, and a text link. The four-card, two-column
   grid is .iw-assess-where, which already goes to two columns at 640px, so
   nothing is redefined for it. Every selector is prefixed .iw-lp, and every
   colour, font and radius comes from the :root block in style.css or the
   locals .iw-assess publishes. Flat colour only, no gradients.

   Mobile first. The base rules are the phone layout: the hero is one column
   and the picker follows the subhead directly, because the DOM order is copy
   then picker. At 1024px the two sit side by side. This file never selects into
   #iw-assessment-picker, which the picker's own stylesheet owns.
   ======================================================================== */

/* ── Hero ───────────────────────────────────────────────────────────────── */

/* Tighter than the assessment hero so the picker's first screen lands inside a
   390 by 844 viewport. */
.iw-lp .iw-lp-hero { padding: 32px 0 40px; }

.iw-lp-hero__cols {
  display: grid;
  gap: 28px;
  align-items: start;
}

.iw-lp-hero__title {
  max-width: none;
  margin-top: 6px;
  font-size: clamp(30px, 8vw, 52px);
  line-height: 1.05;
}

.iw-lp-hero__sub {
  margin-top: 16px;
  font-size: 17px;
}

.iw-lp-hero__picker { min-width: 0; }

.iw-lp-picker-title {
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-hot);
}

/* The picker block sits in the hero, not in its own section, so the top margin
   assessment-page.css gives it comes off. */
.iw-lp-hero__picker .iw-assess-picker { margin-top: 0; }

/* In the hero the h1 and subhead are the copy column; the buttons inside the
   fallback keep the 48px target from .iw-assess-btn. */

/* ── Price tiers ────────────────────────────────────────────────────────── */

.iw-lp-tiers {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.iw-lp-tier {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--iw-line);
  border-top: 3px solid var(--copper);
  border-radius: var(--radius);
  background: var(--iw-panel);
}

.iw-lp-tier__label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-hot);
}

.iw-lp-tier__price {
  font-family: var(--font-display);
  font-size: clamp(30px, 7vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--off);
}

.iw-lp-tier__unit {
  margin-left: 4px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--iw-mist-dim);
}

.iw-lp-tier__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--iw-mist);
}

/* ── Lists and links ────────────────────────────────────────────────────── */

/* The medical columns: a plain list inside an .iw-assess-where__card. */
.iw-lp-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.iw-lp-list__item {
  padding: 12px 0;
  border-top: 1px solid var(--iw-line);
  font-size: 16px;
  line-height: 1.5;
  color: var(--iw-mist);
}
.iw-lp-list__item:first-child { border-top: 0; padding-top: 0; }

.iw-lp-links {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.iw-lp-link {
  display: inline-block;
  padding: 10px 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--copper-hot);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.iw-lp-link:hover { color: var(--copper-light); }

/* ── Closing ask ────────────────────────────────────────────────────────── */

.iw-lp-cta__actions {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.iw-lp-cta__phone {
  font-size: 17px;
  color: var(--iw-mist);
}
.iw-lp-cta__phone a {
  padding: 10px 0;
  font-weight: 600;
  color: var(--off);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.iw-lp-cta__phone a:hover { color: var(--copper-light); }

/* ── Wider viewports ────────────────────────────────────────────────────── */

@media (min-width: 640px) {
  .iw-lp-tiers { grid-template-columns: repeat(3, 1fr); }
  .iw-lp-cta__actions { flex-direction: row; align-items: center; gap: 28px; }
}

/* Two columns: copy left, picker right. The picker column is the wider of the
   two because the bundle's month grid needs the room. */
@media (min-width: 1024px) {
  .iw-lp .iw-lp-hero { padding: 64px 0 72px; }

  .iw-lp-hero__cols {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 56px;
  }
  .iw-lp-hero__title { font-size: clamp(36px, 3.6vw, 52px); }
  .iw-lp-hero__sub { font-size: 18px; margin-top: 22px; }
}

/* ── Minimal header and footer (header.php / footer.php) ──────────────── */

/* style.css hides header buttons below 960px because the full header moves
   them into the menu. This header has no menu, so its one button stays. */
.iw-lp-header__actions { display: flex; margin-left: auto; gap: 14px; }
@media (max-width: 960px) {
  .site-header__actions.iw-lp-header__actions .btn { display: inline-flex; }
}
/* At phone width the logo gives up room so the phone and the button both fit. */
@media (max-width: 420px) {
  .iw-lp-header .site-logo__img { width: 112px; height: auto; }
  .iw-lp-header__actions { gap: 10px; }
  .iw-lp-header .btn__arrow { display: none; }
}

.iw-lp-footer {
  background: var(--navy);
  color: var(--off);
  padding: 32px var(--gutter-x);
  font-size: 13px;
}
.iw-lp-footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
}
.iw-lp-footer a { color: var(--off); }
.iw-lp-footer a:hover { color: var(--copper-light); }

/* Reserve the picker's mounted height before React paints it. Below 1024px the
   month grid's cells are square, so its height tracks the viewport width:
   measured 2026-10-03 on the live medical page at 360, 430, 639, 640, 767 and
   1023px, the mounted picker ran 690 to 1093px tall against a 407 to 491px
   fallback, and that jump scored CLS 0.14 to 0.17. The formula fits those
   points within about 20px. At 1024px and up the hero column already holds the
   height. min-height never caps the picker, so later steps can still grow it. */
@media (max-width: 1023px) {
  .iw-lp .iw-lp-hero__picker .iw-assess-picker { min-height: max(690px, calc(70vw + 375px)); }
}

/* ── Richmond (template-parts/location-richmond.php) ──────────────────── */

/* The location hero's 80px top padding pushes the picker below a 390 by 844
   viewport under the full site header, so the phone layout takes the LP
   hero's tighter padding. At 1024px the two columns sit side by side and the
   location template's own padding returns. */
@media (max-width: 1023px) {
  .iw-lp-richmond .loc-hero { padding-top: 32px; padding-bottom: 40px; }
}

.iw-lp-richmond__phone { margin-top: 16px; }

/* iw_section_title() sets no bottom margin; the grids and Q&A below it set
   their own top margin, which matches the 40px the loc-body blocks use. */
.iw-lp-richmond .iw-assess-where { margin-top: 40px; }

.iw-lp-richmond__nap { font-size: 15px; color: var(--iw-mist); }
.iw-lp-richmond__nap a { color: var(--copper-light); font-weight: 600; }