/* =========================================================================
   KAAYA GLOW — SERVICE GUIDE (single service detail page)
   Namespaced "sg-" so it can't collide with the shared editorial classes
   or the services page's own "sv-" sheet. Loaded only on
   service-details.php (see includes/header.php).

   Depends on kaaya-editorial.css for the design tokens (--kaaya-*, --kg-*)
   and the shared .kg-container / .kg-eyebrow / .kg-heading / .kg-btn
   primitives.
   ========================================================================= */

/* ================= SHARED ================= */

.sg-section {
    position: relative;
    padding: clamp(64px, 9vw, 120px) 0;
}

.sg-section.kg-on-dark {
    background: var(--kaaya-charcoal);
    color: var(--kaaya-ivory);
}

.sg-head {
    max-width: 640px;
    margin-bottom: clamp(36px, 5vw, 60px);
}

.sg-head .kg-lede {
    margin-top: 16px;
}

.sg-minor-title {
    font-family: var(--kg-body-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kaaya-olive);
    margin: 0 0 16px;
}

/* ================= HERO ================= */

.sg-hero {
    min-height: clamp(460px, 62vh, 620px);
}

.sg-crumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--kg-body-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 20px;
}

.sg-crumbs a {
    color: inherit;
    text-decoration: none;
    transition: color var(--kg-speed-fast) var(--kg-ease);
}

.sg-crumbs a:hover,
.sg-crumbs a:focus-visible {
    color: var(--kaaya-sage);
}

.sg-crumbs span {
    opacity: 0.55;
}

/* Legibility (client feedback item 7): hero copy over photography gets a
   real text shadow and a floor on font-size rather than relying on the
   background scrim alone. */
.sg-hero-tagline {
    font-family: var(--kg-heading-font);
    font-size: clamp(20px, 2.4vw, 28px);
    font-style: italic;
    line-height: 1.45;
    color: #fff;
    text-shadow: 0 2px 18px rgba(5, 31, 32, 0.6);
    max-width: 620px;
    margin: 14px auto 28px;
}

.sg-hero-cta {
    margin-top: 4px;
}

/* ================= OVERVIEW ================= */

.sg-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: start;
}

.sg-included {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid rgba(35, 83, 71, 0.16);
}

.sg-check-list,
.sg-dot-list,
.sg-x-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.sg-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-family: var(--kg-body-font);
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--kaaya-deep);
}

.sg-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--kaaya-ivory);
    color: var(--kaaya-moss);
    margin-top: 1px;
}

.sg-check svg {
    width: 13px;
    height: 13px;
}

/* ---- Price card ---- */

.sg-price-card {
    position: sticky;
    top: 110px;
    background: var(--kaaya-charcoal);
    color: var(--kaaya-ivory);
    border-radius: 20px;
    padding: clamp(28px, 3.4vw, 40px);
    box-shadow: 0 30px 70px -32px rgba(5, 31, 32, 0.55);
}

.sg-price-label {
    display: block;
    font-family: var(--kg-body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kaaya-sage);
    margin-bottom: 14px;
}

.sg-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 10px;
}

.sg-price-now {
    font-family: var(--kg-heading-font);
    font-size: clamp(36px, 4.6vw, 52px);
    font-weight: 600;
    line-height: 1;
    color: #fff;
}

.sg-price-was {
    font-family: var(--kg-body-font);
    font-size: 17px;
    color: rgba(218, 241, 222, 0.6);
    text-decoration: line-through;
}

.sg-price-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--kaaya-sage);
    color: var(--kaaya-black);
    font-family: var(--kg-body-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sg-price-note {
    font-family: var(--kg-body-font);
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(218, 241, 222, 0.78);
    margin: 18px 0 26px;
}

.sg-price-cta {
    width: 100%;
    justify-content: center;
}

.sg-price-link {
    display: block;
    text-align: center;
    margin-top: 16px;
    font-family: var(--kg-body-font);
    font-size: 13.5px;
    color: var(--kaaya-sage);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--kg-speed-fast) var(--kg-ease);
}

.sg-price-link:hover,
.sg-price-link:focus-visible {
    border-bottom-color: currentColor;
}

/* ================= STEPS ================= */

.sg-steps .kg-eyebrow,
.sg-faq .kg-eyebrow {
    color: var(--kaaya-sage);
}

.sg-steps .kg-heading,
.sg-faq .kg-heading {
    color: #fff;
}

.sg-steps .kg-lede,
.sg-faq .kg-lede {
    color: rgba(218, 241, 222, 0.82);
}

.sg-step-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(20px, 2.6vw, 32px);
}

.sg-step-card {
    position: relative;
    padding: clamp(26px, 3vw, 36px);
    border: 1px solid rgba(142, 182, 155, 0.24);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    transition: border-color var(--kg-speed-fast) var(--kg-ease),
                transform var(--kg-speed-fast) var(--kg-ease);
}

.sg-step-card:hover {
    border-color: rgba(142, 182, 155, 0.5);
    transform: translateY(-4px);
}

.sg-step-num {
    display: block;
    font-family: var(--kg-heading-font);
    font-size: 30px;
    font-weight: 600;
    color: var(--kaaya-sage);
    margin-bottom: 14px;
}

.sg-step-card h3 {
    font-family: var(--kg-heading-font);
    font-size: clamp(21px, 2.1vw, 25px);
    font-weight: 600;
    color: #fff;
    margin: 0 0 10px;
}

.sg-step-card p {
    font-family: var(--kg-body-font);
    font-size: 15px;
    line-height: 1.7;
    color: rgba(218, 241, 222, 0.82);
    margin: 0;
}

/* ================= PREPARE ================= */

.sg-prepare {
    background: var(--kaaya-ivory);
}

.sg-prep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(20px, 2.6vw, 30px);
}

.sg-prep-card {
    background: #fff;
    border-radius: 18px;
    padding: clamp(26px, 3vw, 36px);
    border: 1px solid rgba(35, 83, 71, 0.1);
    transition: transform var(--kg-speed-fast) var(--kg-ease),
                box-shadow var(--kg-speed-fast) var(--kg-ease);
}

.sg-prep-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px -28px rgba(5, 31, 32, 0.35);
}

.sg-prep-card h3 {
    font-family: var(--kg-body-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kaaya-moss);
    margin: 0 0 14px;
}

.sg-prep-card p {
    font-family: var(--kg-body-font);
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--kaaya-deep);
    margin: 0;
}

/* ================= AFTERCARE =================
   Rebuilt layout. Previously .sg-after-grid put the two guide cards side
   by side with auto-fit columns; because the two lists are never the same
   length, the shorter card left a tall gap beneath it (visible in the
   client's screenshot). Now the photo owns one column and the two lists
   stack in the other, so neither list has to match the other's height. */

/* No background declared on .sg-aftercare on purpose — the section keeps
   inheriting the page tone it had before, exactly as the other light
   sg-sections do. */
.sg-after-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(22px, 3vw, 40px);
    /* stretch (the default) is load-bearing here: it is what lets the
       media column grow to match the stacked panels beside it. */
    align-items: stretch;
}

/* ---- Media column ---- */

.sg-after-visual {
    position: relative;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    min-height: 340px;
    background: rgba(35, 83, 71, 0.08);
}

.sg-after-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sg-after-visual-cap {
    position: absolute;
    inset: auto 0 0 0;
    padding: clamp(20px, 2.4vw, 28px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #fff;
    /* Gradient rather than a flat scrim so the photo still reads through
       the top of the caption area. */
    background: linear-gradient(to top, rgba(6, 28, 24, 0.86), rgba(6, 28, 24, 0.45) 55%, rgba(6, 28, 24, 0));
}

.sg-after-visual-eyebrow {
    font-family: var(--kg-body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.sg-after-visual-cap strong {
    font-family: var(--kg-heading-font);
    font-size: clamp(19px, 1.9vw, 24px);
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
}

/* ---- Stacked list panels ---- */

.sg-after-panels {
    display: grid;
    gap: clamp(18px, 2vw, 24px);
    align-content: start;
}

.sg-after-panel {
    border-radius: 20px;
    border: 1px solid rgba(35, 83, 71, 0.12);
    background: #fff;
    padding: clamp(24px, 2.8vw, 34px);
}

.sg-after-panel-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.sg-after-chip {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sg-after-chip svg {
    width: 18px;
    height: 18px;
}

.sg-after-chip-yes {
    background: rgba(142, 182, 155, 0.2);
    color: var(--kaaya-moss);
}

.sg-after-chip-no {
    background: rgba(180, 85, 63, 0.14);
    color: #b4553f;
}

.sg-after-panel h3 {
    font-family: var(--kg-heading-font);
    font-size: clamp(21px, 2.1vw, 26px);
    font-weight: 600;
    color: var(--kaaya-black);
    margin: 0;
    line-height: 1.2;
}

.sg-after-panel-sub {
    display: block;
    font-family: var(--kg-body-font);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(35, 83, 71, 0.5);
    margin-top: 5px;
}

.sg-after-intro {
    font-family: var(--kg-body-font);
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--kaaya-deep);
    margin: 0 0 20px;
}

.sg-dot-list,
.sg-x-list {
    /* re-stated from the shared list block above so the aftercare lists
       keep their reset when they pick up the 2-column flow below */
    list-style: none;
    margin: 0;
    padding: 0;
}

.sg-dot-list li,
.sg-x-list li {
    position: relative;
    padding-left: 30px;
    font-family: var(--kg-body-font);
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--kaaya-deep);
}

.sg-dot-list li::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--kaaya-sage);
}

.sg-x-list li::before {
    content: '\00d7';
    position: absolute;
    left: 4px;
    top: -1px;
    font-size: 19px;
    line-height: 1.6;
    font-weight: 600;
    color: #b4553f;
}

/* Long lists (brow artistry carries 5-6 items) flow into two columns once
   there is room, so one treatment's panel never towers over another's.
   auto-fit + a 230px floor means a 3-item list just stays single-column. */
.sg-after-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px clamp(18px, 2vw, 28px);
}

.sg-after-avoid {
    background: #fdf6f3;
    border-color: rgba(180, 85, 63, 0.18);
}

@media (max-width: 900px) {
    .sg-after-layout {
        grid-template-columns: 1fr;
    }
    .sg-after-visual {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }
    /* The absolute fill only works against a sized box; with the column
       gone, the aspect-ratio above supplies that height. */
}

@media (max-width: 560px) {
    .sg-after-list {
        grid-template-columns: 1fr;
    }
}

/* ================= FAQ ================= */

.sg-faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: start;
}

.sg-faq-intro .kg-btn {
    margin-top: 26px;
}

.sg-faq-list {
    display: grid;
    gap: 2px;
}

.sg-faq-item {
    border-bottom: 1px solid rgba(142, 182, 155, 0.22);
}

.sg-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--kg-body-font);
    font-size: clamp(15.5px, 1.6vw, 17px);
    font-weight: 500;
    line-height: 1.5;
    color: #fff;
    transition: color var(--kg-speed-fast) var(--kg-ease);
}

.sg-faq-item summary::-webkit-details-marker {
    display: none;
}

.sg-faq-item summary:hover {
    color: var(--kaaya-sage);
}

/* Plus/minus toggle drawn in CSS so there's no icon dependency */
.sg-faq-icon {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.sg-faq-icon::before,
.sg-faq-icon::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--kaaya-sage);
    transition: transform var(--kg-speed-fast) var(--kg-ease);
}

.sg-faq-icon::before {
    width: 14px;
    height: 1.5px;
    transform: translate(-50%, -50%);
}

.sg-faq-icon::after {
    width: 1.5px;
    height: 14px;
    transform: translate(-50%, -50%);
}

.sg-faq-item[open] .sg-faq-icon::after {
    transform: translate(-50%, -50%) scaleY(0);
}

.sg-faq-answer {
    padding: 0 0 24px;
    max-width: 62ch;
}

.sg-faq-answer p {
    font-family: var(--kg-body-font);
    font-size: 15.5px;
    line-height: 1.75;
    color: rgba(218, 241, 222, 0.86);
    margin: 0;
}

/* ================= RELATED ================= */

.sg-related {
    background: var(--kaaya-ivory);
}

.sg-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(20px, 2.6vw, 30px);
}

.sg-related-card {
    display: block;
    text-decoration: none;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(35, 83, 71, 0.1);
    transition: transform var(--kg-speed-fast) var(--kg-ease),
                box-shadow var(--kg-speed-fast) var(--kg-ease);
}

.sg-related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 52px -30px rgba(5, 31, 32, 0.4);
}

.sg-related-media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.sg-related-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--kg-speed-slow) var(--kg-ease);
}

.sg-related-card:hover .sg-related-media img {
    transform: scale(1.06);
}

.sg-related-body {
    padding: 22px 24px 26px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}

.sg-related-body h3 {
    font-family: var(--kg-heading-font);
    font-size: 21px;
    font-weight: 600;
    color: var(--kaaya-black);
    margin: 0;
}

.sg-related-price {
    font-family: var(--kg-body-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--kaaya-moss);
    white-space: nowrap;
}

.sg-related-foot {
    margin-top: 40px;
    text-align: center;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 900px) {
    .sg-overview-grid,
    .sg-faq-grid {
        grid-template-columns: 1fr;
    }

    .sg-price-card {
        position: static;
    }
}

@media (max-width: 600px) {
    .sg-crumbs {
        font-size: 11px;
    }

    .sg-related-body {
        flex-direction: column;
        gap: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sg-step-card,
    .sg-prep-card,
    .sg-related-card,
    .sg-related-media img {
        transition: none;
    }
}