/* ---------------------------------------------------------------------------
   Why book with us, to the approved mock-up: a hero with a booking panel, the
   promise cards, the two-column comparison, the after-booking timeline, the
   patient questions, and a closing invitation.

   Colours come from the shared --care-* and --sihatuna-* tokens so the page
   follows the visitor's theme; the mock-up's few colours the tokens do not
   name — the comparison's refusal red — are set here for both themes. Every
   offset is logical, so the Arabic page mirrors itself, and the comparison's
   column rule uses border-inline-start for the same reason.
   --------------------------------------------------------------------------- */
.why-page {
    /* Washes only, no opaque base: the body already carries the theme colour
       and the site's medical motif, and an opaque layer here would paint the
       motif out on this page while every other page shows it. */
    background:
        radial-gradient(circle at 90% 5%,
            color-mix(in srgb, var(--care-primary-strong, #08765d) 8%, transparent),
            transparent 26%),
        radial-gradient(circle at 8% 8%,
            color-mix(in srgb, var(--care-secondary, #4aa0d8) 8%, transparent),
            transparent 24%);

    --why-danger: #a04646;
    --why-danger-soft: #fff1f0;
}

[data-bs-theme="dark"] .why-page {
    --why-danger: #ffb6b2;
    --why-danger-soft: rgba(160, 70, 70, 0.18);
}

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

.why-hero {
    position: relative;
    overflow: hidden;
    padding: 46px 0 34px;
    border-block-end: 1px solid var(--care-border, #e4ece8);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--care-card, #fff) 84%, transparent),
        color-mix(in srgb, var(--care-surface, #edf4fa) 90%, transparent));
}

/* The landmarks behind the headline, as on the directory and content heroes:
   the wordmark-free crop, faded and masked so it dissolves before the booking
   panel. It sits on the inline start — behind the copy in both directions —
   and hangs far above the section so the wordmark across the artwork's top is
   left to overflow:hidden. Flipping the LTR layer flips its mask with it, so
   one gradient serves both directions. */
.why-hero::before {
    content: "";
    position: absolute;
    inset-block: -14rem -40px;
    inset-inline-start: -40px;
    width: min(46vw, 620px);
    opacity: 0.15;
    background-image: url("/images/home/sihatuna-home-landmarks.webp");
    background-size: cover;
    background-position: center bottom;
    filter: saturate(0.78);
    mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
    pointer-events: none;
}

[dir="ltr"] .why-hero::before {
    transform: scaleX(-1);
}

[data-bs-theme="dark"] .why-hero::before {
    opacity: 0.10;
    filter: saturate(0.65) brightness(0.72);
}

.why-hero > .container {
    position: relative;
    z-index: 1;
}

.why-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--care-muted, #55635f);
    font-size: 0.82rem;
    font-weight: 700;
}

.why-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.why-breadcrumb a:hover {
    color: var(--care-primary-dark, #055744);
}

.why-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
    gap: 36px;
    align-items: stretch;
    margin-block-start: 16px;
}

.why-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-block-start: 22px;
    color: var(--care-primary-dark, #055744);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.why-eyebrow::before {
    content: "";
    width: 30px;
    height: 2px;
    border-radius: 999px;
    background: var(--sihatuna-gold, #c49a37);
}

.why-hero h1 {
    max-width: 800px;
    margin: 12px 0 0;
    color: var(--care-ink, #163e5f);
    font-size: clamp(2.1rem, 5vw, 3.6rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
}

.why-hero-description {
    max-width: 710px;
    margin: 15px 0 0;
    color: var(--care-muted, #55635f);
    font-size: 1.03rem;
    line-height: 1.78;
}

.why-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block-start: 24px;
}

.why-page .btn {
    min-height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ----- The booking panel -------------------------------------------------- */

.why-panel {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--care-border, #e4ece8);
    border-radius: 28px;
    background: var(--care-card, #fff);
    box-shadow: var(--sihatuna-shadow-md, 0 14px 40px rgba(31, 92, 132, .09));
}

.why-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block-end: 12px;
    border-block-end: 1px solid var(--care-border, #e4ece8);
}

.why-panel-title h2 {
    margin: 0;
    color: var(--care-ink, #163e5f);
    font-size: 1rem;
}

.why-panel-title span {
    color: var(--care-primary-dark, #055744);
    font-size: 0.74rem;
    font-weight: 800;
}

.why-panel-line {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    padding: 13px;
    border: 1px solid var(--care-border, #e4ece8);
    border-radius: 18px;
    background: var(--care-surface, #edf4fa);
}

.why-panel-line p {
    margin: 0;
}

/* Scoped to the paragraph: the numbered dot is also a span in this grid, and
   an unscoped span rule would win over its own styling on specificity. */
.why-panel-line p strong {
    display: block;
    color: var(--care-ink, #163e5f);
    font-size: 0.9rem;
}

.why-panel-line p span {
    display: block;
    margin-block-start: 3px;
    color: var(--care-muted, #55635f);
    font-size: 0.8rem;
    line-height: 1.45;
}

.why-line-dot {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg,
        var(--care-primary-dark, #055744),
        var(--care-primary-strong, #08765d));
    font-weight: 800;
    font-size: 0.78rem;
}

.why-panel-note {
    margin: 0;
    padding: 12px 13px;
    border-radius: 16px;
    color: var(--care-primary-dark, #055744);
    background: color-mix(in srgb, var(--care-primary-strong, #08765d) 9%, var(--care-card, #fff));
    font-size: 0.82rem;
    line-height: 1.55;
    font-weight: 700;
}

/* ----- Sections ----------------------------------------------------------- */

.why-section {
    padding: 40px 0;
}

.why-section-compact {
    padding-block-start: 26px;
}

.why-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 22px;
    margin-block-end: 18px;
}

.why-section-heading h2 {
    margin: 0;
    color: var(--care-ink, #163e5f);
    font-size: clamp(1.55rem, 3vw, 2.25rem);
    letter-spacing: -0.02em;
}

.why-section-heading p {
    max-width: 560px;
    margin: 0;
    color: var(--care-muted, #55635f);
    line-height: 1.7;
}

/* ----- Promise cards ------------------------------------------------------ */

.why-promise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 14px;
}

.why-promise-card {
    min-height: 190px;
    padding: 20px;
    border: 1px solid var(--care-border, #e4ece8);
    border-radius: 22px;
    background: var(--care-card, #fff);
    box-shadow: var(--sihatuna-shadow-sm, 0 6px 20px rgba(31, 92, 132, .07));
}

.why-promise-card small {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-block-end: 16px;
    padding: 6px 9px;
    border-radius: 999px;
    color: var(--care-primary-dark, #055744);
    background: color-mix(in srgb, var(--care-primary-strong, #08765d) 9%, var(--care-card, #fff));
    font-size: 0.7rem;
    font-weight: 800;
}

.why-promise-card small .isax {
    font-size: 0.85rem;
}

.why-promise-card h3 {
    margin: 0;
    color: var(--care-ink, #163e5f);
    font-size: 1.02rem;
}

.why-promise-card p {
    margin: 9px 0 0;
    color: var(--care-muted, #55635f);
    line-height: 1.65;
    font-size: 0.88rem;
}

/* ----- Comparison --------------------------------------------------------- */

.why-comparison {
    overflow: hidden;
    border: 1px solid var(--care-border, #e4ece8);
    border-radius: 28px;
    background: var(--care-card, #fff);
    box-shadow: var(--sihatuna-shadow-md, 0 14px 40px rgba(31, 92, 132, .09));
    /* The compare-the-experience link jumps here; keep the heading clear of
       the sticky site header. */
    scroll-margin-block-start: 6rem;
}

.why-comparison-head,
.why-comparison-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.why-comparison-head {
    background: linear-gradient(135deg,
        var(--care-surface, #edf4fa),
        color-mix(in srgb, var(--care-primary-strong, #08765d) 8%, var(--care-card, #fff)));
    border-block-end: 1px solid var(--care-border, #e4ece8);
}

.why-comparison-head > div,
.why-comparison-row > div {
    padding: 18px 20px;
}

.why-comparison-head h3 {
    margin: 0;
    color: var(--care-ink, #163e5f);
    font-size: 1rem;
}

.why-comparison-head p {
    margin: 5px 0 0;
    color: var(--care-muted, #55635f);
    font-size: 0.82rem;
}

.why-comparison-row {
    border-block-end: 1px solid var(--care-border, #e4ece8);
}

.why-comparison-row:last-child {
    border-block-end: 0;
}

.why-comparison-row > div + div {
    border-inline-start: 1px solid var(--care-border, #e4ece8);
}

.why-comparison-row strong {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--care-ink, #163e5f);
    font-size: 0.93rem;
}

.why-comparison-row p {
    margin: 7px 0 0;
    color: var(--care-muted, #55635f);
    line-height: 1.6;
    font-size: 0.86rem;
}

/* The marks accompany words on both sides, so colour never stands alone. */
.why-mark-bad,
.why-mark-good {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    flex: 0 0 22px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.78rem;
}

.why-mark-bad {
    color: var(--why-danger);
    background: var(--why-danger-soft);
}

.why-mark-good {
    color: #fff;
    background: var(--care-primary-strong, #08765d);
}

/* ----- After booking ------------------------------------------------------ */

.why-after {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 18px;
}

.why-after-card {
    padding: 22px;
    border: 1px solid var(--care-border, #e4ece8);
    border-radius: 26px;
    background: var(--care-card, #fff);
    box-shadow: var(--sihatuna-shadow-md, 0 14px 40px rgba(31, 92, 132, .09));
    align-self: start;
}

.why-after-card h3 {
    margin: 0;
    color: var(--care-ink, #163e5f);
    font-size: 1.08rem;
}

.why-after-card p {
    margin: 10px 0 0;
    color: var(--care-muted, #55635f);
    line-height: 1.7;
    font-size: 0.9rem;
}

.why-timeline {
    display: grid;
    gap: 12px;
}

.why-timeline-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 13px;
    padding: 18px;
    border: 1px solid var(--care-border, #e4ece8);
    border-radius: 22px;
    background: var(--care-card, #fff);
    box-shadow: var(--sihatuna-shadow-sm, 0 6px 20px rgba(31, 92, 132, .07));
}

.why-timeline-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--care-primary-dark, #055744);
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--care-primary-strong, #08765d) 9%, var(--care-card, #fff)),
        color-mix(in srgb, var(--care-secondary, #4aa0d8) 12%, var(--care-card, #fff)));
    font-weight: 800;
}

.why-timeline-item h3 {
    margin: 0;
    color: var(--care-ink, #163e5f);
    font-size: 1rem;
}

.why-timeline-item p {
    margin: 6px 0 0;
    color: var(--care-muted, #55635f);
    line-height: 1.65;
    font-size: 0.88rem;
}

/* ----- Patient questions -------------------------------------------------- */

.why-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.why-faq-item {
    padding: 20px;
    border: 1px solid var(--care-border, #e4ece8);
    border-radius: 22px;
    background: var(--care-card, #fff);
    box-shadow: var(--sihatuna-shadow-sm, 0 6px 20px rgba(31, 92, 132, .07));
}

.why-faq-item h3 {
    margin: 0;
    color: var(--care-ink, #163e5f);
    font-size: 1rem;
}

.why-faq-item p {
    margin: 9px 0 0;
    color: var(--care-muted, #55635f);
    line-height: 1.65;
    font-size: 0.9rem;
}

/* ----- Closing invitation ------------------------------------------------- */

.why-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin: 4px 0 46px;
    padding: 26px;
    border: 1px solid var(--care-border, #e4ece8);
    border-radius: 28px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--care-secondary, #4aa0d8) 14%, var(--care-card, #fff)),
        color-mix(in srgb, var(--care-primary-strong, #08765d) 9%, var(--care-card, #fff)));
    box-shadow: var(--sihatuna-shadow-md, 0 14px 40px rgba(31, 92, 132, .09));
}

.why-cta h2 {
    margin: 0 0 6px;
    color: var(--care-ink, #163e5f);
    font-size: 1.35rem;
}

.why-cta p {
    margin: 0;
    color: var(--care-muted, #55635f);
    line-height: 1.6;
}

/* ----- Responsive --------------------------------------------------------- */

@media (max-width: 1100px) {
    .why-hero-layout,
    .why-after {
        grid-template-columns: 1fr;
    }

    .why-panel {
        max-width: 650px;
    }
}

@media (max-width: 780px) {
    .why-section-heading {
        display: block;
    }

    .why-section-heading p {
        margin-block-start: 8px;
    }

    .why-comparison-head,
    .why-comparison-row,
    .why-faq-grid {
        grid-template-columns: 1fr;
    }

    /* The head's first cell describes the "usual way" column, which no longer
       sits beside its rows; the rows carry their own marks, so it can go. */
    .why-comparison-row > div + div {
        border-inline-start: 0;
        border-block-start: 1px solid var(--care-border, #e4ece8);
    }

    .why-cta {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 680px) {
    .why-hero {
        padding: 34px 0 28px;
    }

    .why-hero h1 {
        font-size: clamp(1.9rem, 9vw, 2.6rem);
    }

    .why-hero-description {
        font-size: 0.95rem;
    }

    .why-hero-actions {
        display: grid;
    }

    .why-section {
        padding: 30px 0;
    }
}