/* Explain: Controls page layout, spacing, and font scaling for compact views. */
.page-shell {
    min-height: 100vh;
    background: var(--background-color);
}

.site-container {
    width: min(100% - 2rem, 1240px);
    margin-inline: auto;
}

.section-spacing {
    padding-block: clamp(4rem, 9vw, 8rem);
}

.section-heading {
    max-width: 780px;
}

.offset-anchor {
    scroll-margin-top: 6.5rem;
}

@media (max-width: 767px) {
    .site-container {
        width: min(100% - 1.25rem, 1240px);
    }

    .section-spacing {
        padding-block: 3.5rem;
    }
}

/* ============================================================
   Compact layout for the guide's inner pages
   (the "Sitemap" category and every page it links to).
   The magazine homepage is marked by #scrollProgress and keeps
   its own editorial scale, so it is excluded here. This block
   loads after the component styles, so generic pages become
   denser while pages that already have their own tuned rules
   stay as they are.
   ============================================================ */

body:not(:has(#scrollProgress)):not(:has(.gallery-grid)) main .section-spacing {
    padding-block: 1rem !important;
}

body:not(:has(#scrollProgress)):not(:has(.gallery-grid)) main .section-heading {
    max-width: 40rem;
}

/* Smaller heading scale */
body:not(:has(#scrollProgress)) main .text-6xl {
    font-size: 1.6rem !important;
    line-height: 1.2 !important;
}

body:not(:has(#scrollProgress)) main .text-5xl {
    font-size: 1.5rem !important;
    line-height: 1.22 !important;
}

body:not(:has(#scrollProgress)) main .text-4xl {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
}

body:not(:has(#scrollProgress)) main .text-3xl {
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
}

body:not(:has(#scrollProgress)) main .text-2xl {
    font-size: 1.1rem !important;
    line-height: 1.35 !important;
}

body:not(:has(#scrollProgress)) main .text-xl {
    font-size: 1.02rem !important;
    line-height: 1.45 !important;
}

body:not(:has(#scrollProgress)) main .text-lg {
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
}

body:not(:has(#scrollProgress)) main .text-base {
    font-size: 0.9rem !important;
    line-height: 1.72 !important;
}

body:not(:has(#scrollProgress)) main .page-head .page-title {
    margin-top: 0.5rem !important;
    font-size: 1.3rem !important;
    line-height: 1.25 !important;
}

body:not(:has(#scrollProgress)) main .page-head .page-subtitle {
    margin-top: 0.4rem !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
}

/* Shorter image frames */
body:not(:has(#scrollProgress)) main .aspect-video,
body:not(:has(#scrollProgress)) main .aspect-\[16\/9\],
body:not(:has(#scrollProgress)) main .aspect-\[16\/10\] {
    aspect-ratio: 2.2 / 1 !important;
}

body:not(:has(#scrollProgress)) main .aspect-\[4\/3\] {
    aspect-ratio: 1.8 / 1 !important;
}

body:not(:has(#scrollProgress)) main .aspect-\[4\/5\] {
    aspect-ratio: 1.1 / 1 !important;
}

/* Tighter vertical rhythm */
body:not(:has(#scrollProgress)) main .mt-12,
body:not(:has(#scrollProgress)) main .mt-10,
body:not(:has(#scrollProgress)) main .mt-8,
body:not(:has(#scrollProgress)) main .mt-7,
body:not(:has(#scrollProgress)) main .mt-6,
body:not(:has(#scrollProgress)) main .mt-5 {
    margin-top: 0.9rem !important;
}

body:not(:has(#scrollProgress)) main .mb-12,
body:not(:has(#scrollProgress)) main .mb-10,
body:not(:has(#scrollProgress)) main .mb-8,
body:not(:has(#scrollProgress)) main .mb-6 {
    margin-bottom: 0.9rem !important;
}

body:not(:has(#scrollProgress)) main .py-16,
body:not(:has(#scrollProgress)) main .py-14,
body:not(:has(#scrollProgress)) main .py-12 {
    padding-block: 1.4rem !important;
}

body:not(:has(#scrollProgress)) main .gap-8,
body:not(:has(#scrollProgress)) main .gap-7,
body:not(:has(#scrollProgress)) main .gap-6,
body:not(:has(#scrollProgress)) main .gap-5 {
    gap: 0.8rem !important;
}

/* Sitemap: denser link groups and filter chips */
body:not(:has(#scrollProgress)) main .category-link {
    min-height: 2.4rem !important;
    padding: 0.4rem 0.7rem !important;
}

body:not(:has(#scrollProgress)) main .category-link-name {
    font-size: 0.84rem !important;
}

body:not(:has(#scrollProgress)) main .rest-chip {
    min-height: 2.2rem !important;
    font-size: 0.78rem !important;
    padding: 0.35rem 0.8rem !important;
}

/* ============================================================
   Extra-compact layout for the Sitemap page (sitemap.html) and
   the "All destinations in Thailand" page (cities.html) —
   smaller headings, shorter image frames, denser cards and
   tighter link rows so far more fits on screen.
   ============================================================ */

body.sitemap-page:not(:has(#scrollProgress)) main .section-spacing,
body.cities-page:not(:has(#scrollProgress)) main .section-spacing {
    padding-block: 0.85rem !important;
}

/* ---- Sitemap page ---- */
body.sitemap-page:not(:has(#scrollProgress)) main .page-head .page-title {
    margin-top: 0.3rem !important;
    font-size: 1.1rem !important;
    line-height: 1.25 !important;
}

body.sitemap-page:not(:has(#scrollProgress)) main .page-head .page-subtitle {
    margin-top: 0.3rem !important;
    font-size: 0.8rem !important;
    line-height: 1.55 !important;
}

body.sitemap-page:not(:has(#scrollProgress)) main .section-kicker {
    font-size: 0.68rem !important;
    padding: 0.32rem 0.7rem !important;
    gap: 0.35rem !important;
}

body.sitemap-page:not(:has(#scrollProgress)) main .explorer-card {
    padding: 0.85rem !important;
}

body.sitemap-page:not(:has(#scrollProgress)) main .explorer-card h2 {
    gap: 0.6rem !important;
    font-size: 0.98rem !important;
}

body.sitemap-page:not(:has(#scrollProgress)) main .explorer-card h2 > span {
    width: 2.1rem !important;
    height: 2.1rem !important;
    font-size: 0.85rem !important;
}

body.sitemap-page:not(:has(#scrollProgress)) main .explorer-card ul {
    margin-top: 0.7rem !important;
    gap: 0.3rem !important;
}

body.sitemap-page:not(:has(#scrollProgress)) main .category-link {
    min-height: 2rem !important;
    padding: 0.28rem 0.6rem !important;
    gap: 0.5rem !important;
}

body.sitemap-page:not(:has(#scrollProgress)) main .category-link-name {
    font-size: 0.78rem !important;
}

body.sitemap-page:not(:has(#scrollProgress)) main nav.mt-6 {
    margin-top: 0.9rem !important;
    gap: 0.35rem !important;
}

body.sitemap-page:not(:has(#scrollProgress)) main .rest-chip {
    min-height: 1.95rem !important;
    font-size: 0.72rem !important;
    gap: 0.3rem !important;
    padding: 0.28rem 0.7rem !important;
}

/* ---- All destinations in Thailand (cities.html) ---- */
body.cities-page:not(:has(#scrollProgress)) main .section-kicker {
    font-size: 0.68rem !important;
    padding: 0.32rem 0.7rem !important;
    gap: 0.35rem !important;
}

body.cities-page:not(:has(#scrollProgress)) main .section-heading p {
    margin-top: 0.4rem !important;
    font-size: 0.82rem !important;
    line-height: 1.6 !important;
}

body.cities-page:not(:has(#scrollProgress)) main .text-3xl {
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
}

body.cities-page:not(:has(#scrollProgress)) main .text-2xl {
    font-size: 1rem !important;
    line-height: 1.3 !important;
}

body.cities-page:not(:has(#scrollProgress)) main .text-xl {
    font-size: 0.92rem !important;
    line-height: 1.35 !important;
}

body.cities-page:not(:has(#scrollProgress)) main .editorial-card h2,
body.cities-page:not(:has(#scrollProgress)) main .editorial-card h3 {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
}

body.cities-page:not(:has(#scrollProgress)) main .editorial-card p {
    font-size: 0.74rem !important;
    line-height: 1.55 !important;
}

body.cities-page:not(:has(#scrollProgress)) main .editorial-card strong {
    font-size: 0.85rem !important;
}

body.cities-page:not(:has(#scrollProgress)) main .editorial-card .text-sm {
    font-size: 0.75rem !important;
    line-height: 1.55 !important;
}

/* Shorter card image frames */
body.cities-page:not(:has(#scrollProgress)) main .editorial-card .h-20 {
    height: 3.75rem !important;
}

body.cities-page:not(:has(#scrollProgress)) main .editorial-card .h-16 {
    height: 2.75rem !important;
}

body.cities-page:not(:has(#scrollProgress)) main .editorial-card .w-16 {
    width: 2.75rem !important;
}

@media (min-width: 640px) {
    body.cities-page:not(:has(#scrollProgress)) main .editorial-card .sm\:h-24 {
        height: 4.5rem !important;
    }
}

/* Denser cards and tighter rhythm */
body.cities-page:not(:has(#scrollProgress)) main .editorial-card .p-5 {
    padding: 0.8rem !important;
}

body.cities-page:not(:has(#scrollProgress)) main .editorial-card .p-3 {
    padding: 0.55rem !important;
}

body.cities-page:not(:has(#scrollProgress)) main .editorial-card .p-4 {
    padding: 0.7rem !important;
}

body.cities-page:not(:has(#scrollProgress)) main .region-city-fact-text {
    font-size: 0.78rem !important;
    line-height: 1.55 !important;
}

body.cities-page:not(:has(#scrollProgress)) main .region-city-hotel-name {
    font-size: 0.78rem !important;
}

body.cities-page:not(:has(#scrollProgress)) main .region-city-hotel-price {
    font-size: 0.74rem !important;
}

body.cities-page:not(:has(#scrollProgress)) main .mt-8,
body.cities-page:not(:has(#scrollProgress)) main .mt-10,
body.cities-page:not(:has(#scrollProgress)) main .mt-12 {
    margin-top: 0.95rem !important;
}

body.cities-page:not(:has(#scrollProgress)) main .gap-5,
body.cities-page:not(:has(#scrollProgress)) main .gap-4 {
    gap: 0.7rem !important;
}

body.cities-page:not(:has(#scrollProgress)) main .gap-3 {
    gap: 0.5rem !important;
}

body.cities-page:not(:has(#scrollProgress)) main .py-10 {
    padding-block: 1.1rem !important;
}

body.cities-page:not(:has(#scrollProgress)) main .min-h-12 {
    min-height: 2.5rem !important;
}