/**
 * GEO Page template styles.
 *
 * Loaded only for pages using templates/page-geo.php (see includes/setup.php).
 *
 * Section-level layout for the GEO page, plus the shared heading/badge classes
 * that the ported geo-* blocks render. Each geo block also ships its own
 * block.css (geo-quick-links-card, geo-review-card, geo-faq-highlights), which
 * Genesis Custom Blocks enqueues from the block folder — those are not
 * duplicated here.
 */

/* ## Shared heading group
--------------------------------------------- */

/* Rendered by the geo-faq-highlights block, and reused on section intros so
   every section heading on the page shares one treatment. */

.geo-content-heading {
    margin-bottom: 3rem;
}

.geo-content-heading.has-text-align-left {
    text-align: left;
}

.geo-overline span {
    display: inline-block;
    color: var(--jmg-kelly-green);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.8rem;
}

.geo-heading h2 {
    margin: 0;
    color: var(--jmg-dark-green);
}

/* ## Hero
--------------------------------------------- */

.geo-hero-section {
    background-color: var(--jmg-dark-green);
    color: #fff;
}

.geo-hero-section h1,
.geo-hero-section p {
    color: #fff;
}

.geo-hero-section > .gb-layout-column-wrap {
    align-items: center;
}

.geo-hero-section .wp-block-image img {
    border-radius: 24px;
    aspect-ratio: 1 / 1;
    height: auto;
    width: 100%;
    object-fit: cover;
    object-position: center;
    box-shadow: 0 25px 50px rgba(3, 55, 32, 0.35);
}

/* Pill badge above the H1 (geo-badge block, "pill" variant). The hero column is
   a flex column, so its default align-items:stretch would force the pill to
   full width — pin it to its content width instead. */
.geo-hero-badge {
    display: inline-flex;
    align-self: flex-start;
    width: fit-content;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 8px 16px !important;
    border-radius: 999px;
    margin-bottom: 16px;
}

/* Corner badge over the hero image (geo-badge block, "card" variant). Rendered
   as a normal flow element after the image and pulled up over its bottom-left
   corner, since the hero markup has no positioned wrapper to anchor to. */
.geo-hero-image-badge {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 12px;
    padding: 16px 20px !important;
    box-shadow: 0 15px 35px rgba(3, 55, 32, 0.25);
    max-width: 260px;
    margin: -70px 0 0 24px;
}

.geo-hero-image-badge--icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(13, 152, 91, 0.12);
    color: var(--jmg-kelly-green);
    font-size: 18px;
}

.geo-hero-image-badge--text strong {
    display: block;
    font-size: 14px;
    color: var(--jmg-dark-green);
}

.geo-hero-image-badge--text span {
    display: block;
    font-size: 13px;
    color: #85888f;
}

@media (max-width: 767px) {
    .geo-hero-image-badge {
        margin: -50px auto 0;
    }
}

/* ## Service section (copy + stacked cards)
--------------------------------------------- */

/* The quick-links card and the review card stack in the right column; the
   quick-links card's own margin-bottom supplies the gap between them, so only
   the top alignment of the two columns is needed here. */
.geo-quick-links-section > .gb-layout-column-wrap {
    align-items: start;
}

/* ## Card sections (Areas We Serve, Coverage Options)
--------------------------------------------- */

/* The cards themselves are the theme's native .cards-section /
   .cards-main-col / .card-inner pattern (style.css ~2700), so they inherit
   the site's card language — white card, 1px #D0D0D0 border, 16px radius,
   icon in a solid green circle. Only the equal-height behaviour is added
   here. */
.geo-neighborhoods-section .cards-main-col > .gb-layout-column-wrap,
.geo-coverage-section .cards-main-col > .gb-layout-column-wrap {
    align-items: stretch;
}

.geo-neighborhoods-section .cards-main-col .card-inner,
.geo-neighborhoods-section .cards-main-col .gb-block-layout-column-inner,
.geo-coverage-section .cards-main-col .card-inner,
.geo-coverage-section .cards-main-col .gb-block-layout-column-inner {
    height: 100%;
}

.geo-neighborhoods-section .cards-main-col .card-inner,
.geo-coverage-section .cards-main-col .card-inner {
    box-shadow: 0 10px 30px rgba(3, 55, 32, 0.06);
}

.geo-neighborhoods-section .cards-main-col .card-inner p,
.geo-coverage-section .cards-main-col .card-inner p {
    margin-bottom: 0;
}

/* ## Photo sections
--------------------------------------------- */

/* Plain edge-to-edge photos read as unfinished next to the rest of the page's
   rounded, shadowed card language. Give them the same treatment, and a fixed
   aspect ratio so photos of differing original dimensions sit the same height. */
.geo-trust-section .wp-block-image img,
.geo-commercial-section .wp-block-image img,
.geo-claims-section .wp-block-image img {
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(3, 55, 32, 0.14);
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}

/* The theme's default list font-size is sized for full-width page copy, not a
   compact bullet list in a half-width column beside a photo. */
.geo-trust-section li,
.geo-commercial-section li,
.geo-claims-section li {
    font-size: 18px;
    line-height: 1.6;
}

/* ## FAQ + map
--------------------------------------------- */

/* .google-map-embed's own height:100% has no defined-height ancestor to
   resolve against here, so it collapses to the iframe's raw height attribute.
   Give it an explicit height and match the page's rounded card look. */
.geo-faq-map-section .google-map-embed {
    display: flex;
    height: 460px;
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(3, 55, 32, 0.08);
    overflow: hidden;
}

/* The location-map block nests the iframe inside .google-map-embed--wrapper,
   which the theme styles as display:flex with no height (style.css ~10175),
   and pins the iframe to a fixed 450px (~10179). A percentage height on the
   iframe alone therefore has no resolved ancestor height to size against, so
   the map collapses to a fraction of this container. Giving the wrapper the
   container's full size is how the theme's own .areas-served-section solves
   it (~10064); the iframe then fills it. */
.geo-faq-map-section .google-map-embed--wrapper {
    display: flex;
    width: 100%;
    height: 100%;
}

.geo-faq-map-section .google-map-embed--wrapper iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 860px) {
    .geo-faq-map-section .google-map-embed {
        height: 320px;
    }
}

/* ## Final CTA band
--------------------------------------------- */

.geo-final-cta {
    background-color: var(--jmg-emerald-green);
}

.geo-final-cta h2,
.geo-final-cta p {
    color: #fff;
}

.geo-final-cta .geo-heading h2 {
    color: #fff;
}

.geo-final-cta .geo-overline span {
    color: rgba(255, 255, 255, 0.85);
}

/* The site-wide a.button.white:hover sets background:transparent, which is
   meant for buttons on light backgrounds. On this green band that leaves dark
   text on green with poor contrast — keep it solid and readable here. */
.geo-final-cta a.button.white:hover {
    background: #fff;
    color: var(--jmg-dark-green);
    border-color: #fff;
    filter: brightness(0.95);
}

/* The button block's wrapper is display:flex with width:100% (style.css ~878),
   so consecutive buttons stack full-width. Wrapping the pair in a flex row and
   letting each size to its content puts them side by side without changing
   that rule for buttons elsewhere on the site. */
.geo-cta-buttons {
    margin-top: 2rem;
}

/* WordPress wraps group children in .wp-block-group__inner-container, so the
   buttons are grandchildren — flex both levels so the row works whether or not
   that wrapper is emitted. */
.geo-cta-buttons,
.geo-cta-buttons > .wp-block-group__inner-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

.geo-cta-buttons .custom-button {
    width: auto;
}