/* ==========================================================================
   THINGS TO DO — offset masonry mosaic
   --------------------------------------------------------------------------
   Its own stylesheet rather than an addition to country.css, because another
   pass is editing that file and two writers on one file is how work gets lost.

   The grid is deliberately uneven: a 6-column bed with tiles spanning
   different widths and heights, plus a small vertical offset on alternating
   columns, so it reads as a composition rather than a table. The pattern is
   FIXED, not random — a random layout reflows differently on every load and
   makes the page feel unstable.

   Titles are black and bold over the photograph, as asked. Black on a
   photograph is a coin toss on its own, so each label sits on a small frosted
   plate — blurred, translucent, hugging its own text. The first attempt washed
   the whole lower half of every tile toward white instead; it was legible and
   it bleached the photographs, which is what made the section look dated.
   ========================================================================== */

.ts-todo{
  padding-block:clamp(52px,6vw,92px);
  /* Cream, not white. The house neutral is #F7F3EE and the sections either side
     of this one are white — a mosaic floating on pure white read as unfinished
     rather than airy. */
  background:var(--cream,#F7F3EE);
}

.ts-todo__head{ margin-bottom:clamp(22px,3vw,38px) }
.ts-todo__h{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(27px,3.2vw,42px); line-height:1.08; color:var(--ink);
  margin:0; letter-spacing:-.01em;
}

/* --- the bed ------------------------------------------------------------
   Varied, but it tessellates EXACTLY. A 12-column bed carrying four bands:

     band 1   5 + 4 + 3  = 12   tall
     band 2   3 + 5 + 4  = 12   short
     band 3   4 + 3 + 5  = 12   tall
     band 4   7 + 5      = 12   short

   Every band sums to the full width and every tile in a band shares a height,
   so both edges are flush and there are no holes. The variety comes from the
   widths rotating and the bands alternating tall/short — not from knocking
   tiles out of line.

   The first version floated alternating tiles up and down with translateY.
   That is what made it look accidental: once a tile breaks the grid, the eye
   reads a mistake rather than a composition. The offsets are gone.
   ------------------------------------------------------------------------ */
.ts-todo__grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:clamp(58px,6vw,96px);
  gap:clamp(8px,.85vw,13px);
  margin:0; padding:0; list-style:none;
}

/* The fallback for any tile beyond the eleventh — another country may carry
   more. It must come BEFORE the numbered rules: same specificity, so source
   order decides, and placed after it silently flattened all eleven to one
   size. */
.ts-todo__cell{ grid-column:span 4; grid-row:span 2 }

/* band 1 — tall */
.ts-todo__cell--1{ grid-column:span 5; grid-row:span 3 }
.ts-todo__cell--2{ grid-column:span 4; grid-row:span 3 }
.ts-todo__cell--3{ grid-column:span 3; grid-row:span 3 }
/* band 2 — short */
.ts-todo__cell--4{ grid-column:span 3; grid-row:span 2 }
.ts-todo__cell--5{ grid-column:span 5; grid-row:span 2 }
.ts-todo__cell--6{ grid-column:span 4; grid-row:span 2 }
/* band 3 — tall */
.ts-todo__cell--7{ grid-column:span 4; grid-row:span 3 }
.ts-todo__cell--8{ grid-column:span 3; grid-row:span 3 }
.ts-todo__cell--9{ grid-column:span 5; grid-row:span 3 }
/* band 4 — short */
.ts-todo__cell--10{ grid-column:span 7; grid-row:span 2 }
.ts-todo__cell--11{ grid-column:span 5; grid-row:span 2 }


/* --- a tile ------------------------------------------------------------- */
.ts-todo__tile{
  position:relative; display:block; height:100%; width:100%;
  border-radius:clamp(14px,1.3vw,20px); overflow:hidden;
  background:var(--cream); isolation:isolate;
  box-shadow:0 1px 2px rgba(58,46,37,.04), 0 10px 26px rgba(58,46,37,.07);
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.ts-todo__tile:hover{
  transform:translateY(-3px);
  box-shadow:0 4px 10px rgba(58,46,37,.08), 0 22px 46px rgba(58,46,37,.14);
}
.ts-todo__tile:focus-visible{ outline:2px solid var(--ac); outline-offset:3px }

.ts-todo__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.ts-todo__img--none{
  background:linear-gradient(140deg,var(--cream),var(--line));
}
.ts-todo__tile:hover .ts-todo__img{ transform:scale(1.05) }

/* The wash WAS a white gradient across the whole lower half of every tile, to
   make black type readable. It worked, and it bleached the photographs — the
   single thing that made this section look dated. The label now carries its own
   frosted plate instead, so the photograph is left alone and only a small area
   behind the words is lightened. What remains here is a whisper of darkening at
   the very bottom edge, which gives the image depth and stops the plate looking
   pasted on. */
.ts-todo__wash{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(20,16,12,.30) 0%, rgba(20,16,12,.08) 26%, rgba(20,16,12,0) 52%);
}

.ts-todo__label{
  position:absolute; z-index:2; left:clamp(10px,1vw,16px); bottom:clamp(10px,1vw,16px);
  right:auto; width:fit-content; max-width:calc(100% - clamp(20px,2vw,32px));
  display:flex; flex-direction:column; gap:1px;
  padding:clamp(9px,.9vw,13px) clamp(12px,1.2vw,17px);
  border-radius:calc(var(--ts-r,16px) - 5px);
  background:rgba(255,255,255,.80);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 1px 2px rgba(20,16,12,.06), 0 8px 22px rgba(20,16,12,.10);
  transition:background .3s cubic-bezier(.22,1,.36,1);
}
/* No backdrop-filter (older Firefox, some Android): fall back to a plate solid
   enough that black type still reads. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ts-todo__label{ background:rgba(255,255,255,.93) }
}
.ts-todo__tile:hover .ts-todo__label{ background:rgba(255,255,255,.92) }

.ts-todo__name{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(16px,1.75vw,24px); line-height:1.06;
  letter-spacing:-.022em; color:#121212;
  text-wrap:balance;
}
.ts-todo__n{
  font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(18,18,18,.55);
}

.ts-todo__more{ margin:clamp(22px,3vw,36px) 0 0 }

/* --- responsive --------------------------------------------------------- */
@media (max-width:1080px){
  /* Two per band: 7+5, 5+7, alternating, still exact. */
  .ts-todo__grid{ grid-template-columns:repeat(12,minmax(0,1fr)) }
  .ts-todo__cell,
  .ts-todo__cell--1,.ts-todo__cell--4,.ts-todo__cell--7,.ts-todo__cell--10{ grid-column:span 7; grid-row:span 3 }
  .ts-todo__cell--2,.ts-todo__cell--5,.ts-todo__cell--8,.ts-todo__cell--11{ grid-column:span 5; grid-row:span 3 }
  .ts-todo__cell--3,.ts-todo__cell--6,.ts-todo__cell--9{ grid-column:span 12; grid-row:span 3 }
}
@media (max-width:640px){
  /* One column. Heights still alternate so it keeps a rhythm. */
  .ts-todo__grid{ grid-template-columns:minmax(0,1fr); gap:10px }
  .ts-todo__cell,
  .ts-todo__cell--1,.ts-todo__cell--2,.ts-todo__cell--3,.ts-todo__cell--4,
  .ts-todo__cell--5,.ts-todo__cell--6,.ts-todo__cell--7,.ts-todo__cell--8,
  .ts-todo__cell--9,.ts-todo__cell--10,.ts-todo__cell--11{
    grid-column:span 1; grid-row:span 3;
  }
  .ts-todo__cell--2,.ts-todo__cell--5,.ts-todo__cell--8,.ts-todo__cell--11{ grid-row:span 2 }
  .ts-todo__name{ font-size:18px }
}

@media (prefers-reduced-motion:reduce){
  .ts-todo__tile,.ts-todo__img{ transition:none }
  .ts-todo__tile:hover{ transform:none }
  .ts-todo__tile:hover .ts-todo__img{ transform:none }
}

/* ==========================================================================
   ABOUT US — two columns, copy left, tipped card collage right
   --------------------------------------------------------------------------
   Built to the owner's reference. The left column is a straight port of it:
   round badge, letterspaced kicker, two-tone heading, lede, ticked list, pill
   CTA. The right is the reference's overlapping stack of cards at slight
   angles — carrying real catalogue figures instead of the reference's prices,
   star ratings and review counts, none of which exist on this site.

   The accreditation marks are white-on-transparent, so they sit on the green
   band at the foot where they can be seen at all.
   ========================================================================== */

.ts-about{ background:var(--white,#fff); padding-block:clamp(56px,6.5vw,104px) 0 }
.ts-about__in{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(34px,5vw,84px); align-items:center;
  padding-bottom:clamp(56px,6.5vw,100px);
}

/* --- left --------------------------------------------------------------- */
.ts-about__badge{
  display:grid; place-items:center; width:clamp(52px,4.6vw,66px); aspect-ratio:1;
  border-radius:50%; background:var(--ac); color:#fff; margin-bottom:clamp(20px,2.4vw,32px);
  box-shadow:0 10px 26px rgba(18,73,51,.22);
}
.ts-about__badge svg{ width:46%; height:46% }
.ts-about__kick{
  font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ac); margin:0 0 14px;
}
.ts-about__h{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(32px,4vw,54px); line-height:1.02; letter-spacing:-.025em;
  color:var(--ink); margin:0;
}
.ts-about__sf{
  display:block; font-family:var(--serif); font-weight:500; letter-spacing:-.005em;
  font-size:1.02em; color:var(--gold-dark); margin-top:2px;
}
.ts-about__lede{
  color:var(--muted); font-size:16px; line-height:1.78; max-width:52ch;
  margin:clamp(18px,2vw,26px) 0 0;
}
.ts-about__ticks{ list-style:none; margin:clamp(20px,2.4vw,30px) 0 0; padding:0; display:grid; gap:13px }
.ts-about__ticks li{
  display:flex; align-items:flex-start; gap:14px;
  font-size:16px; font-weight:600; color:var(--ink); line-height:1.45;
}
.ts-about__ticks i{
  flex:none; display:grid; place-items:center; width:26px; height:26px; margin-top:1px;
  border-radius:50%; background:var(--ac); color:#fff;
}
.ts-about__ticks svg{ width:13px; height:13px }
.ts-about__cta{
  display:inline-flex; align-items:center; gap:12px; margin-top:clamp(26px,3vw,38px);
  min-height:52px; padding:0 30px; border-radius:var(--ts-r,16px);
  background:#fff; color:var(--ac); font-weight:700; font-size:16px;
  box-shadow:0 2px 6px rgba(58,46,37,.07), 0 14px 34px rgba(58,46,37,.12);
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s;
}
.ts-about__cta svg{ width:19px; height:19px; transition:transform .25s cubic-bezier(.22,1,.36,1) }
.ts-about__cta:hover{ transform:translateY(-2px); box-shadow:0 4px 10px rgba(58,46,37,.09), 0 22px 46px rgba(58,46,37,.17) }
.ts-about__cta:hover svg{ transform:translateX(4px) }
.ts-about__cta:focus-visible{ outline:2px solid var(--ac); outline-offset:3px }

/* --- right: the tipped stack --------------------------------------------
   Three card designs, as the reference has them:
     a  photograph with the title and a line of copy laid over it
     b  photograph with tag pills, then a white body: title + heart, a facts
        row, a rule, and a footer split left/right
     c  photograph with a tag, the title over it, a round go button, and a
        white footer strip
   Where the reference puts a price, a star rating and a review count, these
   carry the figures the catalogue actually holds. Type is Outfit throughout —
   the reference sets its numbers in the sans, and so do we.
   ------------------------------------------------------------------------ */
.ts-about__stack{ position:relative; min-height:clamp(360px,37vw,500px); font-family:var(--sans) }

.ts-about__c{
  position:absolute; margin:0; overflow:hidden; background:#fff;
  border-radius:clamp(12px,1.1vw,16px);
  box-shadow:0 3px 8px rgba(58,46,37,.07), 0 26px 60px rgba(58,46,37,.17);
}
.ts-about__c img{ display:block; width:100%; height:100%; object-fit:cover }

/* -- card A: full-bleed photo, copy laid over it -- */
.ts-about__c--a{
  left:0; top:14%; width:clamp(200px,23vw,278px); height:clamp(176px,19vw,232px); z-index:1;
}
.ts-about__c--a figcaption{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:16px 18px 18px; color:#fff;
  background:linear-gradient(to top, rgba(20,16,12,.88) 0%, rgba(20,16,12,.55) 52%, rgba(20,16,12,0) 100%);
}
.ts-about__c--a b{ display:block; font-size:clamp(19px,1.9vw,26px); font-weight:800; letter-spacing:-.02em; line-height:1.08 }
.ts-about__c--a span{ display:block; margin-top:5px; font-size:11.5px; line-height:1.5; color:rgba(255,255,255,.86) }

/* -- card B: photo + white body -- */
.ts-about__c--b{
  right:0; top:0; width:clamp(228px,26vw,310px); z-index:3;
}
.ts-about__cimg{ position:relative; height:clamp(104px,11vw,148px) }
.ts-about__tags{
  position:absolute; top:10px; left:10px; right:10px; z-index:2;
  display:flex; flex-wrap:wrap; gap:5px;
}
.ts-about__tags em{
  font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.01em;
  background:var(--ac); color:#fff; border-radius:7px; padding:4px 9px; white-space:nowrap;
}
.ts-about__cbody{ padding:13px 15px 15px }
.ts-about__ctop{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px }
.ts-about__ctop b{ font-size:15.5px; font-weight:700; color:var(--ink); line-height:1.2 }
.ts-about__heart{
  flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:var(--ac-soft); color:var(--ac);
}
.ts-about__heart svg{ width:14px; height:14px }
.ts-about__facts{ display:flex; gap:14px; margin:10px 0 0; color:var(--muted); font-size:11.5px }
.ts-about__facts span{ display:flex; align-items:center; gap:5px }
.ts-about__facts svg{ width:13px; height:13px; flex:none }
.ts-about__crow{
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
  margin-top:11px; padding-top:11px; border-top:1px solid var(--line);
}
.ts-about__cleft{ font-size:11px; color:var(--muted); line-height:1.3; max-width:14ch }

/* -- card B, people variant: a taller photograph and a two-line note in place
      of the trip facts and the big number, keeping the card's overall height
      so the deliberate overlap with card C is unchanged. -- */
.ts-about__c--ppl .ts-about__cimg{ height:clamp(146px,15.5vw,208px) }
.ts-about__cnote{
  margin:10px 0 0; font-size:11.5px; line-height:1.5; color:var(--muted);
}
.ts-about__cright{ text-align:right; line-height:1 }
.ts-about__cright small{ display:block; font-size:10px; color:var(--muted) }
.ts-about__cright b{ font-size:clamp(20px,2vw,26px); font-weight:800; color:var(--ac); letter-spacing:-.02em }

/* -- card C: photo, title over it, go button, white footer strip -- */
.ts-about__c--c{
  left:16%; top:54%; width:clamp(210px,24vw,286px); z-index:2;
}
.ts-about__c--c .ts-about__cimg{ height:clamp(116px,12vw,158px) }
.ts-about__c--c .ts-about__cimg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,16,12,.80) 0%, rgba(20,16,12,.20) 55%, rgba(20,16,12,0) 100%);
}
.ts-about__cover{
  position:absolute; left:14px; right:52px; bottom:12px; z-index:2; color:#fff;
}
.ts-about__cover b{ font-size:clamp(18px,1.8vw,25px); font-weight:800; letter-spacing:-.02em; line-height:1.08 }
.ts-about__go{
  position:absolute; right:12px; bottom:12px; z-index:3;
  display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:var(--ac); color:#fff;
}
.ts-about__go svg{ width:13px; height:13px }
.ts-about__cfoot{ padding:11px 15px 13px; font-size:11.5px; color:var(--muted) }

/* -- the round badge floating between the cards, as in the reference -- */
.ts-about__mark{
  position:absolute; left:2%; bottom:22%; z-index:4;
  display:grid; place-items:center;
  width:clamp(44px,4.2vw,58px); aspect-ratio:1; border-radius:50%;
  background:var(--ac); color:#fff;
  box-shadow:0 10px 26px rgba(18,73,51,.30);
}
.ts-about__mark svg{ width:44%; height:44% }
/* -- the floating figure, where the reference puts "Special 175 €" -- */
.ts-about__float{
  position:absolute; left:6%; top:-4%; z-index:4; margin:0; line-height:1;
  white-space:nowrap;
}
.ts-about__float small{
  display:block; font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--gold-dark);
}
.ts-about__float b{
  display:block; margin-top:4px; font-size:clamp(28px,3.2vw,42px); font-weight:800;
  letter-spacing:-.03em; color:var(--ac);
}

/* --- accreditations ------------------------------------------------------ */
.ts-about__members{ background:var(--ac); padding-block:clamp(28px,3.2vw,44px) }
.ts-about__mh{
  font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin:0 0 clamp(16px,1.8vw,24px);
}
.ts-about__mlist{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(26px,4vw,64px);
}
.ts-about__mlist img{
  display:block; height:clamp(38px,4vw,54px); width:auto; opacity:.9;
}

@media (max-width:980px){
  .ts-about__in{ grid-template-columns:minmax(0,1fr); gap:clamp(30px,5vw,48px) }
  .ts-about__stack{ min-height:clamp(300px,54vw,400px) }
  .ts-about__stat{ left:34% }
}
@media (max-width:640px){
  /* On a phone the overlap stops being a composition and starts being a pile.
     The cards return to normal flow, keeping a slight stagger so the section
     still reads as a stack rather than a list. */
  .ts-about__stack{ min-height:0; display:grid; gap:14px; padding-top:44px }
  .ts-about__c--a,
  .ts-about__c--b,
  .ts-about__c--c{
    position:relative; left:auto; right:auto; top:auto; bottom:auto;
    width:86%; height:auto;
  }
  .ts-about__c--a{ height:190px }
  .ts-about__c--b{ margin-left:auto }
  .ts-about__c--c{ margin-left:7% }
  .ts-about__float{ position:absolute; left:0; top:0 }
  .ts-about__mark{ position:absolute; right:4%; top:0; bottom:auto; left:auto }
  .ts-about__mlist{ gap:24px }
  .ts-about__mlist img{ height:34px }
}
@media (prefers-reduced-motion:reduce){
  .ts-about__cta,.ts-about__cta svg{ transition:none }
  .ts-about__cta:hover{ transform:none }
  .ts-about__cta:hover svg{ transform:none }
}

/* The three ticked lines are links now, so they need a target and a hover. */
.ts-about__ticks a{
  display:flex; align-items:center; gap:14px; min-height:44px;
  color:var(--ink); border-radius:10px; transition:color .2s;
}
.ts-about__ticks a:hover{ color:var(--ac) }
.ts-about__ticks a:focus-visible{ outline:2px solid var(--ac); outline-offset:4px }
.ts-about__ticks span{ flex:1 1 auto }
.ts-about__chev{
  width:16px; height:16px; flex:none; color:var(--ac); opacity:0;
  transform:translateX(-4px); transition:opacity .2s, transform .2s;
}
.ts-about__ticks a:hover .ts-about__chev,
.ts-about__ticks a:focus-visible .ts-about__chev{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .ts-about__chev{ transition:none }
}

/* The ghost button is built for dark surfaces — translucent white on
   white text. This section is cream, so it needs the light treatment:
   forest green on white, filling green on hover. */
.ts-ctry .ts-todo .ts-todo__more .ts-ctry-btn--ghost{
  background:#fff; border-color:var(--line); color:var(--ac);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.ts-ctry .ts-todo .ts-todo__more .ts-ctry-btn--ghost:hover{
  background:var(--ac); border-color:var(--ac); color:#fff;
}
.ts-ctry .ts-todo .ts-todo__more .ts-ctry-btn--ghost:focus-visible{
  outline:2px solid var(--gold-dark); outline-offset:3px;
}