/* =========================================================================
   KAAYA GLOW — SEASONAL SKIN RITUAL CALENDAR
   Page-specific layer for seasonal-skin-ritual-calendar.php only.
   Namespaced "sr-" so it can't collide with any other page. Depends on
   kaaya-editorial.css (tokens, .kg-*) and pg-pages.css (.pg-section/
   .pg-head) — this file adds the two-column month calendar (left sticky
   navigation / right ritual content) plus a warm editorial palette, scoped
   to .sr-calendar only so it never leaks into the rest of the site's
   green-toned brand chrome (navbar, footer, buttons elsewhere).
   ========================================================================= */

.sr-calendar {
    /* Warm editorial palette — Korean-beauty-campaign feel, scoped to this
       section. Everything under .sr-calendar reads off these, not the
       site-wide --kaaya-* (moss/sage) tokens. */
    --sr-ivory: #FBF7F1;
    --sr-cream: #F5EEE2;
    --sr-beige: #EBE0CC;
    --sr-champagne: #E6D7B8;
    --sr-taupe: #C7B499;
    --sr-brown: #6B5842;
    --sr-brown-deep: #4A3B2A;
    --sr-charcoal: #2E2620;
    --sr-line: rgba(74, 59, 42, 0.16);
    --sr-shadow: 0 24px 48px -28px rgba(46, 38, 32, 0.28);
}

/* ================= NO GOLD ON THIS PAGE =================
   Overrides the site-wide gold hover on the shared .kg-btn component
   (hero + final CTA) so this page reads all-green, matching the ritual
   card buttons below — scoped to body.sr-page so no other page changes. */
body.sr-page .sv-hero .kg-btn:hover {
    background: rgba(35, 83, 71, 0.85);
    border-color: var(--kaaya-white);
    color: var(--kaaya-white);
}
body.sr-page .kg-final-cta .kg-btn:hover {
    background: var(--kaaya-charcoal);
    border-color: var(--kaaya-charcoal);
    color: var(--kaaya-white);
}

/* ================= TWO-COLUMN LAYOUT ================= */
.sr-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    align-items: start;
    gap: clamp(28px, 4vw, 56px);
}

/* ================= LEFT — MONTH SIDEBAR ================= */
.sr-side {
    position: sticky;
    top: 24px;
    align-self: start;
}
.sr-side-inner {
    background: var(--sr-ivory);
    border: 1px solid var(--sr-line);
    border-radius: 22px;
    padding: 22px 18px;
}
.sr-side-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 2px 10px 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--sr-line);
}
.sr-side-eyebrow {
    font-family: var(--kg-heading-font);
    font-style: italic;
    font-weight: 600;
    font-size: 19px;
    color: var(--sr-brown-deep);
}
.sr-side-count {
    font-family: var(--kg-body-font);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sr-brown);
    opacity: 0.75;
}
.sr-side-nav {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Thin connecting line running down through the month numbers. */
.sr-side-nav::before {
    content: '';
    position: absolute;
    left: 30px;
    top: 26px;
    bottom: 26px;
    width: 1px;
    background: var(--sr-line);
    z-index: 0;
}
.sr-side-link {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 10px;
    border-radius: 14px;
    text-decoration: none;
    color: var(--sr-charcoal);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.sr-side-link:hover { background: var(--sr-cream); transform: translateX(2px); }
.sr-side-num {
    flex: 0 0 auto;
    width: 24px;
    text-align: center;
    font-family: var(--kg-heading-font);
    font-style: italic;
    font-weight: 600;
    font-size: 20px;
    color: var(--sr-brown);
    background: var(--sr-ivory);
    transition: color 0.3s ease;
}
.sr-side-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.sr-side-name {
    font-family: var(--kg-body-font);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
}
.sr-side-focus {
    font-family: var(--kg-body-font);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--sr-brown);
    opacity: 0.75;
    margin-top: 2px;
}
.sr-side-now {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kaaya-white);
    background: var(--kaaya-moss);
    padding: 3px 7px;
    border-radius: 999px;
}
/* Premium active state — signature deep-green bg, ivory text (no gold). */
.sr-side-link.is-active {
    background: var(--kaaya-moss);
    color: var(--kaaya-white);
    box-shadow: var(--sr-shadow);
}
.sr-side-link.is-active .sr-side-num { color: var(--kaaya-white); background: transparent; }
.sr-side-link.is-active .sr-side-focus { color: var(--kaaya-beige); opacity: 1; }
.sr-side-link.is-active .sr-side-now { background: var(--kaaya-white); color: var(--kaaya-moss); }
.sr-side-link.is-active:hover { transform: none; }

/* ================= RIGHT — MONTH CONTENT ================= */
.sr-main { min-width: 0; }
.sr-main.is-transitioning { opacity: 0; }
.sr-main {
    transition: opacity 0.28s var(--kg-ease), transform 0.28s var(--kg-ease);
}

.sr-content-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-bottom: 6px;
}
.sr-eyebrow-warm {
    font-family: var(--kg-body-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sr-brown);
}
.sr-back-current {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--kg-body-font);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sr-brown);
    text-decoration: none;
}
.sr-back-current svg { width: 12px; height: 12px; transition: transform 0.25s var(--kg-ease); }
.sr-back-current:hover { color: var(--sr-charcoal); }
.sr-back-current:hover svg { transform: translateX(4px); }

/* ---- Month header: big numeral + name, theme heading, description ---- */
.sr-month-header {
    padding-bottom: clamp(24px, 3.5vw, 36px);
    margin-bottom: clamp(28px, 4vw, 40px);
    border-bottom: 1px solid var(--sr-line);
}
.sr-month-id {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 10px;
}
.sr-month-id-num {
    font-family: var(--kg-heading-font);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(44px, 5.5vw, 68px);
    line-height: 0.85;
    color: var(--sr-brown-deep);
}
.sr-month-id-name {
    font-family: var(--kg-body-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--sr-brown);
}
.sr-spotlight-title {
    font-family: var(--kg-heading-font);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.05;
    color: var(--sr-charcoal);
    font-size: clamp(30px, 4vw, 48px);
    margin: 0 0 14px;
}
.sr-month-desc {
    font-family: var(--kg-body-font);
    font-size: 15px;
    line-height: 1.75;
    color: var(--sr-brown);
    max-width: 62ch;
    margin: 0;
}
.sr-focus-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 22px;
}
.sr-focus-chip {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--kg-body-font);
    border: 1px solid var(--sr-line);
    border-radius: 14px;
    padding: 9px 18px;
}
.sr-focus-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sr-brown);
}
.sr-focus-value {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sr-brown-deep);
}
.sr-btn-warm {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    border-radius: 999px;
    background: var(--kaaya-moss);
    color: var(--kaaya-white);
    font-family: var(--kg-body-font);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.sr-btn-warm svg { width: 14px; height: 14px; }
.sr-btn-warm:hover { background: var(--kaaya-charcoal); color: var(--kaaya-white); transform: translateY(-2px); }

/* ================= PACKAGE GRID ================= */
/* Deep-forest "membership card" treatment — matches the site's
   kg-mem3-card design (see kg-membership-showcase.css) so the calendar's
   package cards and the Memberships section read as one visual language.
   The grid itself is a rounded dark-forest showcase panel (not placed
   loose on the page's light editorial background) so the cards sit on a
   backdrop that actually matches them, exactly like the membership
   section. Scoped to --src-* variables on .sr-package-grid only, so
   nothing here touches the warm --sr-* editorial tokens used by the rest
   of this page (sidebar, month header, etc). */
.sr-package-grid {
    --src-forest: #032F25;
    --src-deep-forest: #011F18;
    --src-card-bg: rgba(255, 255, 255, 0.05);
    --src-card-border: rgba(199, 217, 203, 0.16);
    --src-ivory: #FBF8F2;
    --src-muted-ivory: rgba(251, 248, 242, 0.72);
    --src-sage: #8FAF98;
    --src-sage-light: #C7D9CB;
    --src-sage-pale: #D6E4D9;
    --src-champagne: #D6C4A3;

    background: linear-gradient(150deg, #063B2F 0%, var(--src-forest) 55%, var(--src-deep-forest) 100%);
    border: 1px solid var(--src-card-border);
    border-radius: clamp(22px, 3vw, 32px);
    padding: clamp(22px, 3vw, 40px);
    box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.75);

    /* Fanned "stack of three" layout — a front-center card raised and
       enlarged, with the cards either side of it tucked in behind at a
       slight rotation (client reference: overlapping September package
       cards). Flexbox + nth-child, cycling every 3 cards, so it still
       works whatever number of packages a month has (currently 5: one
       full 3-card fan, then a trailing 2-card partial fan). Extra top
       padding/row-gap gives the raised front card and the rotated side
       cards room without clipping against the panel edge or the next row. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    row-gap: clamp(56px, 7vw, 88px);
    column-gap: 0;
    padding-top: clamp(46px, 6vw, 72px);
}
.sr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 1 clamp(230px, 25vw, 290px);
    background: var(--src-card-bg);
    border: 1px solid var(--src-card-border);
    border-radius: 26px;
    padding: clamp(18px, 2vw, 24px);
    box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.6);

    /* Fan position, overridden per nth-child below and nudged further
       on :hover — kept as custom properties so hover only has to change
       the numbers, not redeclare the whole transform. */
    --sr-fan-rot: 0deg;
    --sr-fan-y: 0px;
    --sr-fan-scale: 1;
    --sr-fan-z: 2;
    transform: translateY(var(--sr-fan-y)) scale(var(--sr-fan-scale)) rotate(var(--sr-fan-rot));
    transform-origin: bottom center;
    z-index: var(--sr-fan-z);
    transition: transform 0.35s var(--kg-ease), box-shadow 0.35s var(--kg-ease), border-color 0.35s var(--kg-ease);
}
/* 1st of every 3 — left, tucked behind the center card */
.sr-card:nth-child(3n+1) {
    --sr-fan-rot: -7deg;
    --sr-fan-y: 22px;
    --sr-fan-scale: 0.93;
    --sr-fan-z: 1;
    margin-right: -13%;
}
/* 2nd of every 3 — front and center, raised above the other two */
.sr-card:nth-child(3n+2) {
    --sr-fan-z: 3;
}
/* 3rd of every 3 — right, tucked behind the center card */
.sr-card:nth-child(3n+3) {
    --sr-fan-rot: 7deg;
    --sr-fan-y: 22px;
    --sr-fan-scale: 0.93;
    --sr-fan-z: 2;
    margin-left: -13%;
}
.sr-card:hover {
    --sr-fan-scale: 1.02;
    --sr-fan-z: 5;
    border-color: rgba(143, 175, 152, 0.5);
    box-shadow: 0 28px 60px -30px rgba(0, 0, 0, 0.75);
}
.sr-card:nth-child(3n+1):hover,
.sr-card:nth-child(3n+3):hover { --sr-fan-y: 6px; }
.sr-card:nth-child(3n+2):hover { --sr-fan-y: -16px; }
.sr-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 16px;
    margin-bottom: 20px;
}
.sr-card-media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--kg-speed-slow) var(--kg-ease);
}
.sr-card:hover .sr-card-media img { transform: scale(1.05); }
.sr-card-media::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(4, 40, 32, 0.5) 0%, transparent 55%);
    pointer-events: none;
}
.sr-card-save {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(1, 31, 24, 0.85);
    border: 1px solid rgba(143, 175, 152, 0.3);
    color: var(--src-sage-light);
    font-family: var(--kg-body-font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 6px 11px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
}
.sr-card-save svg { width: 11px; height: 11px; color: var(--src-sage); }

.sr-card-body { display: flex; flex-direction: column; flex: 1; }
.sr-card-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(7, 56, 45, 0.9);
    border: 1px solid rgba(143, 175, 152, 0.3);
    color: var(--src-sage-light);
    font-family: var(--kg-body-font);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 18px;
    width: fit-content;
}
.sr-card-badge svg { width: 13px; height: 13px; color: var(--src-sage); flex-shrink: 0; }

.sr-card-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 3px; }
.sr-card-name {
    font-family: var(--kg-heading-font);
    font-weight: 400;
    font-size: clamp(20px, 2vw, 24px);
    color: var(--src-ivory);
    margin: 0;
    line-height: 1.15;
}
.sr-card-name a { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: color var(--kg-speed-fast, .2s) ease, background-size var(--kg-speed-fast, .2s) ease; }
.sr-card-name a:hover { color: var(--src-sage); background-size: 100% 1px; }
.sr-card-name a:focus-visible { color: var(--src-sage); background-size: 100% 1px; outline: 2px solid var(--src-sage); outline-offset: 3px; border-radius: 3px; }
.sr-card-price { flex-shrink: 0; text-align: right; }
.sr-card-price-now {
    font-family: var(--kg-heading-font);
    font-weight: 500;
    font-size: clamp(20px, 2vw, 24px);
    color: var(--src-sage);
    line-height: 1;
}
.sr-card-mrp { display: block; font-family: var(--kg-body-font); font-size: 11px; color: var(--src-muted-ivory); text-decoration: line-through; }

.sr-card-desc {
    font-family: var(--kg-body-font);
    font-weight: 300;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--src-sage);
    margin: 0 0 20px;
}

.sr-card-actions {
    /* Buttons sit at the very bottom of the card, below the feature row —
       the feature row takes the free space (margin-top:auto) so the
       buttons line up across all three cards whatever their copy length. */
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 18px;
}
.sr-card-details {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid rgba(143, 175, 152, 0.4);
    padding: 13px;
    border-radius: 999px;
    background: rgba(143, 175, 152, 0.14);
    color: var(--src-sage-light);
    font-family: var(--kg-body-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--kg-speed-fast) var(--kg-ease), color var(--kg-speed-fast) var(--kg-ease), border-color var(--kg-speed-fast) var(--kg-ease);
}
.sr-card-details svg { width: 13px; height: 13px; }
.sr-card-details:hover { background: var(--src-sage); color: var(--src-deep-forest); border-color: transparent; }
/* Booking still happens one click away, inside the modal this "Explore"
   button opens — kept off the card face to match the single-CTA design. */

.sr-card-tags {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    text-align: center;
    padding-top: 18px;
    margin-top: auto;
    border-top: 1px solid var(--src-card-border);
}
.sr-card-tag { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sr-card-tag:nth-child(2) {
    border-left: 1px solid var(--src-card-border);
    border-right: 1px solid var(--src-card-border);
}
.sr-card-tag svg { width: 16px; height: 16px; color: var(--src-sage); }
.sr-card-tag span {
    font-family: var(--kg-body-font);
    font-size: 10.5px;
    font-weight: 300;
    line-height: 1.3;
    color: var(--src-muted-ivory);
}

@media (max-width: 700px) {
    /* Below this width there isn't room for three cards to fan out
       legibly, so the stack collapses to a plain single column — same
       cards, transforms and overlap reset to nothing. */
    .sr-package-grid {
        flex-direction: column;
        align-items: stretch;
        row-gap: clamp(20px, 4vw, 28px);
        padding-top: clamp(22px, 3vw, 40px);
    }
    .sr-card,
    .sr-card:nth-child(3n+1),
    .sr-card:nth-child(3n+2),
    .sr-card:nth-child(3n+3) {
        --sr-fan-rot: 0deg;
        --sr-fan-y: 0px;
        --sr-fan-scale: 1;
        margin: 0;
        flex-basis: auto;
    }
}

/* ================= MONTH FOOTER — prev/next ================= */
.sr-month-footer {
    margin-top: clamp(32px, 4.5vw, 48px);
    padding-top: 24px;
    border-top: 1px solid var(--sr-line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}
.sr-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--sr-charcoal);
    transition: opacity 0.25s ease;
}
.sr-nav-link:hover { opacity: 0.7; }
.sr-nav-link svg { width: 16px; height: 16px; color: var(--sr-brown); flex-shrink: 0; transition: transform 0.25s var(--kg-ease); }
.sr-nav-prev:hover svg { transform: translateX(-4px); }
.sr-nav-next:hover svg { transform: translateX(4px); }
.sr-nav-link-text { display: flex; flex-direction: column; line-height: 1.25; }
.sr-nav-next .sr-nav-link-text { align-items: flex-end; text-align: right; }
.sr-nav-link-text span {
    font-family: var(--kg-body-font);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sr-taupe);
}
.sr-nav-link-text {
    font-family: var(--kg-heading-font);
    font-style: italic;
    font-weight: 600;
    font-size: 20px;
}
@media (max-width: 560px) {
    .sr-nav-link-text { font-size: 16px; }
}

/* ================= RESPONSIVE — SIDEBAR BECOMES A TOP STRIP =================
   Desktop keeps LEFT = months / RIGHT = content (the required layout).
   Below 900px the two columns stack and the month list itself flips from
   a vertical sidebar into a compact horizontal scrollable strip — the
   same DOM (#srSide / .sr-side-link), only the layout changes. */
@media (max-width: 900px) {
    .sr-layout { display: block; }
    .sr-side {
        position: static;
        margin-bottom: 24px;
    }
    .sr-side-inner { padding: 14px; border-radius: 18px; }
    .sr-side-head { padding: 2px 6px 10px; margin-bottom: 10px; }
    .sr-side-nav {
        flex-direction: row;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .sr-side-nav::before { display: none; }
    .sr-side-link {
        flex: 0 0 auto;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 10px 14px;
        border: 1px solid var(--sr-line);
        border-radius: 14px;
        scroll-snap-align: start;
    }
    .sr-side-link:hover { transform: none; }
    .sr-side-num { width: auto; font-size: 15px; }
    .sr-side-meta { align-items: center; text-align: center; }
    .sr-side-name { font-size: 10.5px; }
    .sr-side-focus { display: none; }
    .sr-side-now { margin-left: 0; }
}
@media (max-width: 640px) {
    .sr-month-id { gap: 10px; }
}

/* ================= HOMEPAGE TEASER — TEXT + IMAGE (no cards) =================
   Deliberately not a card grid: a single editorial split, same shape as
   .kg-about-grid on the Philosophy section, but themed for the dark
   #kg-seasonal-calendar background. Unrelated to the two-column calendar
   above — kept as-is; also used on the Home page. */
.sr-home-grid {
    display: grid;
    grid-template-columns: 1fr 0.85fr;
    gap: clamp(40px, 6vw, 72px);
    align-items: center;
}
.sr-home-content { max-width: 480px; }
.sr-home-content .kg-lede { margin: 0 0 32px; }
.sr-home-items {
    display: flex;
    gap: clamp(24px, 4vw, 40px);
    flex-wrap: wrap;
    margin-bottom: 36px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.sr-home-item { flex: 1 1 170px; }
.sr-home-item-title {
    display: block;
    font-family: var(--kg-heading-font);
    font-style: italic;
    font-weight: 600;
    font-size: 18px;
    color: var(--kaaya-white);
    margin-bottom: 8px;
}
.sr-home-item-desc {
    font-family: var(--kg-body-font);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--kaaya-taupe);
    margin: 0;
}
.sr-home-media {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.55);
}
.sr-home-media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--kg-speed-slow) var(--kg-ease);
}
.sr-home-media:hover img { transform: scale(1.04); }
@media (max-width: 992px) {
    .sr-home-grid { grid-template-columns: 1fr; gap: 40px; }
    .sr-home-content { max-width: none; }
    .sr-home-media { aspect-ratio: 16 / 9; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 560px) {
    .sr-home-items { flex-direction: column; gap: 22px; }
}

/* ================= DISCLAIMER ================= */
.sr-disclaimer {
    font-family: var(--kg-body-font);
    font-size: 12px;
    line-height: 1.7;
    color: rgba(11, 43, 38, 0.6);
    max-width: 70ch;
}
.sr-disclaimer p + p { margin-top: 6px; }


/* =========================================================================
   PACKAGE GRID — straight 3-per-row (replaces the fanned/overlapping stack)
   Overrides the flex "fan" layout above: no rotation, no negative-margin
   overlap, every card the same size and aligned on a clean grid.
   3 across on desktop, 2 on tablet, 1 on phones.
   ========================================================================= */
.sr-package-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.2vw, 28px);
    align-items: stretch;
    justify-content: normal;
    padding: clamp(22px, 3vw, 40px);
}
.sr-card,
.sr-card:nth-child(3n+1),
.sr-card:nth-child(3n+2),
.sr-card:nth-child(3n+3) {
    flex: none;
    width: auto;
    min-width: 0;
    margin: 0;
    --sr-fan-rot: 0deg;
    --sr-fan-y: 0px;
    --sr-fan-scale: 1;
    --sr-fan-z: 1;
    transform: none;
}
.sr-card:hover,
.sr-card:nth-child(3n+1):hover,
.sr-card:nth-child(3n+2):hover,
.sr-card:nth-child(3n+3):hover {
    transform: translateY(-6px);
    --sr-fan-z: 2;
}
.sr-card-title-row { flex-wrap: wrap; }

/* Sidebar still sits beside the cards between 901px and 1100px, so the
   content column is narrow there — drop to 2 across. */
@media (min-width: 901px) and (max-width: 1100px) {
    .sr-package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .sr-package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .sr-package-grid { grid-template-columns: 1fr; }
}


/* =========================================================================
   NO OVERLAP — hardening pass for the 3-per-row package grid
   Cards get more room (slimmer sidebar + tighter panel padding), and every
   piece of text inside a card wraps instead of running into its neighbour:
   the price now sits under the package name rather than beside it, and the
   three feature tags are allowed to wrap. Cards never rotate, scale or
   pull into each other, and hover only lifts a card by a few pixels.
   ========================================================================= */
.sr-layout { grid-template-columns: 240px minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); }
.sr-main { min-width: 0; }

.sr-package-grid {
    gap: clamp(16px, 1.8vw, 22px);
    padding: clamp(16px, 2vw, 26px);
    overflow: hidden;              /* nothing can spill out of the panel */
}
.sr-card,
.sr-card:nth-child(3n+1),
.sr-card:nth-child(3n+2),
.sr-card:nth-child(3n+3) {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: clamp(14px, 1.4vw, 18px);
    overflow: hidden;              /* keep card content inside its own box */
    transform: none;
}
.sr-card:hover,
.sr-card:nth-child(3n+1):hover,
.sr-card:nth-child(3n+2):hover,
.sr-card:nth-child(3n+3):hover { transform: translateY(-4px); z-index: 1; }

/* Name on top, price underneath — never side-by-side in a narrow card. */
.sr-card-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 8px;
}
.sr-card-name {
    font-size: clamp(18px, 1.5vw, 21px);
    overflow-wrap: anywhere;
    min-width: 0;
}
.sr-card-price { text-align: left; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sr-card-price-now { font-size: clamp(18px, 1.5vw, 21px); }
.sr-card-mrp { display: inline; }

.sr-card-media { margin-bottom: 14px; }
.sr-card-badge { max-width: 100%; white-space: normal; }
.sr-card-desc { margin-bottom: 16px; overflow-wrap: anywhere; }

.sr-card-tags { gap: 6px; padding-top: 14px; margin-top: auto; }
.sr-card-tag { min-width: 0; padding: 0 2px; }
.sr-card-tag span { font-size: 10px; overflow-wrap: anywhere; hyphens: auto; }

/* Narrower content column while the sidebar is still beside the cards. */
@media (min-width: 901px) and (max-width: 1180px) {
    .sr-package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* =========================================================================
   COMING SOON MONTHS + CENTRED PACKAGE ROWS
   Client feedback: only last month, this month and next month are open
   (see kaayaIsRitualMonthOpen() in seasonal-ritual-calendar-data.php);
   every other month is greyed out with a "Coming Soon" tag. Also: a month
   with 5 packages must not leave its last two cards hanging left — the last
   row is now centred.
   ========================================================================= */

/* ---- Sidebar: locked months ---- */
.sr-side-link.is-locked {
    filter: grayscale(1);
    opacity: 0.6;
    color: #6b6b6b;
}
.sr-side-link.is-locked:hover { background: rgba(0, 0, 0, 0.04); transform: none; opacity: 0.8; }
.sr-side-link.is-locked .sr-side-num { color: #8a8a8a; }
.sr-side-soon {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #6b6b6b;
    background: rgba(0, 0, 0, 0.07);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 3px 7px;
    border-radius: 999px;
}
/* Selected-but-locked month: grey fill instead of the green "active" fill. */
.sr-side-link.is-locked.is-active {
    background: #E4E4E2;
    color: #4a4a4a;
    opacity: 1;
    box-shadow: none;
}
.sr-side-link.is-locked.is-active .sr-side-num { color: #4a4a4a; }
.sr-side-link.is-locked.is-active .sr-side-soon { color: #4a4a4a; background: #fff; }

/* ---- Content area: locked month panel ---- */
.sr-locked {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: clamp(28px, 4vw, 52px);
    margin-top: 10px;
    border-radius: clamp(22px, 3vw, 32px);
    background: #F1F1EF;
    border: 1px dashed rgba(0, 0, 0, 0.18);
    filter: grayscale(1);
}
.sr-locked .sr-month-id { opacity: 0.55; }
.sr-locked-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #555;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.14);
    padding: 7px 16px;
    border-radius: 999px;
}
.sr-locked-title {
    font-family: var(--kg-heading-font);
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.1;
    color: #3a3a3a;
    margin: 0;
}
.sr-locked-desc {
    max-width: 52ch;
    font-size: 15px;
    line-height: 1.65;
    color: #666;
    margin: 0 0 6px;
}

/* ---- Footer: prev/next pointing at a locked month ---- */
.sr-nav-link.is-disabled {
    filter: grayscale(1);
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- Package grid: centre the last (incomplete) row ----
   Switched from CSS grid to wrapping flex so a trailing row of 1–2 cards
   is centred under the full rows. Column counts mirror the old grid
   breakpoints: 3 across, 2 across while the sidebar squeezes the content
   column (901–1180px) and on phones (≤760px), 1 across on very small
   screens. */
.sr-package-grid {
    --sr-cols: 3;
    --sr-gap: clamp(16px, 1.8vw, 22px);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--sr-gap);
}
.sr-package-grid > .sr-card,
.sr-package-grid > .sr-card:nth-child(3n+1),
.sr-package-grid > .sr-card:nth-child(3n+2),
.sr-package-grid > .sr-card:nth-child(3n+3) {
    flex: 0 0 calc((100% - (var(--sr-cols) - 1) * var(--sr-gap)) / var(--sr-cols));
    max-width: calc((100% - (var(--sr-cols) - 1) * var(--sr-gap)) / var(--sr-cols));
    width: auto;
    min-width: 0;
}
@media (min-width: 901px) and (max-width: 1180px) { .sr-package-grid { --sr-cols: 2; } }
@media (max-width: 760px) { .sr-package-grid { --sr-cols: 2; } }
@media (max-width: 520px) { .sr-package-grid { --sr-cols: 1; } }
@media (max-width: 900px) {
    .sr-side-soon { margin-left: 0; font-size: 8px; padding: 2px 6px; }
}

/* ---- Split button: ONE pill, two actions (View Details | Book Now) ---- */
.sr-card-split {
    display: flex; align-items: stretch; width: 100%; box-sizing: border-box;
    border: 1px solid rgba(143, 175, 152, 0.4);
    border-radius: 999px; overflow: hidden;
    background: rgba(143, 175, 152, 0.14);
}
.sr-card-split-btn {
    flex: 1 1 50%; min-width: 0; margin: 0; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 13px 8px; border: 0; border-radius: 0; background: transparent;
    color: var(--src-sage-light);
    font-family: var(--kg-body-font); font-size: 11px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
    text-decoration: none; cursor: pointer;
    transition: background var(--kg-speed-fast) var(--kg-ease), color var(--kg-speed-fast) var(--kg-ease);
}
.sr-card-split-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.sr-card-split-book { border-left: 1px solid rgba(143, 175, 152, 0.4); font-weight: 700; }
.sr-card-split-btn:hover,
.sr-card-split-btn:focus-visible { background: var(--src-sage); color: var(--src-deep-forest); outline: none; }
@media (max-width: 560px) {
    .sr-card-split-btn { font-size: 10.5px; letter-spacing: 0.06em; padding: 13px 6px; }
}
/* "Book Appointment" is longer than "Book Now": tighter tracking, no arrow, so both halves fit */
.sr-card-split-btn { letter-spacing: 0.04em; font-size: 10.5px; padding-left: 4px; padding-right: 4px; }
.sr-card-split-book svg { display: none; }
/* Single "View Details & Book Appointment" button: longer label, so wrap + lighter tracking */
.sr-card-details { white-space: normal; text-align: center; line-height: 1.3; letter-spacing: 0.08em; }