/* Travel Code Design System v1.0 — Auto-generated */

/* Travel Code Color Tokens */

:root {

    --color-brand:        #FF6B00;

    --color-brand-hover:  #e55f00;

    --color-brand-light:  rgba(255,107,0,0.1);

    --color-brand-dark:   #B34D00;



    --color-navy:         #071B3B;

    --color-navy-soft:    #0d2a4a;

    --color-navy-light:   #1a3a5c;



    --color-bg:           #FFFFFF;

    --color-bg-soft:      #F8F9FB;

    --color-bg-muted:     #F4F6FA;

    --color-bg-dark:      #0A1628;



    --color-text:         #0A1628;

    --color-text-soft:    #444F5E;

    --color-text-muted:   #888EA0;

    --color-text-faint:   #B8BDC8;

    --color-text-inverse: #FFFFFF;



    --color-border:       rgba(0,0,0,0.07);

    --color-border-soft:  rgba(0,0,0,0.04);

    --color-border-brand: rgba(255,107,0,0.25);



    --color-success:      #22c55e;

    --color-success-bg:   rgba(34,197,94,0.08);

    --color-warning:      #f59e0b;

    --color-warning-bg:   rgba(245,158,11,0.08);

    --color-danger:       #ef4444;

    --color-danger-bg:    rgba(239,68,68,0.08);

    --color-info:         #3b82f6;

    --color-info-bg:      rgba(59,130,246,0.08);



    --color-overlay-light: rgba(8,28,51,0.4);

    --color-overlay-dark:  rgba(8,28,51,0.85);

}


/* Travel Code Typography Tokens */

:root {

    --fs-2xs: clamp(0.625rem, 0.6vw,  0.68rem);

    --fs-xs:  clamp(0.7rem,   0.7vw,  0.75rem);

    --fs-sm:  clamp(0.75rem,  0.85vw, 0.82rem);

    --fs-md:  clamp(0.85rem,  1vw,    0.95rem);

    --fs-lg:  clamp(1rem,     1.2vw,  1.1rem);

    --fs-xl:  clamp(1.1rem,   1.5vw,  1.25rem);

    --fs-2xl: clamp(1.3rem,   2vw,    1.6rem);

    --fs-3xl: clamp(1.6rem,   3vw,    2rem);

    --fs-4xl: clamp(2rem,     4vw,    2.8rem);

    --fs-5xl: clamp(2.5rem,   5.5vw,  4rem);

    --fs-hero:clamp(3rem,     7vw,    5.5rem);



    --lh-tight:   1.1;

    --lh-snug:    1.25;

    --lh-normal:  1.5;

    --lh-relaxed: 1.7;

    --lh-loose:   1.9;



    --fw-regular:  400;

    --fw-medium:   500;

    --fw-semibold: 600;

    --fw-bold:     700;

    --fw-black:    800;

    --fw-ultra:    900;



    --font-sans:  "Inter", system-ui, -apple-system, sans-serif;

    --font-display: "Inter", sans-serif;

    --font-mono:  "SFMono-Regular", Consolas, monospace;



    --reading-width: 68ch;

    --content-width: 80ch;

}


/* Travel Code Motion Tokens */

:root {

    --duration-instant: 50ms;

    --duration-fast:    150ms;

    --duration-normal:  250ms;

    --duration-slow:    400ms;

    --duration-slower:  600ms;

    --duration-lazy:    1000ms;



    --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);

    --ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);

    --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);

    --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);

    --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);



    --transition-base:   all var(--duration-normal) var(--ease-standard);

    --transition-fast:   all var(--duration-fast)   var(--ease-standard);

    --transition-smooth: all var(--duration-slow)   var(--ease-emphasized);

    --transition-hover:  transform var(--duration-normal) var(--ease-emphasized),

                         box-shadow var(--duration-normal) var(--ease-emphasized);

}



@media (prefers-reduced-motion: reduce) {

    *, *::before, *::after {




    }

}


/* Travel Code Container System */

:root {

    --container-reading: 68ch;

    --container-content: 800px;

    --container-sm:   640px;

    --container-md:   960px;

    --container-lg:  1200px;

    --container-xl:  1320px;

    --container-wide:1600px;

    --container-full:100%;

}



.container         { width:100%; max-width:var(--container-xl);      margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); }

.container-reading { width:100%; max-width:var(--container-reading);  margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); }

.container-content { width:100%; max-width:var(--container-content);  margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); }

.container-sm      { width:100%; max-width:var(--container-sm);       margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); }

.container-md      { width:100%; max-width:var(--container-md);       margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); }

.container-lg      { width:100%; max-width:var(--container-lg);       margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); }

.container-wide    { width:100%; max-width:var(--container-wide);     margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); }

.container-full    { width:100%; padding-inline:clamp(1rem,4vw,2rem); }


/* Travel Code Component Tokens */

:root {

    --card-padding-sm: 1rem;

    --card-padding-md: 1.5rem;

    --card-padding-lg: 2rem;

    --card-radius:     var(--radius-xl, 20px);

    --card-shadow:     var(--shadow-sm);

    --card-shadow-hover: var(--shadow-lg);

    --card-border:     1px solid var(--color-border);



    --btn-height-sm:   36px;

    --btn-height-md:   44px;

    --btn-height-lg:   52px;

    --btn-radius:      var(--radius-full, 999px);

    --btn-padding-sm:  0.5rem 1rem;

    --btn-padding-md:  0.75rem 1.5rem;

    --btn-padding-lg:  1rem 2rem;

    --btn-font-weight: 700;



    --input-height:    44px;

    --input-radius:    var(--radius-md, 12px);

    --input-border:    1.5px solid var(--color-border);

    --input-padding:   0.75rem 1rem;



    --badge-radius:    var(--radius-full, 999px);

    --badge-padding:   3px 10px;

    --badge-font-size: var(--fs-2xs);

    --badge-font-weight: 700;



    --hero-min-height-mobile:  60svh;

    --hero-min-height-tablet:  70svh;

    --hero-min-height-desktop: 80vh;



    --sidebar-width:   360px;

    --sidebar-sticky-top: 100px;



    --nav-height: 84px;

    --nav-height-mobile: 60px;

}



:root {

    --space-1:  0.25rem;

    --space-2:  0.5rem;

    --space-3:  0.75rem;

    --space-4:  1rem;

    --space-5:  1.25rem;

    --space-6:  1.5rem;

    --space-8:  2rem;

    --space-10: 2.5rem;

    --space-12: 3rem;

    --space-16: 4rem;

    --space-20: 5rem;

    --space-24: 6rem;



    --radius-sm:   8px;

    --radius-md:   12px;

    --radius-lg:   16px;

    --radius-xl:   20px;

    --radius-2xl:  24px;

    --radius-full: 999px;



    --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);

    --shadow-md:  0 4px 16px rgba(0,0,0,0.08);

    --shadow-lg:  0 8px 32px rgba(0,0,0,0.10);

    --shadow-xl:  0 16px 48px rgba(0,0,0,0.12);

    --shadow-2xl: 0 24px 64px rgba(0,0,0,0.14);



    --shadow-orange-sm: 0 4px 14px rgba(255,107,0,0.2);

    --shadow-orange-md: 0 8px 24px rgba(255,107,0,0.3);

    --shadow-orange-lg: 0 16px 40px rgba(255,107,0,0.4);



    --container-xs:  480px;

    --container-sm:  640px;

    --container-md:  768px;

    --container-lg:  1024px;

    --container-xl:  1200px;

    --container-2xl: 1320px;

    --container-3xl: 1600px;

}



/* Stack — вертикальный поток с единым отступом */

.stack { display: flex; flex-direction: column; }

.stack > * + * { margin-top: var(--stack-space, 1rem); }

.stack-sm { --stack-space: 0.5rem; }

.stack-md { --stack-space: 1rem; }

.stack-lg { --stack-space: 1.5rem; }

.stack-xl { --stack-space: 2rem; }



/* Cluster — горизонтальный поток с переносом */

.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, 0.75rem); align-items: center; }

.cluster-sm { --cluster-gap: 0.5rem; }

.cluster-md { --cluster-gap: 0.75rem; }

.cluster-lg { --cluster-gap: 1rem; }

.cluster-xl { --cluster-gap: 1.5rem; }



/* Auto Grid — умная адаптивная сетка */

.auto-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(var(--min-col, 250px), 1fr));

    gap: var(--grid-gap, 1rem);

}

.auto-grid-sm  { --min-col: 140px; }

.auto-grid-md  { --min-col: 200px; }

.auto-grid-lg  { --min-col: 280px; }

.auto-grid-xl  { --min-col: 340px; }



/* Sidebar Layout — контент + сайдбар */

.sidebar-layout {

    display: flex;

    flex-wrap: wrap;

    gap: var(--sidebar-gap, 2rem);

}

.sidebar-layout > :first-child {

    flex-basis: var(--sidebar-width, 320px);

    flex-grow: 1;

}

.sidebar-layout > :last-child {

    flex-basis: 0;

    flex-grow: 999;

    min-width: var(--sidebar-min, 50%);

}



/* Dashboard — многоколоночный layout для аналитики */

.dashboard-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(var(--dash-col, 300px), 1fr));

    gap: 1.5rem;

}

.dashboard-metrics {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

    gap: 1rem;

}

.dashboard-wide { grid-column: 1 / -1; }



.hide-mobile  { }

.hide-tablet  { }

.hide-desktop { }



@media (max-width: 599px)  { .hide-mobile  { display: none !important; } }

@media (max-width: 1023px) { .hide-tablet  { display: none !important; } }

@media (min-width: 1024px) { .hide-desktop { display: none !important; } }

@media (min-width: 600px)  { .show-mobile-only { display: none !important; } }



.visually-hidden {

    position: absolute;

    width: 1px; height: 1px;

    padding: 0; margin: -1px;

    overflow: hidden;

    clip: rect(0,0,0,0);

    white-space: nowrap;

    border: 0;

}



.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.break-word { word-break: break-word; overflow-wrap: anywhere; }

.no-scroll { overflow: hidden; }

.scroll-x { overflow-x: auto; scrollbar-width: none; }

.scroll-x::-webkit-scrollbar { display: none; }



.p-0 { padding: 0; }

.p-1 { padding: var(--space-1); }

.p-2 { padding: var(--space-2); }

.p-4 { padding: var(--space-4); }

.p-6 { padding: var(--space-6); }

.p-8 { padding: var(--space-8); }



.px-4 { padding-inline: var(--space-4); }

.px-6 { padding-inline: var(--space-6); }

.py-4 { padding-block: var(--space-4); }

.py-8 { padding-block: var(--space-8); }



.mt-4 { margin-top: var(--space-4); }

.mt-6 { margin-top: var(--space-6); }

.mt-8 { margin-top: var(--space-8); }

.mb-4 { margin-bottom: var(--space-4); }

.mb-6 { margin-bottom: var(--space-6); }

.gap-4 { gap: var(--space-4); }

.gap-6 { gap: var(--space-6); }



/* =========================================

   BREAKPOINTS & CONTAINER SYSTEM

   Travel Code Responsive Engine

========================================= */



:root {

    --bp-xs:   320px;

    --bp-sm:   375px;

    --bp-md:   768px;

    --bp-lg:   1024px;

    --bp-xl:   1280px;

    --bp-2xl:  1440px;

    --bp-3xl:  1920px;



    --container-sm:  540px;

    --container-md:  768px;

    --container-lg:  1024px;

    --container-xl:  1200px;

    --container-2xl: 1320px;



    --px-mobile:  1rem;

    --px-tablet:  1.5rem;

    --px-desktop: 2rem;

}



/* Universal container */

.tc-container {

    width: 100%;

    max-width: var(--container-2xl);

    margin-inline: auto;

    padding-inline: clamp(1rem, 4vw, 2rem);

}



/* =========================================

   FLUID TYPOGRAPHY SYSTEM

   clamp(min, preferred, max)

========================================= */



:root {

    --fs-2xs:  clamp(0.625rem, 0.6vw, 0.7rem);

    --fs-xs:   clamp(0.7rem,   0.75vw, 0.78rem);

    --fs-sm:   clamp(0.78rem,  0.9vw,  0.85rem);

    --fs-base: clamp(0.875rem, 1vw,    1rem);

    --fs-md:   clamp(1rem,     1.2vw,  1.1rem);

    --fs-lg:   clamp(1.1rem,   1.5vw,  1.25rem);

    --fs-xl:   clamp(1.25rem,  2vw,    1.5rem);

    --fs-2xl:  clamp(1.5rem,   2.5vw,  2rem);

    --fs-3xl:  clamp(1.8rem,   3.5vw,  2.5rem);

    --fs-4xl:  clamp(2rem,     4vw,    3rem);

    --fs-hero: clamp(2.5rem,   6vw,    5rem);

}



@media (max-width: 599px) {

    h1 { font-size: var(--fs-3xl) !important; }

    h2 { font-size: var(--fs-2xl) !important; }

    h3 { font-size: var(--fs-xl)  !important; }

}



/* =========================================

   AUTO-FIT GRID ENGINE

   No more !important grid hacks

========================================= */



/* Auto responsive grids */

.grid-auto-1 { display: grid; grid-template-columns: 1fr; gap: 1rem; }

.grid-auto-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }

.grid-auto-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }

.grid-auto-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }

.grid-auto-5 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; }



/* Metrics grid — auto 3/5 col */

.ja-metrics {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

    gap: 1rem;

}



/* SEO Command Center */

.ja-seo-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

    gap: 1rem;

}



/* Priority Queue */

.ja-priority-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 1rem;

}



/* Destination cards */

.ja-dest-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 1rem;

}



/* Coverage map */

.ja-coverage-list { display: flex; flex-direction: column; gap: 0.5rem; }



/* Travel stats */

.tw-stats-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    gap: 1rem;

}



/* Achievement grid */

.ab-ach-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

    gap: 1rem;

}



/* Loyalty levels */

.loy-levels__grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

    gap: 1rem;

}



/* Stamps */

.tw-stamps-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

    gap: 1rem;

}



/* Destination map */

.ab-map-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

    gap: 0.75rem;

}



/* Trip cards */

.ab-trips-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

    gap: 1.25rem;

}



/* Recs */

.ab-recs {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 1.25rem;

}



/* Funnel */

.ja-funnel-wrap {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

    gap: 1rem;

}



/* =========================================

   COMPONENT-LEVEL RESPONSIVE

   Per-module adaptive rules

========================================= */



/* ===== GLOBAL ===== */

*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: clip; }

body { overflow-x: clip; min-width: 320px; }

img, video, iframe { max-width: 100%; height: auto; display: block; }



/* Touch targets */

button, a { min-height: 36px; }

@media (max-width: 1024px) {

    button, a { min-height: 40px; }

    .prof-tab-btn, .jl-cat, .ab-tab { min-height: 38px; }

}



/* ===== HEADER ===== */

@media (max-width: 768px) {

    .header-rank-progress { display: none; }

}

@media (max-width: 480px) {

    .header-rank { font-size: 0.65rem; }

    .header-cta { padding: 6px 12px; font-size: 0.72rem; }

}



/* ===== NAVIGATION SCROLLABLE ===== */

@media (max-width: 1024px) {

    .prof-tabs-nav__inner,

    .jl-cats__inner,

    .ab-tabs,

    .jd-meta-bar__inner,

    .td-stats-bar__inner,

    .dest-season-months {

        overflow-x: auto;

        scrollbar-width: none;

        -ms-overflow-style: none;

    }

    .prof-tabs-nav__inner::-webkit-scrollbar,

    .jl-cats__inner::-webkit-scrollbar,

    .ab-tabs::-webkit-scrollbar,

    .jd-meta-bar__inner::-webkit-scrollbar,

    .td-stats-bar__inner::-webkit-scrollbar,

    .dest-season-months::-webkit-scrollbar { display: none; }



    .jl-cats__inner,

    .prof-tabs-nav__inner { flex-wrap: nowrap; }

    .prof-tab-btn, .jl-cat, .ab-tab { white-space: nowrap; flex-shrink: 0; }

}



/* ===== HERO SECTIONS ===== */

@media (max-width: 768px) {

    .jm-hero { min-height: 70svh; }

    .jm-hero__title { font-size: clamp(1.8rem, 7vw, 2.8rem); }

    .jm-hero__scroll { display: none; }



    .jd-hero { min-height: 60svh; }

    .jd-hero__title { font-size: clamp(1.6rem, 6vw, 2.5rem); }



    .td-hero { height: 60svh; min-height: 380px; }

    .td-hero__title { font-size: clamp(1.5rem, 5.5vw, 2.5rem); }

    .td-hero__meta { flex-wrap: wrap; gap: 0.5rem; }



    .jl-hero__title { font-size: clamp(2rem, 7vw, 3rem); }



    .jdh-hero { min-height: 50svh; }

    .jdh-hero__title { font-size: clamp(1.8rem, 6vw, 3rem); }



    .ab-xp-hero { flex-direction: column; gap: 1.5rem; }

    .ab-xp-hero__bar { width: 100%; max-width: 300px; }



    .tw-hero { flex-direction: column; gap: 1.5rem; }

    .tw-hero__stats { flex-wrap: wrap; justify-content: center; }

    .tw-hero__sep { display: none; }

    .tw-hero__stat { flex: 1 1 30%; text-align: center; }

}



/* ===== PROFILE ===== */

@media (max-width: 768px) {

    .prof-hero__inner { flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }

    .prof-hero__stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 0.75rem; width: 100%; }

    .prof-hero__stat-sep { display: none; }

    .prof-tab-btn--cta { display: none; }

    .prof-form__grid { grid-template-columns: 1fr; }

    .prof-travel-style { overflow: hidden; }

}



/* ===== TOUR DETAIL ===== */

@media (max-width: 1024px) {

    .td-body__inner { grid-template-columns: 1fr; }

    .td-right { order: -1; }

    .td-booking { position: static !important; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }

    .td-booking__info { grid-template-columns: repeat(2,1fr); }

    .td-stats-bar { position: static; }

    .td-includes-grid { grid-template-columns: 1fr 1fr; }

}

@media (max-width: 599px) {

    .td-includes-grid { grid-template-columns: 1fr; }

    .td-emotions { grid-template-columns: 1fr; }

    .td-traveler-gallery { grid-template-columns: repeat(3,1fr); }

    .td-guide { flex-direction: column; text-align: center; }

    .td-guide__avatar { margin: 0 auto; }

}



/* ===== ARTICLE / JOURNAL ===== */

@media (max-width: 1024px) {

    .jd-content-wrap { flex-direction: column; gap: 2rem; }

    .jd-sidebar { width: 100%; position: static; }

    .jd-meta-bar { position: sticky; top: 58px; }

    .jd-series-bar__inner { flex-direction: column; gap: 0.75rem; }

    .jd-series-bar__nav { flex-wrap: wrap; }

}

@media (max-width: 599px) {

    .jd-meta-bar { position: static; }

    .jd-bottom-cta__inner { flex-direction: column; text-align: center; }

    .jd-bottom-cta__btn { width: 100%; text-align: center; }

}



/* ===== ANALYTICS DASHBOARD ===== */

@media (max-width: 1024px) {

    .ja-health-full { flex-direction: column; gap: 1.5rem; }

    .ja-grid-2 { grid-template-columns: 1fr; }

    .ja-calendar-list .ja-cal-item__edit { opacity: 1; }

}

@media (max-width: 599px) {

    .ja-health-full { padding: 1.25rem; }

    .ja-opp-card { flex-direction: column; }

    .ja-coverage-item { flex-wrap: wrap; gap: 0.5rem; }

    .ja-coverage-item__stats { display: none; }

    .ja-coverage-item__name { width: 100%; }

    .ja-cal-item { flex-wrap: wrap; gap: 0.5rem; }

    .ja-cal-item__edit { display: none; }

}



/* ===== LOYALTY ===== */

@media (max-width: 768px) {

    .loy-hero { flex-direction: column; gap: 1.5rem; }

    .loy-hero__right { flex-direction: row; justify-content: center; gap: 2rem; }

    .loy-referral__code-wrap { flex-direction: column; }

    .loy-referral__code { text-align: center; }

    .loy-referral__copy { width: 100%; justify-content: center; }

    .loy-info__grid { grid-template-columns: 1fr 1fr; }

}



/* ===== ADVENTURE BOOK ===== */

@media (max-width: 768px) {

    .ab-header { flex-direction: column; gap: 0.75rem; }

    .ab-dna-bar__label { width: 90px; font-size: 0.7rem; }

    .ab-ach-stats { gap: 1.5rem; }

}



/* ===== HOME ===== */

@media (max-width: 768px) {

    .h-hero__inner { flex-direction: column; text-align: center; }

    .h-hero__right { display: none; }

    .h-hero__stats { justify-content: center; }

    .h-journal-featured { grid-template-columns: 1fr; }

    .jm-dest-grid { grid-template-columns: repeat(3,1fr); }

}

@media (max-width: 480px) {

    .jm-dest-grid { grid-template-columns: repeat(2,1fr); }

}



/* ===== DESTINATIONS ===== */

@media (max-width: 768px) {

    .dest-faq-grid { grid-template-columns: 1fr; }

    .jdh-dest-grid { grid-template-columns: repeat(2,1fr); }

}



/* ===== FOOTER ===== */

@media (max-width: 768px) {

    .footer-cta__inner { flex-direction: column; text-align: center; align-items: center; }

    .footer-cta__stats { justify-content: center; }

    .jm-cta__inner { flex-direction: column; text-align: center; }

    .jm-cta__btn { width: 100%; text-align: center; }

}

@media (max-width: 599px) {

    .footer-grid { grid-template-columns: 1fr !important; gap: 2rem; }

}



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

@media (max-width: 900px) and (orientation: landscape) {

    .jm-hero, .jd-hero, .td-hero, .jdh-hero { min-height: 100vw; }

    .jm-hero__title { font-size: clamp(1.4rem, 4vw, 2rem); }

}



/* ===== SAFE AREA (iPhone notch) ===== */

@supports (padding-bottom: env(safe-area-inset-bottom)) {

    .site-footer { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }

}



/* ===== ULTRAWIDE (2560px+) ===== */

@media (min-width: 2560px) {

    .tc-container,

    .h-section__inner,

    .jl-section__inner,

    .ja-wrap,

    .tw-wrap,

    .ab-wrap { max-width: 1600px; }



    body { font-size: 18px; }

}



/* ===== STICKY ON DESKTOP ===== */

@media (min-width: 1280px) {

    .td-booking { position: static; }

    .jd-sidebar { position: sticky; top: 100px; align-self: flex-start; max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: none; }

    .jd-sidebar::-webkit-scrollbar { display: none; }

}