/* Ad landing pages (CPT landingpages) — chrome-less, homepage-mirror v2.
   The 12 sections REUSE the homepage component classes from style.css
   (sp-section, sp-section-head, sp-eyebrow, sp-hero-split, sp-trust-strip,
   sp-feature-card, sp-team-grid / sp-podiatrist-card, sp-timeline,
   sp-testimonial, sp-faq, sp-clinic-image-card). This file only adds the
   genuinely landing-specific bits: the decorative logo/footer, the numbered
   "why" list, the info-card grid, the feature-card CTA hint, the reviews grid,
   the navy band promo line, and the Cliniko booking overlay.
   The site-wide floating FAB (straits_podiatry_floating_contact) renders via
   wp_footer(); there is no separate sticky bar. */

.sp-lp-body { margin: 0; }

/* Mid-page CTA band action row: Book Online + Call + WhatsApp as buttons. On mobile
   the Call/WhatsApp buttons collapse to icon-only so all three stay on ONE row. */
.sp-lp-band__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; align-items: center; }
.sp-lp-band__cta .sp-lp-band__book { display: inline-flex; align-items: center; background: #fff; color: var(--wp--preset--color--primary, #031B4E); border: 1.5px solid #fff; border-radius: 6px; padding: 0.7rem 1.4rem; font-weight: 600; line-height: 1; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.sp-lp-band__cta .sp-lp-band__book:hover { background: #e8eefb; color: var(--wp--preset--color--primary, #031B4E); }
.sp-lp-band__btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.7rem 1.15rem; border-radius: 6px; font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 600; border: 1.5px solid #fff; color: #fff; background: transparent; text-decoration: none; line-height: 1; transition: background 0.15s ease; }
.sp-lp-band__btn svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.sp-lp-band__btn:hover { background: rgba(255,255,255,0.14); color: #fff; }
.sp-lp-band__btn--wa { background: #25D366; border-color: #25D366; }
.sp-lp-band__btn--wa:hover { background: #1ebe5d; }
.sp-lp-band__hours { margin: 1rem 0 0; color: rgba(255,255,255,0.8); font-size: 0.9rem; }
/* Hover feedback for the navy Book Online (Cliniko-trigger) buttons across the landing
   pages, which previously had none. has-primary-background-color sets the base bg with
   !important, so the hover needs it too. */
.sp-lp .wp-element-button.has-primary-background-color { transition: background-color 0.15s ease; }
.sp-lp .wp-element-button.has-primary-background-color:hover { background-color: #0c2a63 !important; }
@media (max-width: 520px) {
	.sp-lp-band__cta { flex-wrap: nowrap; gap: 0.5rem; }
	.sp-lp-band__btn { padding: 0.65rem; }
	.sp-lp-band__btn span { display: none; }
}

/* Match the homepage content width. The landing <main class="sp-lp"> is raw HTML, so
   it does NOT get WordPress's constrained-layout width injection that the homepage's
   wp:group{constrained} sections get. Cap .alignwide to the theme wideSize (1180px),
   centred, exactly like the homepage. (Intentionally-narrower elements such as
   .sp-lp-why keep their own width via a more specific selector below.) */
.sp-lp .alignwide { max-width: 1180px; margin-left: auto; margin-right: auto; box-sizing: border-box; }

/* ---- Decorative logo (S1) --------------------------------------------- */
.sp-lp-logo, .sp-lp-logo--text { cursor: default; }

/* ---- S3: numbered "why" list (homepage uses an accordion; the landing
   keeps a simpler numbered list, but in the homepage's visual language). -- */
.sp-lp .sp-lp-why { list-style: none; counter-reset: why; padding: 0; margin: 1.5rem auto 0; display: grid; gap: 1rem; max-width: 860px; }
.sp-lp-why li { counter-increment: why; padding-left: 3rem; position: relative; line-height: 1.6; color: var(--wp--preset--color--text-muted, #5F6C88); }
.sp-lp-why li::before { content: counter(why); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 50%; background: var(--wp--preset--color--primary, #031B4E); color: #fff; font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 800; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; }
.sp-lp-why strong { color: var(--wp--preset--color--primary, #031B4E); }

/* ---- S4: condition info-card grid ------------------------------------- */
.sp-lp-infocard { background: #fff; border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.sp-lp-infocard__media { width: 100%; aspect-ratio: 1 / 1; background: var(--wp--preset--color--surface-soft, #F5F9FC); }
.sp-lp-infocard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-lp-infocard__body { padding: 1.4rem 1.5rem; }
.sp-lp-infocard h3 { margin: 0 0 0.4rem; font-size: 1.12rem; color: var(--wp--preset--color--primary, #031B4E); }
.sp-lp-infocard p { margin: 0; color: var(--wp--preset--color--text-muted, #5F6C88); line-height: 1.55; }
/* Mobile only: image on the left, write-up on the right. Desktop keeps image-on-top. */
@media (max-width: 600px) {
	.sp-lp-infocard { display: grid; grid-template-columns: 96px 1fr; column-gap: 1rem; align-items: center; padding: 0.9rem 1rem; }
	.sp-lp-infocard__media { width: 96px; height: 96px; border-radius: 12px; }
	.sp-lp-infocard__body { padding: 0; }
}

/* ---- S5: treatment cards — NON-clickable info cards (reuse sp-feature-card
   visual, but no link/booking). Neutralise the homepage hover-lift so they do
   not imply clickability. ------------------------------------------------------ */
.sp-feature-card--static { cursor: default; }
.sp-feature-card--static:hover { transform: none; box-shadow: none; }

/* ---- S6: podiatrist cards — IDENTICAL to the homepage S6 card (circular
   portrait, name, role, clinic, one-line "Clinical interests:"), plus a
   "Speaks: ..." line and a "View bio" button that opens a modal. The full bio
   lives only in the modal (no /podiatrists/ link). Cards equal-height so the
   bottom row (Speaks + View bio) aligns across all four. The grid uses the base
   .sp-team-grid (homepage) layout; .sp-podiatrist-card--lp only adds flex for
   equal height and the bio-button styling. ----------------------------------- */
/* Equal-height cards: the grid stretches each item; the card fills its item via
   align-self:stretch (not height:100%, which can collapse against an auto-sized
   grid track). Each card is a flex column so the "View bio" button pins to the
   bottom and the four card bottoms line up. */
.sp-lp .sp-team-grid { align-items: stretch; }
.sp-podiatrist-card--lp { display: flex; flex-direction: column; align-self: stretch; }
.sp-podiatrist-card--lp .sp-podiatrist-card__tagline { font-size: 0.85rem; font-style: italic; color: var(--wp--preset--color--primary, #031B4E); margin: 0.45rem 0 0.55rem; line-height: 1.45; }
.sp-podiatrist-card--lp .sp-podiatrist-card__langs { padding-top: 0.4rem; font-size: 0.82rem; color: var(--wp--preset--color--text-muted, #5F6C88); }
/* "View bio" reads as the homepage card's text link, pinned to the bottom so all
   four card bottoms align regardless of how long the interests line wraps. */
.sp-podiatrist-card__bio-btn { margin-top: auto; padding: 0.9rem 0 0; background: none; border: 0; cursor: pointer; font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 600; font-size: 0.85rem; color: var(--wp--preset--color--link, #2B61A8); align-self: center; }
.sp-podiatrist-card__bio-btn:hover { text-decoration: underline; }
/* The card is a static div here (no profile link), so neutralise the homepage
   hover-lift that implies clickability. */
.sp-podiatrist-card--lp:hover { transform: none; border-color: var(--wp--preset--color--border, #D8E2E8); box-shadow: none; }

/* ---- S6: "Book with our team" CTA — a FULL-WIDTH row INSIDE the grid
   (grid-column:1/-1) so it is guaranteed to flow BELOW the card row and can
   never overlap the cards, whatever the card heights or wrap. ---------------- */
.sp-lp-team-cta { grid-column: 1 / -1; text-align: center; margin-top: 1rem; }

/* ---- S6: podiatrist bio modal (reuses the Cliniko overlay pattern) --------
   Real photo + full multi-paragraph bio + Clinical interests + Qualifications.
   The PANEL is capped and clips; the X button is pinned to the panel (always
   reachable); the .sp-lp-bio-scroll inner area scrolls so nothing is clipped. -- */
.sp-lp-bio-panel { height: auto; max-height: 85vh; width: min(95vw, 580px); overflow: hidden; position: relative; display: flex; flex-direction: column; }
.sp-lp-bio-overlay .sp-lp-cliniko-overlay__close { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 3; }
.sp-lp-bio-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; }
.sp-lp-bio-body { padding: 2.5rem 2rem 2rem; text-align: center; }
.sp-lp-bio-photo { width: 130px; height: 130px; border-radius: 50%; overflow: hidden; margin: 0 auto 1.1rem; border: 4px solid var(--wp--preset--color--surface-soft, #F5F9FC); box-shadow: 0 0 0 1px var(--wp--preset--color--border, #D8E2E8); }
.sp-lp-bio-photo .sp-lp-bio__img, .sp-lp-bio-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.sp-lp-bio-name { margin: 0 0 0.25rem; font-size: 1.4rem; color: var(--wp--preset--color--primary, #031B4E); }
.sp-lp-bio-role { margin: 0 0 1.25rem; font-family: var(--wp--preset--font-family--heading), sans-serif; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--accent, #1F6FB5); }
.sp-lp-bio-text { margin: 0 0 0.9rem; color: var(--wp--preset--color--text-muted, #5F6C88); line-height: 1.7; font-size: 0.98rem; text-align: left; }
.sp-lp-bio-subhead { margin: 1.5rem 0 0.7rem; padding-top: 1.25rem; border-top: 1px solid var(--wp--preset--color--border, #D8E2E8); font-family: var(--wp--preset--font-family--heading), sans-serif; font-size: 1rem; color: var(--wp--preset--color--primary, #031B4E); text-align: left; }
.sp-lp-bio-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sp-lp-bio-chip { background: var(--wp--preset--color--surface-soft, #F5F9FC); border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.85rem; color: var(--wp--preset--color--primary, #031B4E); }
.sp-lp-bio-quals { margin: 0; padding-left: 1.2rem; text-align: left; }
.sp-lp-bio-quals li { color: var(--wp--preset--color--text-muted, #5F6C88); line-height: 1.6; font-size: 0.92rem; margin-bottom: 0.4rem; }
.sp-lp-bio-quals li:last-child { margin-bottom: 0; }

/* ---- S8: navy band promo line (podiatrist-in-singapore only) ---------- */
.sp-lp-band__promo { display: inline-block; background: #FFF3CD; color: #7A4A00; border: 1.5px solid #F5B301; border-radius: 999px; padding: 0.5rem 1.25rem; margin: 0 auto 1.5rem; font-weight: 700; font-size: 1rem; }

/* ---- S9: reviews — uses the homepage .sp-marquee / .sp-testimonial markup
   verbatim (see front-page.html Section 9). No custom review-card styling here;
   the cards are visually identical to the homepage testimonials. ------------ */

/* ---- Clinic call link on landing clinic cards ------------------------- */
.sp-clinic-image-card--lp { cursor: default; }
.sp-clinic-image-card--lp:hover { transform: none; }
.sp-clinic-image-card__call:hover { text-decoration: underline; }
.sp-lp-clinic-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin: 0.85rem 0 0; }
.sp-lp-clinic-card__view { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 700; font-size: 0.9rem; color: var(--wp--preset--color--link, #2B61A8); }
.sp-lp-clinic-card__view:hover { text-decoration: underline; }

/* ---- S11: clinic modal (reuses the bio/Cliniko overlay pattern) -----------
   Capped panel that clips; the X button is pinned to the panel; the inner
   .sp-lp-clinic-scroll scrolls so map + reviews never clip. ------------------ */
.sp-lp-clinic-panel { height: auto; max-height: 85vh; width: min(95vw, 640px); overflow: hidden; position: relative; display: flex; flex-direction: column; }
.sp-lp-clinic-overlay .sp-lp-cliniko-overlay__close { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 3; }
.sp-lp-clinic-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; }
.sp-lp-clinic-modal__body { padding: 2.5rem 2rem 2rem; }
.sp-lp-clinic-modal__name { margin: 0 0 0.25rem; font-size: 1.4rem; color: var(--wp--preset--color--primary, #031B4E); }
.sp-lp-clinic-modal__serves { margin: 0 0 0.6rem; font-family: var(--wp--preset--font-family--heading), sans-serif; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wp--preset--color--accent, #1F6FB5); }
.sp-lp-clinic-modal__addr { margin: 0 0 0.35rem; color: var(--wp--preset--color--text, #2c3a4f); line-height: 1.5; font-weight: 600; }
.sp-lp-clinic-modal__meta { margin: 0 0 1.25rem; color: var(--wp--preset--color--text-muted, #5F6C88); line-height: 1.5; font-size: 0.92rem; }
.sp-lp-clinic-map { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 1px solid var(--wp--preset--color--border, #D8E2E8); background: var(--wp--preset--color--surface-soft, #F5F9FC); }
.sp-lp-clinic-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.sp-lp-clinic-modal__cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.25rem 0 0; }
.sp-lp-clinic-modal__cta .wp-block-button__link { font-size: 0.92rem; padding: 0.7rem 1.2rem; }
.sp-lp-clinic-modal__subhead { margin: 1.75rem 0 0.85rem; padding-top: 1.25rem; border-top: 1px solid var(--wp--preset--color--border, #D8E2E8); font-family: var(--wp--preset--font-family--heading), sans-serif; font-size: 1rem; color: var(--wp--preset--color--primary, #031B4E); }
/* Getting here cards (By MRT / By car / By bus / By private hire). */
.sp-lp-clinic-gh { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
.sp-lp-clinic-gh__card { background: var(--wp--preset--color--surface-soft, #F5F9FC); border: 1px solid var(--wp--preset--color--border, #D8E2E8); border-radius: 12px; padding: 1rem 1.1rem; }
.sp-lp-clinic-gh__card h5 { margin: 0 0 0.35rem; font-family: var(--wp--preset--font-family--heading), sans-serif; font-size: 0.95rem; color: var(--wp--preset--color--primary, #031B4E); }
.sp-lp-clinic-gh__card p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--wp--preset--color--text-muted, #5F6C88); }
@media (max-width: 560px) { .sp-lp-clinic-gh { grid-template-columns: 1fr; } }

/* ---- Decorative footer ------------------------------------------------ */
.sp-lp-foot { background: var(--wp--preset--color--primary, #031B4E); color: rgba(255,255,255,0.85); text-align: center; padding: 2.25rem 1.5rem; }
.sp-lp-foot__tag { font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 700; color: #fff; margin: 0 0 0.5rem; }
.sp-lp-foot__ph { margin: 0 0 0.4rem; }
.sp-lp-foot__ph a { color: #fff; font-weight: 600; text-decoration: none; }
.sp-lp-foot__ph a:hover { text-decoration: underline; }
.sp-lp-foot__cr { margin: 0; font-size: 0.85rem; }

/* ---- Cliniko booking overlay (genuinely landing-specific) ------------- */
.sp-lp-cliniko-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; }
.sp-lp-cliniko-overlay[hidden] { display: none; }
.sp-lp-cliniko-overlay__backdrop { position: absolute; inset: 0; background: rgba(3,27,78,0.7); cursor: pointer; }
.sp-lp-cliniko-overlay__panel { position: relative; z-index: 1; width: min(95vw, 860px); height: min(90vh, 760px); background: #fff; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.sp-lp-cliniko-overlay__close { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #fff; border: 1px solid var(--wp--preset--color--border, #D8E2E8); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--wp--preset--color--primary, #031B4E); }
.sp-lp-cliniko-overlay__close:hover { background: var(--wp--preset--color--surface-soft, #F5F9FC); }
/* The official Cliniko embed (?embedded=true) resizes its iframe to full content
   height via postMessage, so the frame is the scroll container and the iframe uses
   its dynamic height (not flex/100%). */
.sp-lp-cliniko-overlay__frame { flex: 1; overflow-y: auto; }
.sp-lp-cliniko-overlay__frame iframe { width: 100%; border: none; display: block; }
/* Logo header + CTA/link footer around the booking iframe (frame CSS above is untouched). */
.sp-lp-cliniko-overlay__header { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 0.8rem 3rem; border-bottom: 1px solid var(--wp--preset--color--border, #D8E2E8); }
.sp-lp-cliniko-overlay__logo { height: 34px; width: auto; display: block; }
.sp-lp-cliniko-overlay__logo-txt { font-family: var(--wp--preset--font-family--heading), sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--wp--preset--color--primary, #031B4E); }
.sp-lp-cliniko-overlay__footer { flex: 0 0 auto; padding: 0.8rem 1rem 1rem; border-top: 1px solid var(--wp--preset--color--border, #D8E2E8); background: #fff; }
.sp-lp-cliniko-overlay__ctas { display: flex; gap: 0.6rem; }
/* Deliberately muted (soft/outline) so these secondary CTAs do not compete with the
   booking platform's own action buttons. */
.sp-lp-cliniko-overlay__cta { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.65rem 0.8rem; border-radius: 10px; font-weight: 600; font-size: 0.92rem; text-decoration: none; line-height: 1; background: var(--wp--preset--color--surface-soft, #F5F9FC); border: 1px solid var(--wp--preset--color--border, #D8E2E8); color: var(--wp--preset--color--text-muted, #5F6C88); }
.sp-lp-cliniko-overlay__cta:hover { background: #edf2f6; color: var(--wp--preset--color--primary, #031B4E); }
.sp-lp-cliniko-overlay__cta--wa svg { color: #57a978; } /* faint green hint so WhatsApp stays recognisable */
.sp-lp-cliniko-overlay__links { margin: 0 0 0.7rem; text-align: center; font-size: 0.9rem; line-height: 1.5; color: var(--wp--preset--color--text-muted, #5F6C88); }
.sp-lp-cliniko-overlay__links a { color: var(--wp--preset--color--primary, #031B4E); font-weight: 600; text-decoration: underline; }
.sp-lp-cliniko-overlay__links span { margin: 0 0.35rem; color: var(--wp--preset--color--border, #D8E2E8); }