/* ==========================================================================
   About Page Styles
   ========================================================================== */

/* ==========================================================================
   Shared: Background-image sections
   Uses a ::before pseudo-element to hold the background image, allowing
   blur and overlay effects without affecting content readability.
   Background image URL is passed via --section-bg-image CSS custom property
   set inline from PHP (bridging dynamic theme asset URIs into CSS).
   ========================================================================== */
.section--bg-image {
    position: relative;
    overflow: hidden;
}

/* Background image layer — uses CSS custom property for dynamic URLs */
.section--bg-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--section-bg-image) center / cover no-repeat;
    z-index: 0;
}

/* Blur modifier — applied to sections that need a soft-focus background */
.section--bg-blur::before {
    filter: blur(6px);
    /* Prevent blur edge artifacts by scaling slightly beyond container */
    transform: scale(1.05);
}

.section__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.40);
    z-index: 1;
}

.section--bg-image .container {
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   Shared: Centered content block
   ========================================================================== */
.about-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    gap: 1.6rem;
}

.about-centered__title {
    font-size: 6.0rem;
    font-weight: var(--fw-medium);
    line-height: 1.2;
    margin-bottom: 0;
}

.about-centered__title--light {
    color: var(--color-white);
}

.about-centered__text {
    font-size: 2.0rem;
    line-height: 1.5;
    margin-bottom: 0;
}

.about-centered__text--light {
    color: var(--color-white);
}

/* ==========================================================================
   Shared: Two-column split
   ========================================================================== */
.about-split {
    display: flex;
    flex-direction: column;
    gap: 4.0rem;
}

.about-split__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.about-split__title {
    font-size: 6.0rem;
    font-weight: var(--fw-medium);
    line-height: 1.2;
    margin-bottom: 0;
}

.about-split__title--light {
    color: var(--color-white);
}

.about-split__text {
    font-size: 2.0rem;
    line-height: 1.5;
    color: var(--color-text-dark);
    margin-bottom: 0;
}

.about-split__text--light {
    color: var(--color-white);
}

.about-split__image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--border-radius);
}

@media (min-width: 1024px) {
    .about-split {
        flex-direction: row;
        gap: 8.0rem;
        align-items: center;
    }

    .about-split--top {
        align-items: flex-start;
    }

    .about-split__image {
        flex: 1;
        max-width: 50%;
        height: 640px;
    }
}

/* ==========================================================================
   Section: About Hero (Welcome)
   Converted from inline image to full-bleed blurred background.
   Text uses --light variants for contrast against dark overlay.
   ========================================================================== */
.section--about-hero {
    padding-top: 11.2rem;
    padding-bottom: 11.2rem;
    /* Ensure minimum height for visual impact on large screens */
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.section--about-hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
}

.about-hero__content {
    max-width: 768px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
}

.about-hero__title {
    font-size: 5.6rem;
    font-weight: var(--fw-medium);
    line-height: 1.1;
    color: var(--color-text-dark);
    margin-bottom: 0;
}

/* Light variant for hero title over blurred background */
.about-hero__title--light {
    color: var(--color-white);
}

.about-hero__description {
    font-size: 2.0rem;
    line-height: 1.5;
    color: var(--color-text-dark);
    margin-bottom: 0;
}

/* Light variant for hero description over blurred background */
.about-hero__description--light {
    color: var(--color-white);
}

@media (min-width: 1024px) {
    .about-hero__title {
        font-size: 8.4rem;
        line-height: 1.1;
    }
}

/* ==========================================================================
   Section: Origin Story (bg-image)
   ========================================================================== */
.section--origin {
    padding-top: 11.2rem;
    padding-bottom: 11.2rem;
}

.section--origin .about-centered__title {
    font-size: 5.6rem;
}

@media (min-width: 1024px) {
    .section--origin .about-centered__title {
        font-size: 8.4rem;
        line-height: 1.1;
    }
}

/* ==========================================================================
   Section: Why We Exist (bg-image)
   ========================================================================== */
.section--why-exist {
    padding-top: 11.2rem;
    padding-bottom: 11.2rem;
}

.section--why-exist .about-centered__title {
    font-size: 5.6rem;
}

@media (min-width: 1024px) {
    .section--why-exist .about-centered__title {
        font-size: 8.4rem;
        line-height: 1.1;
    }
}

/* ==========================================================================
   Section: Core Values
   Three-column card layout with icon, bold title, and description.
   ========================================================================== */
.section--values {
    padding-top: 11.2rem;
    padding-bottom: 11.2rem;
}

.section--values .about-centered {
    margin-bottom: 6.4rem;
}

.about-values__cards {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

.about-values__card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.6rem;
}

.about-values__card-icon {
    width: 4.8rem;
    height: 4.8rem;
    color: var(--color-text-dark);
    flex-shrink: 0;
}

.about-values__card-title {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: var(--fw-bold);
    line-height: 1.4;
    color: var(--color-text-dark);
    margin-bottom: 0;
}

.about-values__card-text {
    font-size: 1.8rem;
    line-height: 1.5;
    color: var(--color-text-dark);
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .about-values__cards {
        flex-direction: row;
        gap: 3.2rem;
    }
}

/* ==========================================================================
   Section: Who We Serve
   ========================================================================== */
.section--serve {
    padding-top: 11.2rem;
    padding-bottom: 11.2rem;
}

.about-serve__cards {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    padding: 0.8rem 0;
}

.about-serve__card {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.about-serve__card-icon {
    width: 4.8rem;
    height: 4.8rem;
    flex-shrink: 0;
    color: var(--color-text-dark);
}

.about-serve__card-title {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: var(--fw-medium);
    line-height: 1.4;
    color: var(--color-text-dark);
    margin-bottom: 0;
}

.about-serve__card-text {
    font-size: 1.8rem;
    line-height: 1.5;
    color: var(--color-text-dark);
    margin-bottom: 0;
}

@media (min-width: 640px) {
    .about-serve__cards {
        flex-direction: row;
        gap: 2.4rem;
    }

    .about-serve__card {
        flex: 1;
    }
}

/* ==========================================================================
   Section: Empowerment (bg-image, split)
   ========================================================================== */
.section--empowerment {
    padding-top: 11.2rem;
    padding-bottom: 11.2rem;
}

/* ==========================================================================
   Section: Service Panels
   ========================================================================== */
.section--service-panels {
    padding-top: 0;
    padding-bottom: 0;
}

.service-panel {
    border-top: 1px solid rgba(9, 9, 8, 0.15);
}

.service-panel .container {
    display: flex;
    flex-direction: column;
    gap: 4.8rem;
    padding-bottom: 11.2rem;
}

.service-panel__tab {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    height: 6.4rem;
}

.service-panel__number,
.service-panel__tab-title {
    font-size: 2.0rem;
    font-weight: var(--fw-semibold);
    line-height: 1.5;
    color: var(--color-text-dark);
}

.service-panel__body {
    display: flex;
    flex-direction: column;
    gap: 4.0rem;
}

.service-panel__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.service-panel__title {
    font-size: 4.0rem;
    font-weight: var(--fw-medium);
    line-height: 1.2;
    margin-bottom: 0;
}

.service-panel__text {
    font-size: 2.0rem;
    line-height: 1.5;
    margin-bottom: 0;
}

.service-panel__image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--border-radius);
}

@media (min-width: 1024px) {
    .service-panel__body {
        flex-direction: row;
        gap: 8.0rem;
        align-items: center;
    }

    .service-panel__title {
        font-size: 6.0rem;
        line-height: 1.2;
    }

    .service-panel__image {
        flex: 1;
        max-width: 50%;
        height: 600px;
    }
}

/* ==========================================================================
   Section: Experience the Difference
   ========================================================================== */
.section--difference {
    padding-top: 11.2rem;
    padding-bottom: 11.2rem;
}

.section--difference .about-centered {
    margin-bottom: 8.0rem;
}

.difference__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
}

.difference__card {
    background: var(--color-white);
    border: 1px solid rgba(9, 9, 8, 0.15);
    border-radius: var(--border-radius);
    /* Padding/gap tightened slightly so 8 cards (4 columns on desktop) read evenly without feeling cramped. */
    padding: 2.8rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    /* Lift + border glow on hover — cubic-bezier gives a snappy feel matching the brand's energetic tone */
    transition:
        transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.28s ease,
        border-color 0.28s ease;
    will-change: transform;
}

.difference__card:hover,
.difference__card:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(9, 9, 8, 0.10);
    border-color: rgba(9, 9, 8, 0.30);
}

.difference__card-icon {
    width: 3.6rem;
    height: 3.6rem;
    color: var(--color-text-dark);
    flex-shrink: 0;
    /* Icon scales up slightly and rotates a touch on card hover for added liveliness */
    transition:
        transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
        color 0.22s ease;
}

.difference__card:hover .difference__card-icon,
.difference__card:focus-within .difference__card-icon {
    transform: scale(1.18) rotate(-6deg);
}

.difference__card-title {
    font-family: var(--font-heading);
    font-size: 2.0rem;
    font-weight: var(--fw-medium);
    line-height: 1.25;
    margin-bottom: 0;
}

.difference__card-text {
    font-size: 1.5rem;
    line-height: 1.55;
    margin-bottom: 0;
}

/* Respect reduced-motion preference — keep layout transitions but remove movement */
@media (prefers-reduced-motion: reduce) {
    .difference__card {
        transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .difference__card:hover,
    .difference__card:focus-within {
        transform: none;
    }

    .difference__card-icon {
        transition: none;
    }

    .difference__card:hover .difference__card-icon,
    .difference__card:focus-within .difference__card-icon {
        transform: none;
    }
}

/* Tablet: 2 columns */
@media (min-width: 640px) {
    .difference__cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: 4 columns — fits 8 cards in two clean rows of four without dwarfing each card. */
@media (min-width: 1024px) {
    .difference__cards {
        grid-template-columns: repeat(4, 1fr);
        gap: 2.0rem;
    }

    .difference__card-title {
        font-size: 2.0rem;
        line-height: 1.2;
    }
}

/* ==========================================================================
   Section: Vision for the Future
   ========================================================================== */
.section--vision {
    background-color: #525252;
    color: var(--color-white);
    padding-top: 11.2rem;
    padding-bottom: 11.2rem;
}

.section--vision h2 {
    color: var(--color-white);
}

.section--vision .about-split__title {
    font-size: 4.8rem;
    line-height: 1.2;
}

/* ==========================================================================
   Section: Join Us (bg-image)
   ========================================================================== */
.section--join {
    padding-top: 11.2rem;
    padding-bottom: 11.2rem;
}

/* ==========================================================================
   Section: Getting in Touch
   ========================================================================== */
.section--touch {
    padding-top: 11.2rem;
    padding-bottom: 11.2rem;
}

.section--touch .container {
    display: flex;
    flex-direction: column;
    gap: 8.0rem;
}

.touch__cards {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    padding: 0.8rem 0;
}

.touch__card {
    display: flex;
    align-items: flex-start;
    gap: 1.6rem;
}

.touch__card-icon {
    width: 3.2rem;
    height: 3.2rem;
    flex-shrink: 0;
    color: var(--color-text-dark);
}

.touch__card-body {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.touch__card-title {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: var(--fw-medium);
    line-height: 1.4;
    margin-bottom: 0;
}

.touch__card-text {
    font-size: 1.8rem;
    line-height: 1.5;
    margin-bottom: 0;
}

.about-touch__image {
    width: 100%;
    height: auto;
    max-height: 738px;
    object-fit: cover;
    border-radius: var(--border-radius);
}

@media (min-width: 640px) {
    .touch__cards {
        flex-direction: row;
        gap: 2.4rem;
    }
}

/* ==========================================================================
   Section: Reach Out
   ========================================================================== */
.section--reach {
    padding-top: 11.2rem;
    padding-bottom: 11.2rem;
}

.section--reach .container {
    display: flex;
    flex-direction: column;
    gap: 8.0rem;
}

.reach__contact-info {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    padding: 0.8rem 0;
}

.reach__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1.6rem;
}

.reach__contact-icon {
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    color: var(--color-text-dark);
    margin-top: 0.4rem;
}

.reach__contact-title {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: var(--fw-medium);
    line-height: 1.4;
    margin-bottom: 0.8rem;
}

.reach__contact-link {
    font-size: 1.8rem;
    line-height: 1.5;
    color: var(--color-text-dark);
    text-decoration: underline;
}

.reach__contact-link:hover {
    color: var(--color-sage);
}

.reach__contact-address {
    font-size: 1.8rem;
    line-height: 1.5;
    color: var(--color-text-dark);
    margin-bottom: 0;
}

/* Book Now CTA placed under the address — small top margin keeps it visually grouped with the contact block. */
.reach__actions {
    margin-top: 2.4rem;
}

.reach__map {
    width: 100%;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.reach__map iframe {
    display: block;
    width: 100%;
    height: 50rem;
    border: 0;
    border-radius: var(--border-radius);
}

@media (min-width: 1024px) {
    .reach__contact-info {
        width: 500px;
        flex-shrink: 0;
    }

    .reach__map iframe {
        height: 72rem;
    }
}

/* ==========================================================================
   Section: Closing
   ========================================================================== */
.section--closing {
    padding-top: 11.2rem;
    padding-bottom: 11.2rem;
}

.closing__card {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding: 0.8rem 0;
}

.closing__card-title {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: var(--fw-medium);
    line-height: 1.4;
    color: var(--color-white);
    margin-bottom: 0;
}

.closing__card-text {
    font-size: 1.8rem;
    line-height: 1.5;
    color: var(--color-white);
    margin-bottom: 0;
}

/* ==========================================================================
   Shared: Section actions & link-light variant
   ========================================================================== */
.section__actions {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    flex-wrap: wrap;
    margin-top: 1.6rem;
}

.section__actions--center {
    justify-content: center;
}

.btn--link-light {
    color: var(--color-white);
}

.btn--link-light:hover,
.btn--link-light:focus {
    color: rgba(255, 255, 255, 0.7);
}

.section__label--light {
    color: var(--color-white);
}

/* ==========================================================================
   Responsive: Mobile adjustments
   ========================================================================== */
@media (max-width: 767px) {
    .about-hero__title {
        font-size: 4.0rem;
    }

    .about-centered__title,
    .about-split__title {
        font-size: 3.6rem;
    }

    .section--origin .about-centered__title,
    .section--why-exist .about-centered__title {
        font-size: 4.0rem;
    }

    .service-panel__title {
        font-size: 3.2rem;
    }

    .difference__card-title {
        font-size: 2.2rem;
    }

    .section--vision .about-split__title {
        font-size: 3.2rem;
    }

    .difference__card {
        padding: 2.4rem;
    }
}


/* ==========================================================================
   Section: Why Dr. Kelly Became a Chiropractor (personal-story)
   --------------------------------------------------------------------------
   Built on top of the shared `about-split` two-column layout so the portrait
   matches every other photo on the page (rectangular, rounded, 640px tall
   on desktop). The `why-kelly__*` namespace only adds the personal-story
   flourishes: decorative star badge, lead sentence, accent paragraph, and
   a soft hover lift. Animations respect prefers-reduced-motion.
   ========================================================================== */
.section--why-kelly {
    padding-top: 11.2rem;
    padding-bottom: 11.2rem;
}

/* Slight tightening of the split gap so the personal story feels intimate */
.why-kelly__split {
    gap: 4.8rem;
}

/* ---- Media column ----
   Constrained portrait (max ~480px) keeps the personal-story photo intimate
   instead of competing with the narrative. Subtle fade-in on first paint. */
.why-kelly__media {
    position: relative;
    width: 100%;
    max-width: 480px;
    animation: whyKellyFadeIn 0.7s ease-out both;
}

/* Self-contained image styles — matches the other About photos:
   rounded corners (var(--border-radius)) + soft layered shadow + hover lift.
   `!important` is intentionally avoided; we just make the selector specific
   enough to win against any generic `img` resets. */
.why-kelly__image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 5 / 6;
    border-radius: var(--border-radius);
    overflow: hidden; /* belt-and-suspenders for any future inner overlays */
    box-shadow:
        0 24px 60px rgba(9, 9, 8, 0.18),
        0 4px 14px rgba(9, 9, 8, 0.08);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}

.why-kelly__media:hover .why-kelly__image {
    transform: translateY(-4px) scale(1.01);
    box-shadow:
        0 32px 72px rgba(9, 9, 8, 0.22),
        0 6px 18px rgba(9, 9, 8, 0.10);
}

/* ---- Content column ----
   Inherits .about-split__content flex behavior; we only tune typography. */
.why-kelly__content {
    gap: 1.6rem;
}

.why-kelly__title {
    font-family: var(--font-heading);
    font-size: 4.0rem;
    font-weight: var(--fw-medium);
    line-height: 1.2;
    color: var(--color-text-dark);
    margin: 0;
}

.why-kelly__lead {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    line-height: 1.35;
    font-weight: var(--fw-medium);
    color: var(--color-text-dark);
    margin: 0;
}

.why-kelly__text {
    font-size: 1.8rem;
    line-height: 1.6;
    color: var(--color-text-dark);
    margin: 0;
}

/* Accent paragraph — pulled forward with left bar + soft tint to close the story.
   Uses white card on the warm scheme-3 background for clear separation. */
.why-kelly__text--accent {
    padding: 1.6rem 2.0rem;
    background: var(--color-white);
    border-left: 3px solid var(--color-text-dark);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    font-weight: var(--fw-medium);
}

@media (min-width: 1024px) {
    .why-kelly__split {
        gap: 8.0rem;
    }

    /* Lock the media column to ~42% so the portrait keeps its intimate scale
       instead of stretching to the shared about-split 50%/640px treatment. */
    .why-kelly__media {
        flex: 0 0 42%;
        max-width: 42%;
    }

    .why-kelly__title {
        font-size: 5.6rem;
        line-height: 1.15;
    }
}

/* ---- Animations ---- */
@keyframes whyKellyFadeIn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .why-kelly__media,
    .why-kelly__image {
        animation: none;
        transition: none;
    }
    .why-kelly__media:hover .why-kelly__image {
        transform: none;
    }
}