/* ====== TOKENS ====== */
:root{
    --brand:#00a7a7;         /* links */
    --accent:#ff6f61;        /* coral buttons */
    --accent-600:#ff5b4a;
    --text:#2a2a2a;
    --muted:#64748b;         /* gray text */
    --line:#e9eef0;          /* light border */
    --card:#ffffff;
    --bg:#ffffff;
    --bg-alt:#eaf6f6;        /* soft teal section bg */
    --container:1120px;
    --radius-lg:16px;
    --radius-xl:18px;
    --shadow-sm:0 2px 10px rgba(0,0,0,.06);
    --shadow-md:0 6px 24px rgba(0,0,0,.10);
}

/* ====== BASE ====== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
    color:var(--text); background:var(--bg); line-height:1.6;
}
img{display:block; max-width:100%; height:auto}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.sr-only{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ====== LAYOUT WRAPPERS ====== */
.container{max-width:var(--container); margin-inline:auto; padding:clamp(14px,2.2vw,24px)}
.section{padding-block:clamp(32px,5vw,64px)}
.bg-alt{background:var(--bg-alt); border-block:1px solid #dff0f0}

/* ====== HERO ====== */
.hero{padding-block:clamp(48px,8vw,96px); text-align:center; background:linear-gradient(180deg,#f7fbfb 0%,#fff 100%)}
.hero .upper-label{letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 .4rem}
.hero h1{font-size:clamp(28px,4.5vw,40px); line-height:1.15; margin:.25rem 0 .75rem}
.hero .description{max-width:70ch; margin-inline:auto; color:#475569}
.btn-group{display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap}

/* ====== BUTTONS ====== */
.btn{
    display:inline-block; background:var(--accent); color:#fff;
    border-radius:12px; padding:.7rem 1rem; font-weight:600;
    box-shadow:var(--shadow-sm); border:1px solid rgba(0,0,0,.03);
}
.btn:hover{background:var(--accent-600); text-decoration:none}

/* ====== GRID CARDS (Top Destinations / Explore More) ====== */
.grid{
    display:grid; gap:clamp(16px,2vw,24px);
    grid-template-columns:repeat(3,minmax(0,1fr));
}
.card{
    background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius-xl); box-shadow:var(--shadow-sm);
    padding:clamp(14px,1.8vw,18px);
}
.card img{
    border-radius:14px; width:100%; aspect-ratio:3/2; object-fit:cover;
    box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.card h3{margin:.75rem 0 .25rem; font-size:1.05rem; text-align:center}
.card p{margin:.35rem 0 .6rem; color:#4b5563; font-size:.95rem; text-align:center}
.card .btn{display:block; width:max-content; margin:.4rem auto 0}

/* Responsive grid */
@media (max-width: 1024px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 640px){ .grid{grid-template-columns:1fr} }

/* ====== FAQ ====== */
.faq h2{margin:0 0 .75rem}
.faq h3{margin:1.2rem 0 .35rem; font-size:1.05rem}
.faq p{margin:.35rem 0; color:#475569}
.faq ul{padding-left:1.2rem; margin:.5rem 0}
.faq li{margin:.25rem 0}

/* ====== UTILITIES ====== */
.upper-label{text-transform:uppercase; font-weight:700; letter-spacing:.12em; color:#6b7280}
.description{font-size:1.05rem}

.site-footer{
    background:var(--bg-alt);
    border-top:1px solid var(--line);
    padding:.8rem 0;
    font-size:.9rem;
    color:#475569;
}
.footer-inner{
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:.5rem;
}
.footer-brand{display:flex; gap:1rem; align-items:center; flex-wrap:wrap}
.footer-brand .logo{font-weight:600; color:var(--brand)}
.footer-nav{display:flex; gap:1rem; flex-wrap:wrap}
.footer-nav a{color:inherit; transition:.2s}
.footer-nav a:hover{color:var(--accent)}

.accordion-item{
    border-bottom:1px solid var(--line);
}
.accordion-header{
    all:unset;
    display:block;
    width:100%;
    cursor:pointer;
    padding:1rem 0;
    font-weight:600;
    color:var(--text);
}
.accordion-header::after{
    content:"+";
    float:right;
    transition:.3s;
}
.accordion-item.open .accordion-header::after{content:"−";}
.accordion-content{
    max-height:0; overflow:hidden;
    transition:max-height .3s ease;
    color:#475569;
}
.accordion-item.open .accordion-content{max-height:500px; /* enough space */}

/* --- HERO BANNER --- */
.hero-banner{
    /* soft sky-to-white gradient like your image */
    background:
            linear-gradient(180deg, #cfe6ff 0%, #dff0ff 22%, #eaf6f6 62%, #ffffff 100%);
    padding-block: clamp(64px, 9vw, 120px);
    text-align:center;
}
.hero-container{ max-width: 1080px; }

/* headline “glass” plate */
.hero-title-wrap{
    display:inline-block;
    margin: clamp(12px,1.5vw,18px) auto;
    padding: clamp(12px,1.3vw,18px) clamp(18px,2vw,24px);
    background: rgba(255,255,255,.65);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,.08);
}
.hero-title{
    margin:0;
    line-height:1.12;
    font-size: clamp(32px, 6vw, 54px);
    max-width: 22ch;
}

/* keep existing label/description but tighten */
.hero .upper-label{
    letter-spacing:.15em;
    text-transform:uppercase;
    color:#31475e;
    opacity:.85;
    font-weight:700;
    margin:0 0 .6rem;
}
.hero .description{
    max-width: 70ch;
    margin: .6rem auto 0;
    color:#425a70;
}

/* big buttons + outline style */
.btn-lg{ padding:.9rem 1.25rem; border-radius: 12px; font-weight:700 }
.btn-outline{
    background:#fff; color:#0b8b8b; border:1px solid #bfe5e5;
}
.btn-outline:hover{ background:#f6ffff; text-decoration:none }

/* ===== Latest Guides (responsive & tidy) ===== */

/* grid: feature (2fr) + sidebar (1fr) */
.blog-highlight{
    display:grid;
    gap: clamp(16px, 2vw, 24px);
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;               /* stop cards stretching to column height */
}

/* allow content to shrink instead of overflowing */
.blog-highlight > * { min-width: 0; }

/* generic card polish */
.blog-card{
    display: flex;
    flex-direction: column;
    gap: .65rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: clamp(14px, 1.8vw, 18px);
    box-shadow: var(--shadow-sm);
    align-self: start;
}

/* images: consistent ratio + cover */
.blog-card img{
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;     /* feature image height */
    object-fit: cover;
    border-radius: 14px;
}

/* feature card: a touch more breathing room */
.blog-main.blog-card{ padding: clamp(16px, 1.8vw, 20px); }
.blog-main .read-btn{ width: max-content; }

/* sidebar: stacked cards with compact spacing */
.blog-side{
    display: grid;
    gap: 16px;
}
.blog-side .blog-card{
    padding: 14px;
}
.blog-side .blog-card img{
    aspect-ratio: 4/3;     /* smaller, boxier thumbs look better here */
}
.blog-side .blog-card h4{ margin: .15rem 0 .35rem; text-align:center; }
.blog-side .blog-card p{ margin: .25rem 0; text-align:center; color:#566173; }
.blog-side .read-btn, .blog-side .btn{ width: 100%; text-align:center; }

/* make long headings wrap normally without blowing the layout */
.blog-card h3, .blog-card h4{
    overflow-wrap: anywhere;   /* modern browsers */
    word-break: normal;
}

/* ===== Responsive breakpoints ===== */

/* tablet: keep two columns but ease typography & gutters if you like */
@media (max-width: 1024px){
    .blog-highlight{
        gap: 18px;
        grid-template-columns: 1fr;   /* stack feature & sidebar */
    }
    .blog-side{ grid-template-columns: 1fr 1fr; }  /* 2-up sidebar cards */
    .blog-side .blog-card .read-btn{ width: 100%; }
}

/* phone: single column, full-width buttons */
@media (max-width: 640px){
    .blog-side{ grid-template-columns: 1fr; }
    .blog-main .read-btn{ width: 100%; text-align:center; }
    .blog-card img{ aspect-ratio: 16/10; }  /* a bit shorter on tiny screens */
}