@charset "UTF-8";
/* ===================================================================
   why.css — "Why travel with Tranquil Safaris?"
   (template-parts/site-why.php) — class prefix: ts-why-
   ===================================================================

   THE SURFACE PROBLEM

   This block used to be the last thing on the page, below </footer>,
   and it was a cream band for that reason. It is not there any more.
   footer.php now runs:

       cream        .ts-rev     the reviews seal
       ----------   .ts-why     THIS BLOCK
       --ac-dark    .ts-cta     the closing ask
       --ac         <footer>

   Cream is no longer available to it. The reviews seal directly above
   is --cream, and two cream bands stacked read as one long band with a
   heading dropped into the middle of it — which is the exact failure
   the old comment in this file was written to avoid, now pointing the
   other way. Dark green is not available either: --ac-dark is
   immediately below and --ac immediately below that, so a third green
   band would make a 1,500px slab with two invisible seams in it.

   THE ANSWER: STOP BEING A BAND

   The section's own background is the page's #fff, and everything in
   it lives inside ONE large forest-green panel with 22px corners —
   the house scale's large-surface radius — floating in that white with
   a clear white margin on every side.

   That does three things at once:

     1. It cannot fuse with the cream above or the dark green below,
        because white separates it from both and because it is an
        object with edges rather than a band that runs to the viewport.
     2. Read down the page the three sections are now three different
        KINDS of thing, not three shades: a small white seal on cream,
        a large green object on white, a full-bleed dark band. That is
        what stops them reading as a pile.
     3. It is the heaviest, darkest thing in the run, which is the
        right weight for the one block on the page that argues the
        case for the company.

   A 4px gold bar caps the top edge of the panel, clipped by the
   corner radius. It is the same rule, the same weight and the same
   colour as .ts-cta's gold edge, so the two flourishes on this part of
   the page answer each other — but the cta's runs full-bleed and this
   one is a tab on a rounded object, so they are not mistaken for each
   other either.

   INSIDE THE PANEL

   Not five cards in a row, and not four cards in a row either. The
   panel is divided like a page rather than filled with tiles: a
   two-column masthead, four numbered quarters below it split by
   hairlines, and a darker strip along the foot carrying the licence
   number and the address. Nothing inside is a card, so nothing inside
   needs a corner — the only radii in the block are the panel itself,
   the icon discs and the focus rings.

   The quarter hairlines are drawn with a 1px grid gap over a tinted
   grid background, not with borders. Borders would need a different
   rule for every possible number of points (the list is filterable)
   and would leave a stray hairline against the panel's rounded edge.

   CONTRAST, measured against the two surfaces used:

     white on --ac ............ 10.5:1     body text .78 white ... 6.9:1
     --gold on --ac ............ 5.7:1     labels .62 white ...... 6.8:1
     --gold on --ac-dark ....... 7.5:1     white on --ac-dark ... 13.9:1

   Focus rings inside the panel are GOLD, not --ac: the theme's global
   focus ring is --ac on --ac here, i.e. invisible.
   =================================================================== */

/* ------------------------------------------------------------------
   The section, and the panel
   ------------------------------------------------------------------ */

.ts-why {
  background: #fff;
  padding-block: clamp(44px, 5vw, 78px);
}

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

.ts-why-case {
  position: relative;
  isolation: isolate;
  overflow: hidden;              /* clips the gold cap to the corners */
  border-radius: 22px;
  background: var(--ac);
  color: #fff;
  box-shadow: 0 1px 2px rgba(18, 73, 51, .10), 0 18px 48px rgba(18, 73, 51, .14);
}

/* The gold cap. Same weight and colour as .ts-cta's gold edge. */
.ts-why-case::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 4px;
  background: var(--gold);
  z-index: 1;
}

/* ------------------------------------------------------------------
   Masthead — heading left, lede right

   Centred would be the default and would waste the panel's width. The
   two columns end together (align-items:end) so the lede's last line
   and the gold script line sit on the same footing.
   ------------------------------------------------------------------ */

.ts-why-head {
  display: grid;
  gap: clamp(18px, 2.4vw, 40px);
  padding: clamp(34px, 3.6vw, 56px) clamp(22px, 3vw, 48px) clamp(26px, 2.8vw, 40px);
}

@media (min-width: 1040px) {
  .ts-why-head {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    align-items: end;
  }
}

.ts-why-kick {
  margin: 0 0 13px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

.ts-why-h {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(27px, 3.2vw, 43px);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: #fff;
}

/* .sf is the shared logo device: serif, and --ac by default — which on
   this panel would be the panel. Gold, as the wordmark itself is. */
.ts-why-h .sf {
  color: var(--gold);
  font-size: 1.22em;
  line-height: 1.04;
  margin-top: 2px;
}

.ts-why-lede {
  margin: 0;
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.76;
  color: rgba(255, 255, 255, .80);
}

/* ------------------------------------------------------------------
   The four quarters
   ------------------------------------------------------------------ */

.ts-why-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;                                   /* the hairlines themselves */
  background: rgba(255, 255, 255, .15);
  border-top: 1px solid rgba(255, 255, 255, .15);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ts-why-point {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;     /* text row absorbs slack, so
                                                 the links line up across
                                                 quarters of unequal length */
  grid-template-areas:
    "mark no"
    "mark title"
    ".    text"
    ".    link";
  column-gap: 16px;
  padding: clamp(24px, 2.6vw, 38px) clamp(22px, 3vw, 48px);
  background: var(--ac);
}

.ts-why-no {
  grid-area: no;
  align-self: center;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  font-variant-numeric: tabular-nums;
  color: rgba(234, 185, 36, .9);
}

.ts-why-mark {
  grid-area: mark;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--gold);
}
.ts-why-mark svg {
  width: 22px;
  height: 22px;
  display: block;
}

.ts-why-t {
  grid-area: title;
  align-self: center;
  margin: 6px 0 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.32;
  color: #fff;
}

.ts-why-p {
  grid-area: text;
  margin: 11px 0 0;
  font-size: 15.5px;
  line-height: 1.72;
  color: rgba(255, 255, 255, .78);
}

.ts-why-link {
  grid-area: link;
  justify-self: start;
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;                 /* tap target */
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  border-radius: 12px;
  transition: color .2s var(--oh-ease, ease);
}
.ts-why-link svg {
  width: 17px;
  height: 17px;
  flex: none;
  transition: transform .2s var(--oh-ease, ease);
}
.ts-why-link:hover { color: var(--gold); }
.ts-why-link:hover span { text-decoration: underline; text-underline-offset: 3px; }
.ts-why-link:hover svg { transform: translateX(3px); }

/* ------------------------------------------------------------------
   The record strip

   A step down to --ac-dark inside the panel, so the receipts read as
   the footing of the argument rather than a fifth reason. Every row is
   a value an administrator entered; a row with no evidence behind it
   is absent, so this strip can be four items wide, one, or gone.
   ------------------------------------------------------------------ */

.ts-why-rec {
  padding: clamp(24px, 2.6vw, 36px) clamp(22px, 3vw, 48px) clamp(26px, 2.8vw, 38px);
  background: var(--ac-dark);
  border-top: 1px solid rgba(255, 255, 255, .15);
}

.ts-why-rec-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(16px, 1.8vw, 24px);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}

.ts-why-seal {
  display: inline-flex;
  flex: none;
  width: 22px;
  height: 22px;
}
.ts-why-seal svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ts-why-rec-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ts-why-rec-i {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding-inline-start: 16px;
}

/* The gold tick down the side of each receipt. A rule, not a box, and
   rounded at both ends — there is nothing square-cornered in here. */
.ts-why-rec-i::before {
  content: "";
  position: absolute;
  inset-block: 3px;
  inset-inline-start: 0;
  width: 2px;
  border-radius: 999px;
  background: rgba(234, 185, 36, .55);
}

.ts-why-rl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

.ts-why-rn {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.42;
  color: #fff;
}

/* The licence number. Tabular figures and a little tracking so it reads
   as a reference to be copied, and anywhere-wrapping so a long one can
   never push the panel wider than the page. */
.ts-why-rv {
  margin-top: 2px;
  font-size: 13.5px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  color: var(--gold);
}

.ts-why-rlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;                 /* tap target */
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
  border-radius: 12px;
  transition: color .2s var(--oh-ease, ease);
}
.ts-why-rlink svg {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform .2s var(--oh-ease, ease);
}
.ts-why-rlink:hover { color: var(--gold); }
.ts-why-rlink:hover span { text-decoration: underline; text-underline-offset: 3px; }
.ts-why-rlink:hover svg { transform: translate(2px, -2px); }

/* ------------------------------------------------------------------
   Focus. The global ring is --ac, which on this panel is invisible.
   ------------------------------------------------------------------ */

.ts-why a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 12px;
}

/* ------------------------------------------------------------------
   Narrower
   ------------------------------------------------------------------ */

@media (max-width: 1000px) {
  .ts-why-rec-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Below this the 46px icon column costs more than it earns. Measured at
   768: holding the column leaves the prose 246px wide inside a 352px
   quarter, which sets four or five words to the line. The mark and the
   ordinal keep their own row instead and the prose takes the full width,
   which returns it to 308px. The rule starts at 900 rather than at the
   one-column breakpoint below, because the squeeze arrives while the
   quarters are still side by side. */
@media (max-width: 900px) {
  .ts-why-point {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "mark  no"
      "title title"
      "text  text"
      "link  link";
  }
  .ts-why-t { margin-top: 16px; }
}

@media (max-width: 760px) {
  .ts-why-points { grid-template-columns: minmax(0, 1fr); }
  .ts-why-lede { font-size: 16px; }
}

@media (max-width: 560px) {
  .ts-why-rec-list { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .ts-why-link,
  .ts-why-link svg,
  .ts-why-rlink,
  .ts-why-rlink svg { transition: none; }
  .ts-why-link:hover svg,
  .ts-why-rlink:hover svg { transform: none; }
}