/* =========================================================================
   KAAYA GLOW — SHARED "BEAUTY PACKAGES" SECTION
   Loaded on both index.php (homepage) and services.php so the two pages
   render the exact same package card design ("Card I like" dark variant:
   media on top, solid dark content block below, title+price row, tag
   pills, full-width white CTA) rather than maintaining two versions.
   Depends on the --kaaya- and --kg- tokens from kaaya-editorial.css and
   the .sv-shadow-dark / .kg-on-dark helpers already loaded on every page.
   ========================================================================= */
.sv-packages {
    /* .sv-section already provides these on services.php (sv-services.css);
       redeclared here, scoped to .sv-packages specifically, so the section
       is properly spaced on index.php too, which doesn't load that file. */
    padding: 128px 0;
    position: relative;
    background: var(--kaaya-charcoal);
}
.sv-packages .sv-section-head { max-width: 640px; margin: 0 0 64px; }
.sv-packages .sv-section-head .kg-heading { margin-bottom: 18px; }
.sv-package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sv-package-card {
    display: flex;
    flex-direction: column;
    background: var(--kaaya-black);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--sv-shadow-dark, 0 30px 60px -30px rgba(5,31,32,0.5));
    border: 1px solid rgba(218,241,222,0.08);
    transition: transform var(--kg-speed-mid) var(--kg-ease), box-shadow var(--kg-speed-mid) var(--kg-ease);
}
.sv-package-card:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -24px rgba(5,31,32,0.6); }
.sv-package-media { position: relative; aspect-ratio: 4/3.1; overflow: hidden; }

/* Auto-advancing crossfade — 3 stacked photos per card, cycling on their
   own with pure CSS (no JS, no user interaction needed). Each <img> shares
   one keyframe timeline but starts at a different offset via
   animation-delay, so exactly one is visible at a time. */
.sv-package-media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: kgPkgCycleDark 9s ease-in-out infinite;
}
.sv-package-media img:nth-child(1) { animation-delay: 0s; }
.sv-package-media img:nth-child(2) { animation-delay: 3s; }
.sv-package-media img:nth-child(3) { animation-delay: 6s; }
@keyframes kgPkgCycleDark {
    0%      { opacity: 0; transform: scale(1.08); }
    4%      { opacity: 1; transform: scale(1.08); }
    29%     { opacity: 1; transform: scale(1); }
    33%     { opacity: 0; transform: scale(1); }
    100%    { opacity: 0; }
}
.sv-package-dots {
    position: absolute;
    bottom: 12px; left: 50%;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 5px;
    z-index: 2;
}
.sv-package-dots span {
    width: 5px; height: 5px; border-radius: 3px;
    background: rgba(218,241,222,0.4);
    animation: kgPkgDotDark 9s ease-in-out infinite;
}
.sv-package-dots span:nth-child(1) { animation-delay: 0s; }
.sv-package-dots span:nth-child(2) { animation-delay: 3s; }
.sv-package-dots span:nth-child(3) { animation-delay: 6s; }
@keyframes kgPkgDotDark {
    0%, 33%   { width: 16px; background: var(--kaaya-white); }
    34%, 100% { width: 5px; background: rgba(218,241,222,0.4); }
}
@media (prefers-reduced-motion: reduce) {
    .sv-package-media img { animation: none; opacity: 0; }
    .sv-package-media img:first-child { opacity: 1; }
    .sv-package-dots span { animation: none; width: 5px; background: rgba(218,241,222,0.4); }
    .sv-package-dots span:first-child { width: 16px; background: var(--kaaya-white); }
}

.sv-package-content { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.sv-package-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sv-package-name { font-family: var(--kg-heading-font); font-size: 19px; font-weight: 600; color: var(--kaaya-white); margin: 0; line-height: 1.2; }
.sv-package-price {
    flex-shrink: 0;
    font-family: var(--kg-body-font); font-size: 12.5px; font-weight: 700;
    color: var(--kaaya-black);
    background: var(--kaaya-sage);
    padding: 5px 12px;
    border-radius: 30px;
    white-space: nowrap;
}
.sv-package-desc { font-family: var(--kg-body-font); font-size: 13px; line-height: 1.55; color: rgba(218,241,222,0.65); margin: 0; }
.sv-package-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; }
.sv-package-tag {
    font-family: var(--kg-body-font); font-size: 11px; font-weight: 600;
    color: rgba(218,241,222,0.85);
    border: 1px solid rgba(218,241,222,0.22);
    padding: 5px 11px;
    border-radius: 30px;
    white-space: nowrap;
}
.sv-package-cta {
    display: flex; align-items: center; justify-content: center;
    margin-top: auto;
    padding: 13px;
    border-radius: 10px;
    background: var(--kaaya-white);
    color: var(--kaaya-black);
    font-family: var(--kg-body-font); font-size: 13px; font-weight: 700;
    text-decoration: none;
    transition: background var(--kg-speed-fast) var(--kg-ease), transform var(--kg-speed-fast) var(--kg-ease);
}
.sv-package-cta:hover { background: var(--kaaya-sage); transform: translateY(-1px); }

@media (max-width: 992px) { .sv-package-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sv-package-grid { grid-template-columns: 1fr; } }
@media (max-width: 992px) {
    .sv-packages { padding: 90px 0; }
    .sv-packages .sv-section-head { margin-bottom: 44px; }
}
@media (max-width: 560px) {
    .sv-packages { padding: 68px 0; }
}