/* =========================================================
   KALAPANI HOLIDAYS
   PACKAGES PAGE STYLES
   FINAL DESIGN ALIGNMENT
   ========================================================= */

.packages-page{
    --packages-blue:#10AEF3;
    --packages-blue-dark:#078FD0;
    --packages-navy:#071A33;
    --packages-text:#50657D;
    --packages-muted:#718296;
    --packages-border:#E3EBF2;
    --packages-light:#F6F9FC;
    --packages-radius:20px;

    width:100%;
    background:#fff;
    color:var(--packages-navy);
    overflow:hidden;
}

/* =========================================================
   CONTAINER
   ========================================================= */

.packages-page .container{
    width:min(calc(100% - 48px),1320px);
    margin:0 auto;
}

/* =========================================================
   BREADCRUMB
   ========================================================= */

.packages-breadcrumb-wrap{
    background:#fff;
    padding:12px 0 0;
}

.packages-breadcrumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:9px;

    min-height:35px;

    font-size:15px;
    line-height:1.5;
}

.packages-breadcrumb a{
    color:#60758B;
    font-weight:500;
    text-decoration:none;
    transition:color .2s ease;
}

.packages-breadcrumb a:hover{
    color:var(--packages-blue);
}

.packages-breadcrumb span{
    color:#A3AFBB;
}

.packages-breadcrumb span[aria-current="page"]{
    color:#718296;
}

/* =========================================================
   HERO
   Matches the current Activities page visual language
   ========================================================= */

.packages-hero{
    position:relative;
    min-height:675px;

    display:flex;
    align-items:center;

    background:
        linear-gradient(
            90deg,
            #071D35 0%,
            #092A49 38%,
            #0B4770 66%,
            #087CB3 100%
        );

    color:#fff;
    overflow:hidden;
}

/* Right-side atmospheric glow */

.packages-hero::before{
    content:"";
    position:absolute;

    width:600px;
    height:600px;

    right:-170px;
    bottom:-340px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(24,190,247,.42) 0%,
            rgba(24,190,247,.16) 38%,
            rgba(24,190,247,0) 72%
        );

    pointer-events:none;
}

/* Subtle top/right blue atmosphere */

.packages-hero::after{
    content:"";
    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at 92% 48%,
            rgba(23,190,247,.16),
            transparent 42%
        );

    pointer-events:none;
}

.packages-hero .container{
    position:relative;
    z-index:2;
}

.packages-hero-content{
    max-width:900px;
    padding:78px 0 92px;
}

/* =========================================================
   EYEBROW
   ========================================================= */

.packages-eyebrow{
    display:inline-block;

    margin-bottom:19px;

    color:var(--packages-blue);

    font-size:13px;
    font-weight:700;

    letter-spacing:.17em;
    line-height:1.4;
}

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

.packages-hero h1{
    max-width:900px;

    margin:0;

    color:#fff;

    font-size:clamp(52px,5.3vw,78px);
    font-weight:700;
    line-height:1.02;

    letter-spacing:-.045em;
}

/*
   Optional accent class.
   If later we wrap the second part in:
   <span class="packages-title-accent">...</span>
   it will match Activities exactly.
*/

.packages-hero h1 .packages-title-accent{
    color:var(--packages-blue);
}

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

.packages-hero p{
    max-width:820px;

    margin:27px 0 0;

    color:rgba(255,255,255,.86);

    font-size:18px;
    line-height:1.72;
}

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

.packages-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;

    margin-top:32px;
}

/* =========================================================
   COMMON BUTTON
   ========================================================= */

.package-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:52px;

    padding:0 28px;

    border-radius:999px;

    font-size:14px;
    font-weight:700;

    text-decoration:none;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}

.package-btn:hover{
    transform:translateY(-2px);
}

/* Primary */

.package-btn-primary{
    background:var(--packages-blue);
    color:#fff;

    box-shadow:
        0 10px 25px rgba(16,174,243,.20);
}

.package-btn-primary:hover{
    background:var(--packages-blue-dark);
    color:#fff;
}

/* Outline */

.package-btn-outline{
    border:1px solid rgba(255,255,255,.55);
    background:transparent;
    color:#fff;
}

.package-btn-outline:hover{
    border-color:#fff;
    background:#fff;
    color:var(--packages-navy);
}

/* WhatsApp */

.package-btn-whatsapp{
    border:1px solid #D7E4EC;
    background:#fff;
    color:#168C54;
}

.package-btn-whatsapp:hover{
    border-color:#168C54;
    background:#168C54;
    color:#fff;
}

/* =========================================================
   SECTION HEADING
   ========================================================= */

.packages-section-heading{
    max-width:900px;
    margin-bottom:42px;
}

.packages-section-heading>span{
    display:inline-block;

    margin-bottom:13px;

    color:var(--packages-blue);

    font-size:12px;
    font-weight:700;

    letter-spacing:.15em;
    line-height:1.4;
}

.packages-section-heading h2{
    margin:0;

    color:var(--packages-navy);

    font-size:clamp(36px,4vw,54px);
    font-weight:700;
    line-height:1.08;

    letter-spacing:-.04em;
}

.packages-section-heading p{
    max-width:760px;

    margin:17px 0 0;

    color:var(--packages-text);

    font-size:16px;
    line-height:1.75;
}

/* =========================================================
   CATEGORY SECTION
   ========================================================= */

.package-categories{
    padding:90px 0;

    background:#fff;
}

/* =========================================================
   CATEGORY GRID
   ========================================================= */

.package-category-grid{
    display:grid;

    grid-template-columns:repeat(5,minmax(0,1fr));

    gap:18px;
}

/* =========================================================
   CATEGORY CARD
   ========================================================= */

.package-category-card{
    position:relative;

    display:flex;
    flex-direction:column;

    min-height:220px;

    padding:24px;

    border:1px solid var(--packages-border);
    border-radius:var(--packages-radius);

    background:#fff;

    text-decoration:none;

    box-shadow:
        0 8px 30px rgba(7,26,51,.045);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.package-category-card:hover{
    transform:translateY(-6px);

    border-color:rgba(16,174,243,.38);

    box-shadow:
        0 18px 42px rgba(7,26,51,.10);
}

.package-category-card .category-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:54px;
    height:54px;

    margin-bottom:21px;

    border-radius:16px;

    background:#EEF8FD;

    font-size:27px;

    transition:
        transform .25s ease,
        background .25s ease;
}

.package-category-card:hover .category-icon{
    transform:scale(1.06);
    background:#E2F5FD;
}

.package-category-card h3{
    margin:0 0 9px;

    color:var(--packages-navy);

    font-size:19px;
    font-weight:700;
    line-height:1.25;
}

.package-category-card p{
    margin:0;

    color:#65788C;

    font-size:13px;
    line-height:1.65;
}

.package-category-card>span{
    display:block;

    margin-top:auto;
    padding-top:18px;

    color:var(--packages-blue);

    font-size:12px;
    font-weight:700;
}

/* =========================================================
   PACKAGE LIST
   ========================================================= */

.packages-list-section{
    padding:90px 0 100px;

    background:var(--packages-light);
}

.packages-grid{
    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:25px;

    align-items:stretch;
}

/* =========================================================
   PACKAGE CARD
   ========================================================= */

.package-card{
    display:flex;
    flex-direction:column;

    min-width:0;
    height:100%;

    overflow:hidden;

    border:1px solid var(--packages-border);
    border-radius:20px;

    background:#fff;

    box-shadow:
        0 8px 28px rgba(7,26,51,.055);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.package-card:hover{
    transform:translateY(-6px);

    box-shadow:
        0 18px 42px rgba(7,26,51,.11);
}

/* =========================================================
   IMAGE
   ========================================================= */

.package-card-image{
    position:relative;

    width:100%;
    height:245px;

    overflow:hidden;

    background:#EAF1F7;
}

.package-card-image a{
    display:block;
    width:100%;
    height:100%;
}

.package-card-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .5s ease;
}

.package-card:hover .package-card-image img{
    transform:scale(1.05);
}

/* =========================================================
   BADGE
   ========================================================= */

.package-badge{
    position:absolute;

    top:15px;
    left:15px;

    z-index:2;

    display:inline-flex;
    align-items:center;

    min-height:32px;

    padding:7px 13px;

    border-radius:999px;

    background:var(--packages-blue);

    color:#fff;

    font-size:11px;
    font-weight:700;

    box-shadow:
        0 6px 18px rgba(16,174,243,.25);
}

/* =========================================================
   CARD CONTENT
   ========================================================= */

.package-card-content{
    display:flex;
    flex-direction:column;
    flex:1;

    padding:23px;
}

.package-duration{
    margin-bottom:10px;

    color:var(--packages-blue);

    font-size:12px;
    font-weight:700;
    line-height:1.4;
}

.package-card-title{
    margin:0 0 9px;

    color:var(--packages-navy);

    font-size:22px;
    font-weight:700;
    line-height:1.25;

    letter-spacing:-.015em;
}

.package-card-title a{
    color:inherit;
    text-decoration:none;
}

.package-card-title a:hover{
    color:var(--packages-blue);
}

.package-location{
    margin-bottom:14px;

    color:#687B8F;

    font-size:13px;
    font-weight:600;
    line-height:1.5;
}

.package-description{
    margin:0 0 17px;

    color:#566A7E;

    font-size:14px;
    line-height:1.65;
}

/* =========================================================
   META
   ========================================================= */

.package-meta{
    display:flex;
    flex-wrap:wrap;

    gap:7px;

    margin-bottom:17px;
}

.package-meta span{
    display:inline-flex;
    align-items:center;

    min-height:30px;

    padding:6px 9px;

    border-radius:8px;

    background:#F0F7FC;

    color:#405875;

    font-size:11px;
    font-weight:700;
    line-height:1.3;
}

/* =========================================================
   FEATURES
   ========================================================= */

.package-features{
    display:flex;
    flex-direction:column;

    gap:6px;

    margin:0 0 19px;
    padding:0;

    list-style:none;
}

.package-features li{
    display:flex;
    align-items:flex-start;

    gap:7px;

    color:#53687C;

    font-size:12px;
    line-height:1.5;
}

.package-features li span{
    flex:0 0 auto;
    color:var(--packages-blue);
    font-weight:800;
}

/* =========================================================
   PRICE
   ========================================================= */

.package-price{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;

    gap:5px;

    margin-top:auto;
    padding-top:17px;

    border-top:1px solid #E7EDF2;
}

.package-price small{
    width:100%;

    margin-bottom:1px;

    color:#7C8D9F;

    font-size:11px;
    font-weight:600;
    line-height:1.4;
}

.package-price strong{
    color:var(--packages-navy);

    font-size:27px;
    font-weight:800;
    line-height:1.1;
}

.package-price span{
    color:#748496;

    font-size:12px;
    font-weight:600;
}

/* =========================================================
   CARD ACTIONS
   ========================================================= */

.package-card-actions{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:9px;

    margin-top:18px;
}

.package-card-actions .package-btn{
    min-height:44px;

    padding:0 12px;

    font-size:12px;
}

/* =========================================================
   EMPTY STATE
   ========================================================= */

.packages-empty{
    padding:70px 30px;

    border:1px solid var(--packages-border);
    border-radius:22px;

    background:#fff;

    text-align:center;

    box-shadow:
        0 10px 35px rgba(7,26,51,.06);
}

.packages-empty .empty-icon{
    margin-bottom:15px;
    font-size:38px;
}

.packages-empty h2{
    margin:0 0 12px;

    color:var(--packages-navy);

    font-size:30px;
    font-weight:700;
}

.packages-empty p{
    max-width:650px;

    margin:0 auto 25px;

    color:#60738A;

    line-height:1.7;
}

/* =========================================================
   SEO CONTENT
   ========================================================= */

.packages-seo-content{
    padding:90px 0;

    background:#fff;
}

.seo-content-box{
    max-width:980px;
    margin:0 auto;
}

.seo-content-box>span{
    display:inline-block;

    margin-bottom:12px;

    color:var(--packages-blue);

    font-size:12px;
    font-weight:700;

    letter-spacing:.14em;
}

.seo-content-box h2{
    margin:0 0 20px;

    color:var(--packages-navy);

    font-size:clamp(34px,4vw,50px);
    font-weight:700;
    line-height:1.12;

    letter-spacing:-.03em;
}

.seo-content-box p{
    margin:0 0 18px;

    color:#50657D;

    font-size:16px;
    line-height:1.8;
}

.seo-content-box p:last-child{
    margin-bottom:0;
}

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

.packages-faq{
    padding:90px 0;

    background:var(--packages-light);
}

.packages-faq .packages-section-heading{
    max-width:850px;
    margin:0 auto 35px;
    text-align:center;
}

.packages-faq-list{
    max-width:900px;
    margin:0 auto;
}

.packages-faq details{
    margin-bottom:11px;

    overflow:hidden;

    border:1px solid #E1E9F0;
    border-radius:15px;

    background:#fff;

    box-shadow:
        0 5px 20px rgba(7,26,51,.035);
}

.packages-faq summary{
    position:relative;

    padding:19px 55px 19px 22px;

    color:var(--packages-navy);

    font-size:15px;
    font-weight:700;
    line-height:1.5;

    cursor:pointer;
    list-style:none;
}

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

.packages-faq summary::after{
    content:"+";

    position:absolute;

    top:50%;
    right:21px;

    transform:translateY(-50%);

    color:var(--packages-blue);

    font-size:24px;
    font-weight:400;
}

.packages-faq details[open] summary::after{
    content:"−";
}

.packages-faq details p{
    margin:0;

    padding:0 22px 22px;

    color:#5B6E84;

    font-size:14px;
    line-height:1.7;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1199px){

    .packages-page .container{
        width:min(calc(100% - 40px),1100px);
    }

    .packages-hero{
        min-height:610px;
    }

    .packages-hero-content{
        max-width:820px;
    }

    .package-category-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .packages-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width:850px){

    .packages-page .container{
        width:min(calc(100% - 36px),720px);
    }

    .packages-hero{
        min-height:auto;
    }

    .packages-hero-content{
        padding:72px 0 78px;
    }

    .package-category-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:767px){

    .packages-page .container{
        width:calc(100% - 32px);
    }

    .packages-breadcrumb-wrap{
        padding-top:12px;
    }

    .packages-breadcrumb{
        min-height:32px;
        font-size:13px;
    }

    .packages-hero-content{
        padding:58px 0 65px;
    }

    .packages-eyebrow{
        margin-bottom:15px;
        font-size:10px;
        letter-spacing:.15em;
    }

    .packages-hero h1{
        font-size:42px;
        line-height:1.06;
        letter-spacing:-.035em;
    }

    .packages-hero p{
        margin-top:21px;
        font-size:15px;
        line-height:1.7;
    }

    .packages-hero-actions{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
        margin-top:27px;
    }

    .packages-hero .package-btn{
        min-height:50px;
        padding:0 24px;
    }

    .package-categories,
    .packages-list-section,
    .packages-seo-content,
    .packages-faq{
        padding:62px 0;
    }

    .packages-section-heading{
        margin-bottom:30px;
    }

    .packages-section-heading>span{
        margin-bottom:10px;
        font-size:10px;
    }

    .packages-section-heading h2{
        font-size:33px;
        line-height:1.13;
    }

    .packages-section-heading p{
        margin-top:14px;
        font-size:14px;
        line-height:1.7;
    }

    .package-category-grid{
        grid-template-columns:1fr;
        gap:15px;
    }

    .package-category-card{
        min-height:180px;
        padding:22px;
    }

    .packages-grid{
        grid-template-columns:1fr;
        gap:19px;
    }

    .package-card-image{
        height:225px;
    }

    .package-card-content{
        padding:21px;
    }

    .package-card-title{
        font-size:21px;
    }

    .package-card-actions{
        grid-template-columns:1fr;
    }

    .seo-content-box h2{
        font-size:33px;
    }

    .seo-content-box p{
        font-size:15px;
    }

    .packages-faq .packages-section-heading{
        text-align:left;
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width:420px){

    .packages-page .container{
        width:calc(100% - 24px);
    }

    .packages-hero-content{
        padding:52px 0 60px;
    }

    .packages-hero h1{
        font-size:36px;
    }

    .packages-section-heading h2{
        font-size:30px;
    }

    .package-card-image{
        height:210px;
    }

    .package-card-content{
        padding:19px;
    }
}