/* =====================================================================
   Testimonials — Sand & Skies Travels
   Built entirely on the tokens already defined in style.css
   (:root vars, .container 1220px, .sub-title, .sec-title, .btn, .chip,
   floatY keyframe) and on the shared .page-hero rules from
   destinations.css, so this page matches the Services / Trip pages.
   Every selector below is tg- / ts- scoped — no global rule is overridden.
   ===================================================================== */

/* =====================================================================
   1 · GALLERY  (premium masonry wall)
   ===================================================================== */
.tg-section{position:relative;padding:86px 0 94px;overflow:hidden}
.tg-section::before{                      /* soft brand glow, matches .trip-band */
  content:"";position:absolute;top:-170px;right:-190px;width:540px;height:540px;
  background:radial-gradient(circle,rgba(26,134,199,.13),transparent 62%);
  pointer-events:none;z-index:0}
.tg-section::after{
  content:"";position:absolute;bottom:-200px;left:-200px;width:520px;height:520px;
  background:radial-gradient(circle,rgba(17,61,72,.09),transparent 64%);
  pointer-events:none;z-index:0}
.tg-section .container{position:relative;z-index:1}

.tg-intro{max-width:660px}

/* ---------- masonry wall ---------- */
.tg-masonry{columns:4;column-gap:20px}
.tg-item{
  position:relative;display:block;width:100%;margin:0 0 20px;
  border-radius:18px;overflow:hidden;cursor:zoom-in;background:var(--light);
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  box-shadow:0 18px 42px -26px rgba(9,80,130,.55);
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s ease;
}
.tg-item img{width:100%;height:auto;display:block;
  transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
.tg-item:hover{transform:translateY(-6px);
  box-shadow:0 34px 62px -28px rgba(9,80,130,.6)}
.tg-item:hover img{transform:scale(1.07)}

/* hairline ring keeps the photos crisp on white */
.tg-item::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}

/* scrim + zoom pill (same idiom as .gallery-item on the home page) */
.tg-shade{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(to top,rgba(8,30,37,.72),rgba(8,30,37,.12) 52%,transparent);
  transition:opacity .45s ease}
.tg-item:hover .tg-shade{opacity:1}
.tg-zoom{position:absolute;left:0;right:0;top:50%;margin:0 auto;z-index:2;
  width:54px;height:54px;border-radius:50%;background:#fff;color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:15px;
  box-shadow:0 16px 30px -14px rgba(9,80,130,.7);
  opacity:0;transform:translateY(-50%) scale(.5);
  transition:opacity .4s ease,transform .45s cubic-bezier(.2,.7,.3,1)}
.tg-item:hover .tg-zoom{opacity:1;transform:translateY(-50%) scale(1)}

/* hover sheen — same idiom as .btn::before */
.tg-sheen{position:absolute;top:0;left:-140%;width:55%;height:100%;z-index:2;pointer-events:none;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-20deg);transition:left .95s ease}
.tg-item:hover .tg-sheen{left:165%}

/* progressive reveal */
.tg-item.is-hidden{display:none}
.tg-more{display:flex;justify-content:center;margin-top:14px}
.tg-more .btn{padding:14px 34px}
.tg-more .btn i{transition:transform .35s ease}
.tg-more .btn:hover i{transform:translateY(3px)}

/* ---------- lightbox ---------- */
body.tg-lock{overflow:hidden}
.tg-lightbox{position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;padding:6vh 7vw;
  background:rgba(6,24,30,.93);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease}
.tg-lightbox.is-open{opacity:1;visibility:visible}
.tg-lb-figure{position:relative;max-width:100%;max-height:88vh;
  display:flex;align-items:center;justify-content:center}
.tg-lb-img{max-width:100%;max-height:88vh;width:auto;height:auto;
  border-radius:16px;box-shadow:0 44px 90px -30px rgba(0,0,0,.85);
  transform:scale(.94);opacity:.4;
  transition:transform .5s cubic-bezier(.2,.7,.3,1),opacity .4s ease}
.tg-lightbox.is-open .tg-lb-img{transform:scale(1);opacity:1}
.tg-lb-btn{position:absolute;z-index:2;width:56px;height:56px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:.3s ease}
.tg-lb-btn:hover{background:#fff;color:var(--accent);border-color:#fff}
.tg-lb-prev{left:24px;top:50%;transform:translateY(-50%)}
.tg-lb-next{right:24px;top:50%;transform:translateY(-50%)}
.tg-lb-close{right:24px;top:24px;width:50px;height:50px;font-size:18px}
.tg-lb-count{position:absolute;left:0;right:0;bottom:22px;text-align:center;
  font-family:var(--font-title);font-weight:600;font-size:14px;letter-spacing:.6px;
  color:rgba(255,255,255,.82)}

/* =====================================================================
   2 · TESTIMONIALS
   ===================================================================== */
.ts-section{position:relative;background:var(--light);padding:90px 0 96px;overflow:hidden}
.ts-section::before{
  content:"";position:absolute;top:-190px;left:-190px;width:540px;height:540px;
  background:radial-gradient(circle,rgba(26,134,199,.14),transparent 62%);
  pointer-events:none;z-index:0}
.ts-section .container{position:relative;z-index:1}
.ts-intro{max-width:680px;margin:0 auto}

/* trust chips — reuse the shared .chip pill from destinations.css */
.ts-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px}
.ts-chips .chip{cursor:default}
.ts-chips .chip:hover{background:#fff;color:var(--accent);border-color:var(--border);
  transform:none;box-shadow:none}
.ts-chips .chip:hover i{color:var(--sky)}

/* ---------- spotlight card ---------- */
.ts-feature{position:relative;display:grid;grid-template-columns:300px 1fr;
  background:#fff;border:1px solid var(--border);border-radius:26px;overflow:hidden;
  box-shadow:0 26px 60px -34px rgba(9,80,130,.55);margin-bottom:28px;
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s ease}
.ts-feature:hover{transform:translateY(-6px);box-shadow:0 40px 74px -34px rgba(9,80,130,.62)}

.ts-feature-aside{position:relative;overflow:hidden;padding:44px 36px;
  display:flex;flex-direction:column;justify-content:center;gap:16px;color:#fff;
  background:linear-gradient(150deg,var(--accent),var(--accent-soft) 52%,var(--blue))}
.ts-feature-aside::before{content:"";position:absolute;top:-70px;right:-70px;
  width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.09)}
.ts-feature-aside::after{content:"";position:absolute;bottom:-90px;left:-60px;
  width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.07)}
.ts-feature-mark{position:relative;z-index:1;width:64px;height:64px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  box-shadow:0 18px 32px -16px rgba(0,0,0,.5);animation:floatY 5s ease-in-out infinite}
.ts-feature-label{position:relative;z-index:1;font-family:var(--font-body);
  font-size:13px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;
  color:rgba(255,255,255,.82)}
.ts-feature-score{position:relative;z-index:1;font-family:var(--font-title);
  font-size:44px;font-weight:700;line-height:1;color:#fff}
.ts-feature-score--word{font-size:26px;line-height:1.3}
.ts-feature-aside .ts-stars{position:relative;z-index:1;color:#ffd166;margin-bottom:0}

.ts-feature-body{padding:48px 52px;display:flex;flex-direction:column;justify-content:center}
.ts-feature-text{font-family:var(--font-title);font-weight:500;font-size:23px;line-height:1.6;
  color:var(--heading);margin-bottom:28px}
.ts-feature-text p+p{margin-top:16px}

/* ---------- card wall (masonry — the reviews vary a lot in length) ---------- */
.ts-grid{columns:2;column-gap:26px}
.ts-card{position:relative;overflow:hidden;background:#fff;margin:0 0 26px;
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  border:1px solid var(--border);border-radius:22px;padding:36px 34px 32px;
  box-shadow:0 20px 48px -30px rgba(9,80,130,.5);
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s ease,border-color .45s ease}
.ts-card::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;
  background:linear-gradient(90deg,var(--accent),var(--sky) 55%,var(--blue));
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.65,.05,.36,1)}
.ts-card:hover{transform:translateY(-8px);border-color:rgba(26,134,199,.3);
  box-shadow:0 36px 64px -32px rgba(9,80,130,.6)}
.ts-card:hover::before{transform:scaleX(1)}
.ts-card-quote{position:absolute;top:24px;right:28px;font-size:52px;line-height:1;
  color:rgba(26,134,199,.12);pointer-events:none;
  transition:transform .5s ease,color .5s ease}
.ts-card:hover .ts-card-quote{transform:scale(1.1) rotate(-6deg);color:rgba(26,134,199,.22)}
.ts-card-text{position:relative;z-index:1;color:var(--body-strong);font-weight:500;
  font-size:16px;line-height:1.75;margin-bottom:26px}
.ts-card-text p+p{margin-top:14px}

/* ---------- shared bits ---------- */
.ts-stars{display:flex;gap:4px;font-size:14px;color:#ffb400;margin-bottom:16px}
.ts-tag{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
  padding:6px 14px;border-radius:50px;
  font-family:var(--font-title);font-weight:600;font-size:12.5px;letter-spacing:.3px;
  color:var(--accent);background:var(--light);border:1px solid var(--border)}
.ts-tag i{font-size:11px;color:var(--sky)}
.ts-author{display:flex;align-items:center;gap:14px}
.ts-avatar{flex-shrink:0;width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-title);font-weight:600;font-size:18px;letter-spacing:.5px;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--blue));
  box-shadow:0 14px 26px -12px rgba(9,80,130,.75)}
.ts-avatar i{font-size:19px}
.ts-feature .ts-avatar i{font-size:21px}
.ts-feature .ts-avatar{width:60px;height:60px;font-size:20px}
.ts-author-name{display:block;font-family:var(--font-title);font-weight:600;
  font-size:17px;line-height:1.3;color:var(--heading)}
.ts-author-role{display:block;font-size:13px;font-weight:600;color:var(--sky)}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1200px){
  .tg-masonry{columns:3}
  .ts-feature{grid-template-columns:260px 1fr}
  .ts-feature-body{padding:42px 40px}
  .ts-feature-text{font-size:21px}
}
@media (max-width:900px){
  .ts-feature{grid-template-columns:1fr}
  .ts-feature-aside{flex-direction:row;align-items:center;gap:22px;padding:28px 32px}
  .ts-feature-mark{width:56px;height:56px;border-radius:18px;font-size:21px}
  .ts-feature-score{font-size:34px}
  .ts-feature-body{padding:36px 32px 34px}
  .ts-grid{columns:1}
}
@media (max-width:768px){
  .tg-masonry{columns:2;column-gap:16px}
  .tg-item{margin-bottom:16px}
  .tg-section{padding:64px 0 70px}
  .ts-section{padding:64px 0 70px}
  .tg-lightbox{padding:9vh 4vw}
  .tg-lb-prev{left:8px}
  .tg-lb-next{right:8px}
  .tg-lb-close{right:8px;top:10px}
}
@media (max-width:600px){
  .tg-masonry{columns:1}
  .tg-item{border-radius:16px}
  .tg-item::after{border-radius:16px}
  .ts-feature-text{font-size:19px}
  .ts-feature-body{padding:30px 24px 28px}
  .ts-feature-aside{padding:24px}
  .ts-card{padding:30px 24px 26px}
  .tg-lb-btn{width:46px;height:46px;font-size:15px}
}

/* =====================================================================
   UTILITY — the [hidden] attribute must beat the display rules above
   ===================================================================== */
.tg-lightbox[hidden],
.tg-more[hidden]{display:none}

/* gallery heading: title left, intro right, stacking cleanly when narrow */
.tg-section .title-flex{gap:24px}
.tg-section .tg-intro{flex:1 1 360px}
@media (max-width:900px){
  .tg-section .title-flex{flex-direction:column;align-items:flex-start}
}