/* home.css — home page sections. Owned by the HOME agent. */

/* ==========================================================================
   SEARCH CARD — the no-script fallback for the Activities control
   --------------------------------------------------------------------------
   The three pickers in the hero search card are JS-driven popovers: with
   scripting off the popover cannot open and the hidden input cannot be set.
   front-page.php therefore carries a real <select name="a"> inside a
   <noscript>, which the browser only renders when scripting is off. These
   rules make it look like the value line it stands in for, and give it the
   44px target the rest of the site keeps to.
   ========================================================================== */
.fld-ns{ display:block; margin-top:6px }
.fld-ns select{
  font:inherit; font-weight:500; width:100%; max-width:100%;
  min-height:44px; padding:8px 12px;
  color:var(--ink); background:var(--white,#fff);
  border:1px solid var(--line); border-radius:12px;
}
.fld-ns select:focus-visible{ outline:2px solid var(--ac); outline-offset:2px }

/* ==========================================================================
   ABOUT TRANQUIL SAFARIS
   --------------------------------------------------------------------------
   The design the owner pointed at is the About band on the country pages
   (template-parts/dest-about.php, styled in assets/css/todo.css). Neither of
   those files is touched or even loaded here: todo.css is enqueued only on the
   thirteen country pages, so the class names would carry no styling on the
   home page and are deliberately not reused. `ts-habout` is this page's own
   namespace, and these rules are a rebuild of that design, not an import.

   Two columns: a copy column, and a stack of three overlapping photo cards.
   The overlap is done with absolute positioning only — no rotate(), which the
   owner has rejected — and it unwinds into a plain stagger on a phone, where
   overlapping cards stop being a composition and become a pile.
   ========================================================================== */
.ts-habout{ background:var(--white,#fff); padding-block:clamp(56px,6.5vw,104px) }
.ts-habout__in{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(34px,5vw,84px); align-items:center;
}

/* --- left: the copy ------------------------------------------------------ */
.ts-habout__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-habout__badge svg{ width:46%; height:46% }

.ts-habout__kick{
  font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ac); margin:0 0 14px;
}
.ts-habout__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;
}
/* Gold is the flourish, and --gold-dark is the variant that carries enough
   contrast to be read as text on white. */
.ts-habout__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-habout__lede{
  color:var(--muted); font-size:16px; line-height:1.78; max-width:54ch;
  margin:clamp(18px,2vw,26px) 0 0;
}
/* The credentials sit apart from the lede: they are the one claim on this
   block that is gated on a stored record, so they read as a statement of fact
   rather than as part of the pitch. */
.ts-habout__creds{
  margin:14px 0 0; padding-left:16px; border-left:3px solid var(--gold);
  color:var(--ink); font-size:14.5px; line-height:1.65; font-weight:500;
  max-width:54ch;
}

.ts-habout__ticks{ list-style:none; margin:clamp(20px,2.4vw,30px) 0 0; padding:0; display:grid; gap:9px }
.ts-habout__ticks a{
  display:flex; align-items:center; gap:14px; min-height:44px;
  font-size:16px; font-weight:600; color:var(--ink); line-height:1.45;
  border-radius:12px; transition:color .2s;
}
.ts-habout__ticks i{
  flex:none; display:grid; place-items:center; width:26px; height:26px;
  border-radius:50%; background:var(--ac); color:#fff;
}
.ts-habout__ticks i svg{ width:13px; height:13px }
.ts-habout__ticks span{ flex:1 1 auto }
.ts-habout__chev{ width:15px; height:15px; flex:none; color:var(--muted); transition:transform .2s }
.ts-habout__ticks a:hover{ color:var(--ac) }
.ts-habout__ticks a:hover .ts-habout__chev{ transform:translateX(3px); color:var(--ac) }
.ts-habout__ticks a:focus-visible{ outline:2px solid var(--ac); outline-offset:4px }

.ts-habout__cta{
  display:inline-flex; align-items:center; gap:12px; margin-top:clamp(26px,3vw,38px);
  min-height:52px; padding:0 30px; border-radius:12px;
  background:var(--ac); color:#fff; font-weight:700; font-size:16px;
  box-shadow:0 2px 6px rgba(18,73,51,.10), 0 14px 34px rgba(18,73,51,.20);
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, background .2s;
}
.ts-habout__cta svg{ width:19px; height:19px; transition:transform .25s cubic-bezier(.22,1,.36,1) }
.ts-habout__cta:hover{ background:var(--ac-dark); transform:translateY(-2px); box-shadow:0 4px 10px rgba(18,73,51,.14), 0 22px 46px rgba(18,73,51,.26) }
.ts-habout__cta:hover svg{ transform:translateX(4px) }
.ts-habout__cta:focus-visible{ outline:2px solid var(--ac); outline-offset:3px }

/* --- right: the overlapping stack ---------------------------------------- */
.ts-habout__stack{ position:relative; min-height:clamp(360px,37vw,500px); font-family:var(--sans) }

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

/* card A — photograph with the caption laid over it */
.ts-habout__c--a{
  left:0; top:14%; width:clamp(200px,23vw,278px); height:clamp(176px,19vw,232px); z-index:1;
}
.ts-habout__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,.90) 0%, rgba(20,16,12,.58) 52%, rgba(20,16,12,0) 100%);
}
.ts-habout__c--a b{ display:block; font-size:clamp(17px,1.6vw,22px); font-weight:800; letter-spacing:-.02em; line-height:1.1 }
.ts-habout__c--a span{ display:block; margin-top:5px; font-size:11.5px; line-height:1.5; color:rgba(255,255,255,.88) }

/* card B — photograph over a white body */
.ts-habout__c--b{
  right:0; top:0; width:clamp(228px,26vw,310px); z-index:3;
}
.ts-habout__cimg{ position:relative; height:clamp(146px,15.5vw,208px) }
.ts-habout__cbody{ padding:13px 15px 15px }
.ts-habout__ctop{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px }
.ts-habout__ctop b{ font-size:15px; font-weight:700; color:var(--ink); line-height:1.25 }
.ts-habout__heart{
  flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:var(--ac-soft); color:var(--ac);
}
.ts-habout__heart svg{ width:14px; height:14px }
.ts-habout__cnote{ margin:10px 0 0; font-size:11.5px; line-height:1.5; color:var(--muted) }

/* card C — photograph over a white footer strip */
.ts-habout__c--c{
  left:16%; top:56%; width:clamp(210px,24vw,286px); z-index:2;
}
.ts-habout__c--c .ts-habout__cimg{ height:clamp(116px,12vw,158px) }
.ts-habout__cfoot{ padding:11px 15px 13px; font-size:11.5px; line-height:1.5; color:var(--muted) }

/* the round mark floating between the cards */
.ts-habout__mark{
  position:absolute; left:2%; bottom:20%; 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-habout__mark svg{ width:44%; height:44% }

@media (max-width:980px){
  .ts-habout__in{ grid-template-columns:minmax(0,1fr); gap:clamp(30px,5vw,48px) }
  .ts-habout__stack{ min-height:clamp(300px,54vw,400px) }
}
@media (max-width:640px){
  .ts-habout__stack{ min-height:0; display:grid; gap:14px; padding-top:8px }
  .ts-habout__c--a,
  .ts-habout__c--b,
  .ts-habout__c--c{
    position:relative; left:auto; right:auto; top:auto; bottom:auto;
    width:88%; max-width:100%; height:auto;
  }
  .ts-habout__c--a{ height:190px }
  .ts-habout__c--b{ margin-left:auto }
  .ts-habout__c--c{ margin-left:6% }
  .ts-habout__mark{ position:absolute; right:2%; top:-6px; bottom:auto; left:auto }
  .ts-habout__lede,
  .ts-habout__creds{ max-width:none }
}
@media (prefers-reduced-motion:reduce){
  .ts-habout__cta,
  .ts-habout__cta svg,
  .ts-habout__ticks a,
  .ts-habout__chev{ transition:none }
  .ts-habout__cta:hover{ transform:none }
  .ts-habout__cta:hover svg{ transform:none }
  .ts-habout__ticks a:hover .ts-habout__chev{ transform:none }
}

/* One card left in the About strip: the other said what the block above it
   now says properly. A single card in a two-column grid leaves a hole, so
   this centres it at a readable measure instead of stretching it. */
.about-grid--one{ grid-template-columns:1fr; justify-items:center }
.about-grid--one>.acard{ max-width:620px; width:100% }

/* ===================================================================
   THE PAIR — planner card + Tripadvisor seal, one row
   -------------------------------------------------------------------
   Two blocks that were each taking a full-width band and neither
   filling one: a single card, and a small seal pointing at
   Tripadvisor. Side by side they are the page's two "now do
   something" moments — do it yourself on the left, check us out
   elsewhere on the right.

   They are given the same radius, hairline and shadow so the row
   reads as two cards of one family rather than two designs that
   happen to be adjacent. The gold tab stays on the seal alone: it is
   that block's own mark, and putting it on both would make the pair
   symmetrical, which is not what the two cards are.

   THE LIVE STATE. When a Tripadvisor widget is configured the seal
   gains .ts-rev--live and grows to carry four reviews. Half a row
   cannot hold that, so the live seal takes the whole row and falls
   below the planner card — the pair quietly becomes a stack, with no
   template change needed.
   =================================================================== */

.duo{
  background:var(--cream);
  padding-block:clamp(56px,6.5vw,104px);
}
.duo-in{
  display:grid;
  /* minmax(0,…) not 1fr — a bare 1fr floors at min-content, and the
     seal's heading is long enough to pull the tracks unequal. */
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,2.4vw,32px);
  align-items:stretch;
}

/* The planner card, matched to the seal beside it. */
.duo .acard{
  margin:0;
  height:100%;
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 1px 2px rgba(22,33,27,.04), 0 10px 30px rgba(22,33,27,.06);
  justify-content:center;
}
.duo .acard p{ max-width:46ch; padding-right:64px }

/* The seal, no longer a band: it keeps its card, loses the band's
   padding, rule and shell width, and fills its column. */
.duo .ts-rev{
  background:transparent;
  border-top:0;
  padding-block:0;
}
.duo .ts-rev__shell{
  max-width:none;
  padding-inline:0;
  height:100%;
}
.duo .ts-rev__seal{
  max-width:none;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* See THE LIVE STATE above. */
.duo .ts-rev--live{ grid-column:1 / -1 }

@media (max-width:900px){
  .duo-in{ grid-template-columns:minmax(0,1fr) }
  .duo .acard p{ padding-right:0 }
}

/* ===================================================================
   THE PHOTOGRAPH BAND
   -------------------------------------------------------------------
   NOT .ts-band. That block name is already the footer's trust band in
   trust.css, and this figure took its 46px top padding the moment it
   borrowed the name — while these rules, in the other direction, gave
   every trust band on the site a 520px height and a cream fill.
   Measured, not guessed. The block is .ts-photo.

   One photograph, full width, between the planner/reviews row and the
   experiences strip. Nothing is laid over it: it is there because the
   page had six text blocks in a row, and putting a heading on it would
   undo the only thing it is for.

   Full bleed. The band is a <figure> with no margin — a figure's UA
   margin is 1em 40px, which would inset it from both edges and turn a
   full-bleed photograph into a wide card.

   2.3:1 is the source ratio; the band is set shorter than that at
   desktop and taller at phone widths, and object-fit:cover crops to
   suit. object-position sits slightly above centre: in the default
   photograph the animals are in the lower two thirds, and centring the
   crop cut their heads.
   =================================================================== */

.ts-photo{
  display:block;
  margin:0;
  width:100%;
  height:clamp(260px,32vw,520px);
  overflow:hidden;
  background:var(--cream);   /* what shows while it decodes */
}
.ts-photo--tall{ height:clamp(320px,40vw,620px) }

.ts-photo__img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  /* Each photograph sets its own crop point inline — it is a property of the
     picture, not of the design, and a class per photograph would mean a
     stylesheet edit every time one is swapped. The fallback is slightly above
     centre, which is where a horizon usually wants to be. */
  object-position:var(--ts-photo-focus, 50% 45%);
}

/* ===================================================================
   SECTIONS ARRIVE
   -------------------------------------------------------------------
   A 14px rise and a fade as each block reaches the fold. Home page
   only, and it is the quietest version of this that still reads as
   movement: one distance, one duration, one easing, no scale, no
   blur, no direction changes down the page.

   THE HIDING IS GATED ON html.ts-reveal, WHICH JAVASCRIPT ADDS.
   Not on `.js`, which the theme sets inline in the head and which is
   therefore true even when a script fails to arrive. If assets/js/
   home-reveal.js 404s, throws, or bails for reduced motion, the class
   is never added and not one element on this page is ever hidden.
   That ordering is the only thing standing between this effect and a
   blank home page, so do not re-key these rules to anything else.

   Transform and opacity only: both composite, so nothing here causes
   layout or changes the height of the page. With the effect off the
   document is exactly as long.

   The stagger is an inline --ts-reveal-delay set by the script, capped
   at five steps of 70ms so a row of cards resolves in under half a
   second rather than trickling.
   =================================================================== */

html.ts-reveal [data-reveal]{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:
    opacity 620ms cubic-bezier(.22,.61,.36,1) var(--ts-reveal-delay,0ms),
    transform 620ms cubic-bezier(.22,.61,.36,1) var(--ts-reveal-delay,0ms);
  will-change:opacity, transform;
}

html.ts-reveal [data-reveal="in"]{
  opacity:1;
  transform:none;
  /* The hint is only worth carrying until the element has arrived. */
  will-change:auto;
}

/* Already on screen at load, or focused by keyboard before it was
   reached: shown with no animation at all. */
html.ts-reveal [data-reveal="now"]{
  opacity:1;
  transform:none;
  transition:none;
}

/* Belt and braces. The script already bails on reduced motion and
   never adds the class, so these rules cannot normally match — but if
   the preference is switched on after load, this makes the page
   correct on the spot rather than at the next navigation. */
@media (prefers-reduced-motion:reduce){
  html.ts-reveal [data-reveal],
  html.ts-reveal [data-reveal="in"],
  html.ts-reveal [data-reveal="now"]{
    opacity:1;
    transform:none;
    transition:none;
  }
}