/* ==========================================================================
   TT Core — browse by trip length (Claude, v0.5.0)
   1. Header bar: chips with tour counts + photo panels (every page)
   2. Hub pages: /tibet-tours and /tibet-tours/{length} (tt_layout = tl)
   Same fonts and colours as the tour pages (Fraunces + Public Sans, ink / rust / sand).
   ========================================================================== */

@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/fraunces-var.woff2) format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/public-sans-var-latin.woff2) format('woff2');}

/* ---------- 1. the bar ---------- */
.tt-durnavwrap--v5{position:relative}
.tt-durnav--v5{flex-wrap:nowrap}
.tt-durnav--v5 .tt-durnav__label{border:0;background:none;padding:0;border-radius:0;white-space:nowrap}
.tt-durnav--v5 .tt-durnav__label:hover{color:var(--tt-primary)}
.tt-durnav__chips{display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none;min-width:0;padding:2px 0}
.tt-durnav__chips::-webkit-scrollbar{display:none}
.tt-durnav--v5 > a,.tt-durnav--v5 .tt-lenchip{white-space:nowrap;flex:none}
.tt-durnav--v5 .tt-lenchip small{font-size:.72rem;color:var(--tt-muted);margin-left:.15rem;font-weight:600}
.tt-durnav--v5 .tt-lenchip.is-on{background:var(--tt-ink);border-color:var(--tt-ink);color:#fff}
.tt-durnav--v5 .tt-lenchip.is-on small{color:#F2C38B}
.tt-durnav--v5 .tt-lenchip:focus-visible{outline:2px solid var(--tt-primary);outline-offset:2px}

.tt-lenpanels{position:absolute;left:0;right:0;top:100%;z-index:70}
.tt-lenpanel{background:#fff;border-top:1px solid var(--tt-line);border-bottom:1px solid var(--tt-line);box-shadow:0 18px 40px rgba(30,26,23,.16);max-height:calc(100vh - var(--tt-hh, 120px) - 8px);overflow-y:auto}
.tt-lenpanel__in{max-width:var(--tt-max);margin:0 auto;padding:18px 20px 22px}
.tt-lenpanel__top{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.tt-lenpanel__h{font:600 1.25rem/1.2 'Fraunces',Georgia,serif;color:var(--tt-ink)}
.tt-lenpanel__all{font-weight:600;font-size:.9rem;color:var(--tt-primary);text-decoration:none}
.tt-lenpanel__all:hover{text-decoration:underline}
.tt-lenpanel__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 14px}
.tt-lenmini{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;align-items:center;padding:6px;border-radius:10px;text-decoration:none;color:var(--tt-ink)}
.tt-lenmini:hover,.tt-lenmini:focus-visible{background:var(--tt-sand)}
.tt-lenmini img,.tt-lenmini__ph{width:84px;height:63px;object-fit:cover;border-radius:8px;background:var(--tt-sand-2,#EFE7DC);display:block}
.tt-lenmini__t{min-width:0;display:grid;gap:2px}
.tt-lenmini__t b{font-weight:600;font-size:.88rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tt-lenmini__t span{font-size:.78rem;color:var(--tt-muted)}
.tt-lenmini__t em{font-style:normal;color:var(--tt-primary);font-weight:600}
@media (max-width:1100px){.tt-lenpanel__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.tt-lenpanel__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .tt-lenpanel__grid{grid-template-columns:minmax(0,1fr)}
  .tt-durnav--v5 .tt-durnav__label{display:none}
  .tt-durnav--v5 > a,.tt-durnav--v5 > .tt-durnav__sep{display:none}
}

/* ---------- 2. hub pages ---------- */
body:has(.ttl) .entry-content.tt-content,body:has(.ttl) .tt-content{max-width:none!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important;width:100%!important}
.ttl{--acc:#8E2A17;--acc-dk:#6B1E10;--ink:#1C2733;--txt:#39434F;--mute:#4A5562;--soft:#6A7380;--sand:#F6F3EE;--chip:#F1ECE3;--line:#E4E0D8;--ok:#2F6B4F;font:17px/1.6 'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--txt);background:#fff}
.ttl *,.ttl *::before,.ttl *::after{box-sizing:border-box}
.ttl img{display:block;max-width:100%}
.ttl h1{font:600 clamp(34px,5vw,56px)/1.08 'Fraunces',Georgia,serif;margin:0;color:var(--ink);text-wrap:balance}
.ttl p{margin:0}
.ttl-wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}

.ttl-hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.ttl-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ttl-hero.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,22,30,.86),rgba(15,22,30,.5) 60%,rgba(15,22,30,.18))}
.ttl-hero__in{position:relative;z-index:1;padding-top:64px;padding-bottom:60px;display:grid;gap:14px}
.ttl-hero h1{color:#fff;max-width:18ch}
.ttl-hero__p{font-size:18px;max-width:60ch;opacity:.95}
.ttl-crumb{font-size:13px;opacity:.85}
.ttl-crumb a{color:#fff;text-decoration:none}
.ttl-crumb a:hover{text-decoration:underline}
.ttl-hero__facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ttl-hero__facts span{font-weight:600;font-size:13px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32)}

.ttl-lens{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.ttl-lens__lab{font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-right:6px}
.ttl-lens a{font-weight:600;font-size:14px;color:var(--ink);text-decoration:none;padding:6px 12px;border:1px solid var(--line);border-radius:999px}
.ttl-lens a:hover{border-color:var(--ink)}
.ttl-lens a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}

.ttl-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:24px 0 4px}
.ttl-filters button{font:600 14px 'Public Sans',sans-serif;background:#fff;color:var(--ink);border:1px solid var(--line);padding:8px 14px;border-radius:10px;cursor:pointer}
.ttl-filters button[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:#fff}
.ttl-filters button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.ttl-count{margin-left:auto;font-size:14px;color:var(--soft)}

.ttl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;padding:22px 0 72px}
.ttl-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--txt);transition:box-shadow .2s,transform .2s}
.ttl-card:hover{box-shadow:0 16px 36px rgba(28,39,51,.14);transform:translateY(-2px)}
.ttl-card[hidden]{display:none}
.ttl-card__img{position:relative;display:block;aspect-ratio:16/9;background:var(--chip)}
.ttl-card__img img{width:100%;height:100%;object-fit:cover}
.ttl-badge{position:absolute;left:14px;top:14px;font-weight:600;font-size:12px;letter-spacing:.03em;padding:6px 11px;border-radius:999px;background:#fff;color:var(--ink)}
.ttl-badge.is-private{background:var(--ink);color:#fff}
.ttl-badge.is-group{background:#E8F1EC;color:var(--ok)}
.ttl-card__b{display:flex;flex-direction:column;gap:10px;padding:22px 24px 24px;flex:1}
.ttl-card__meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--soft)}
.ttl-card__meta b{color:var(--ink);font-weight:600}
.ttl-card__h{font:600 22px/1.25 'Fraunces',Georgia,serif;color:var(--ink)}
.ttl-card__p{font-size:15px;color:var(--mute)}
.ttl-card__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.ttl-price{font-size:14px;color:var(--soft)}
.ttl-price b{font:600 22px 'Fraunces',Georgia,serif;color:var(--ink)}
.ttl-go{font-weight:600;font-size:15px;color:var(--acc)}
.ttl-card.is-feature{grid-column:1 / -1;flex-direction:row}
.ttl-card.is-feature .ttl-card__img{flex:1.25 1 0;aspect-ratio:auto;min-height:340px}
.ttl-card.is-feature .ttl-card__b{flex:1 1 0;padding:36px;justify-content:center}
.ttl-card.is-feature .ttl-card__h{font-size:30px}

.ttl-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:36px 0 72px}
.ttl-tile{position:relative;display:flex;align-items:flex-end;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--ink);color:#fff;text-decoration:none}
.ttl-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ttl-tile:hover img{transform:scale(1.04)}
.ttl-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,22,30,0) 30%,rgba(15,22,30,.88))}
.ttl-tile__b{position:relative;z-index:1;display:grid;gap:4px;padding:20px 22px}
.ttl-tile__n{font:600 13px 'Public Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#F2C38B}
.ttl-tile__h{font:600 24px/1.2 'Fraunces',Georgia,serif}
.ttl-tile__s{font-size:14px;opacity:.9}

.ttl-help{background:var(--sand)}
.ttl-help__in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:center;padding-top:52px;padding-bottom:52px}
.ttl-help__h{font:600 28px/1.2 'Fraunces',Georgia,serif;color:var(--ink);margin-bottom:8px!important}
.ttl-help__btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.ttl-btn{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:8px;font-weight:600;font-size:16px;text-decoration:none;background:var(--acc);color:#fff}
.ttl-btn:hover{background:var(--acc-dk);color:#fff}
.ttl-btn--line{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.ttl-btn--line:hover{background:var(--ink)}

@media (max-width:900px){
  .ttl-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .ttl-grid{grid-template-columns:minmax(0,1fr)}
  .ttl-card.is-feature{flex-direction:column}
  .ttl-card.is-feature .ttl-card__img{flex:none;min-height:0;aspect-ratio:16/9}
  .ttl-card.is-feature .ttl-card__b{flex:none}
  .ttl-card.is-feature .ttl-card__b{padding:22px 24px 24px}
  .ttl-card.is-feature .ttl-card__h{font-size:22px}
  .ttl-help__in{grid-template-columns:minmax(0,1fr)}
  .ttl-help__btns{justify-content:flex-start}
  .ttl-count{margin-left:0;flex-basis:100%}
}
@media (max-width:560px){
  .ttl-tiles{grid-template-columns:minmax(0,1fr)}
  .ttl-hero__in{padding-top:44px;padding-bottom:44px}
}
@media (prefers-reduced-motion:reduce){.ttl-card,.ttl-tile img{transition:none}.ttl-card:hover{transform:none}}

/* the theme gives photos height:auto — keep cover photos filling their boxes */
.ttl .ttl-hero__img,.ttl .ttl-tile img,.ttl .ttl-card__img img{position:absolute;inset:0;width:100%;height:100%!important;max-width:none;object-fit:cover}

/* "Fewer days? / A day or two more?" under the cards */
.ttl-nbs{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;margin:-36px 0 64px}
.ttl-nb{display:grid;gap:2px;padding:16px 20px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--acc);font-weight:600;font-size:16px;min-width:240px}
.ttl-nb span{font-weight:500;font-size:13px;color:var(--soft)}
.ttl-nb:hover{border-color:var(--acc)}
.ttl-nb--more{margin-left:auto;text-align:right}
@media (max-width:560px){.ttl-nb{flex:1 1 100%;min-width:0}.ttl-nb--more{text-align:left}}

/* "What you can see in N days" — the page's own text */
.ttl-about{max-width:760px;margin:0 0 56px}
.ttl-about h2{font:600 clamp(26px,3vw,34px)/1.15 'Fraunces',Georgia,serif;color:var(--ink);margin:0 0 14px}
.ttl-about h3{font:600 20px/1.3 'Fraunces',Georgia,serif;color:var(--ink);margin:28px 0 10px}
.ttl-about p{margin:0 0 14px}
.ttl-about ul{margin:0 0 14px;padding:0;list-style:none;border-left:3px solid var(--acc)}
.ttl-about li{padding:6px 0 6px 16px}
.ttl-about li+li{border-top:1px solid var(--line)}

/* "Want another 6 days choice?" band on tour pages */
.ttl-sibs{background:#F6F3EE;padding:56px 0;font-family:'Public Sans',system-ui,sans-serif}
.ttl-sibs__top{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;justify-content:space-between;margin-bottom:22px}
.ttl-sibs__h{font:600 clamp(24px,2.8vw,32px)/1.15 'Fraunces',Georgia,serif;color:#1C2733;margin:0}
.ttl-sibs__all{font-weight:600;color:#8E2A17!important;text-decoration:none}
.ttl-sibs__all:hover{text-decoration:underline}
.ttl-sibs__grid{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr))}
.ttl-sibs__grid--1{grid-template-columns:minmax(0,1fr)}
.ttl-sibs__grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ttl-sib{display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;text-decoration:none;color:#39434F;transition:box-shadow .2s,transform .2s}
.ttl-sib:hover{box-shadow:0 14px 32px rgba(28,39,51,.14);transform:translateY(-2px)}
.ttl-sib__img{position:relative;display:block;aspect-ratio:16/10;background:#F1ECE3}
.ttl-sib__img img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover}
.ttl-sib .ttl-badge{position:absolute;left:12px;top:12px;font-weight:600;font-size:12px;padding:5px 10px;border-radius:999px;background:#fff;color:#1C2733}
.ttl-sib .ttl-badge.is-private{background:#1C2733;color:#fff}
.ttl-sib .ttl-badge.is-group{background:#E8F1EC;color:#2F6B4F}
.ttl-sib__b{display:flex;flex-direction:column;gap:10px;padding:18px 20px 20px;flex:1}
.ttl-sib__h{font:600 19px/1.3 'Fraunces',Georgia,serif;color:#1C2733}
.ttl-sib__f{margin-top:auto;display:flex;justify-content:space-between;gap:10px;font-size:14px;color:#6A7380}
.ttl-sib__f b{color:#1C2733;font-size:16px}
.ttl-sib .ttl-go{font-weight:600;color:#8E2A17}
@media (max-width:820px){.ttl-sibs__grid,.ttl-sibs__grid--2{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.ttl-sib{transition:none}.ttl-sib:hover{transform:none}}

/* v0.5.0: /tour theme tiles — a single tile left alone on the last row becomes a wide banner */
@media (min-width:901px){
  .tt-hub__themes>.tt-hub__theme:last-child:nth-child(3n+1){grid-column:1/-1}
  .tt-hub__themes>.tt-hub__theme:last-child:nth-child(3n+1) img{aspect-ratio:4/1!important;height:auto!important;object-position:center 60%}
}
@media (min-width:561px) and (max-width:900px){
  .tt-hub__themes>.tt-hub__theme:last-child:nth-child(2n+1){grid-column:1/-1}
  .tt-hub__themes>.tt-hub__theme:last-child:nth-child(2n+1) img{aspect-ratio:5/2!important;height:auto!important}
}
