/* ==========================================================================
   Himalayan Trails — finish layer

   Loaded after every component sheet. Nothing here changes a size or a
   breakpoint — it only adds the depth, light and motion that separate a tidy
   page from a premium one: photograph scrims, layered shadows, hover lift,
   focus rings that match the brand. Every rule is additive, so a component
   still reads correctly if this file fails to load.
   ========================================================================== */

/* ---- Photographs ---------------------------------------------------------
   A quiet bottom scrim on every framed photograph. It gives overlaid chips and
   captions something to sit on and adds the "printed" depth that flat images
   lack. It is transparent for the top 55%, so it never dulls the picture. */

/* (Category tiles already carry their own, stronger gradient in home.css.) */
.ht-trek-card__media::after,
.ht-why__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(11 22 17 / 0) 55%, rgb(11 22 17 / 0.28) 100%);
  transition: opacity var(--ht-duration-base) var(--ht-ease);
}

.ht-trek-card:hover .ht-trek-card__media::after {
  opacity: 0.6;
}

/* A hairline of light along the top edge of a photograph makes the frame read
   as recessed rather than pasted on. */
.ht-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 0 0 1px rgb(11 22 17 / 0.06);
}

/* ---- Cards ---------------------------------------------------------------
   Two-layer shadow: a tight contact shadow plus a soft ambient one. Hover
   lifts the card and swaps to a deeper pair, so movement reads as height. */

.ht-trek-card,
.ht-departure,
.ht-rental,
.ht-browse__card {
  box-shadow:
    0 1px 2px rgb(11 22 17 / 0.05),
    0 8px 24px -16px rgb(11 22 17 / 0.16);
}

.ht-trek-card:hover,
.ht-trek-card:focus-within {
  box-shadow:
    0 2px 4px rgb(11 22 17 / 0.06),
    0 24px 48px -20px rgb(11 22 17 / 0.28);
}

.ht-departure,
.ht-rental,
.ht-browse__card {
  transition:
    transform var(--ht-duration-base) var(--ht-ease),
    box-shadow var(--ht-duration-base) var(--ht-ease),
    border-color var(--ht-duration-base) var(--ht-ease);
}

.ht-departure:hover,
.ht-rental:hover,
.ht-browse__card:hover {
  transform: translateY(-3px);
  border-color: var(--ht-stone-400);
  box-shadow:
    0 2px 4px rgb(11 22 17 / 0.06),
    0 20px 40px -20px rgb(11 22 17 / 0.26);
}

/* Chips over photographs get a glass finish so they hold up on any picture. */
.ht-chip--overlay {
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.18), inset 0 1px 0 rgb(255 255 255 / 0.12);
}

/* The price is the number people scan for — give it a touch more weight. */
.ht-price__amount {
  letter-spacing: -0.01em;
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.6);
}

/* ---- Category tiles ------------------------------------------------------ */

.ht-category {
  transition: transform var(--ht-duration-base) var(--ht-ease), box-shadow var(--ht-duration-base) var(--ht-ease);
  box-shadow: 0 10px 30px -18px rgb(11 22 17 / 0.4);
}

.ht-category:hover,
.ht-category:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 28px 48px -22px rgb(11 22 17 / 0.5);
}

.ht-category img {
  transition: transform var(--ht-duration-slow) var(--ht-ease-out);
}

.ht-category:hover img,
.ht-category:focus-within img {
  transform: scale(1.05);
}

/* ---- "Why" cards --------------------------------------------------------- */

.ht-why__media {
  position: relative;
  overflow: hidden;
}

.ht-why__media img {
  transition: transform var(--ht-duration-slow) var(--ht-ease-out);
}

.ht-why__item:hover .ht-why__media img {
  transform: scale(1.04);
}

/* ---- Buttons ------------------------------------------------------------- */

.ht-btn--primary {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.18),
    0 1px 2px rgb(11 22 17 / 0.12),
    0 10px 22px -12px rgb(160 84 28 / 0.55);
  transition:
    transform var(--ht-duration-fast) var(--ht-ease),
    box-shadow var(--ht-duration-fast) var(--ht-ease),
    background-color var(--ht-duration-fast) var(--ht-ease);
}

.ht-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.18),
    0 2px 4px rgb(11 22 17 / 0.12),
    0 16px 28px -12px rgb(160 84 28 / 0.6);
}

.ht-btn--primary:active {
  transform: translateY(0);
}

/* Arrow links slide their arrow on hover — small, but it makes the page feel
   alive under the cursor. */
.ht-link__arrow {
  transition: transform var(--ht-duration-fast) var(--ht-ease);
}

.ht-link:hover .ht-link__arrow {
  transform: translateX(4px);
}

/* ---- Hero ---------------------------------------------------------------- */

.ht-hero__title {
  text-shadow: 0 2px 24px rgb(11 22 17 / 0.35);
}

/* ---- Meter --------------------------------------------------------------- */

.ht-meter {
  box-shadow: inset 0 1px 2px rgb(11 22 17 / 0.08);
}

.ht-meter__fill {
  background-image: linear-gradient(90deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.22) 100%);
}

/* ---- Brand-matched selection and focus ---------------------------------- */

::selection {
  background: var(--ht-clay-600);
  color: var(--ht-text-inverse);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ht-clay-600);
  outline-offset: 3px;
  border-radius: var(--ht-radius-sm);
}

/* ---- Motion preference --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ht-trek-card,
  .ht-departure,
  .ht-rental,
  .ht-browse__card,
  .ht-category,
  .ht-category img,
  .ht-why__media img,
  .ht-btn--primary,
  .ht-link__arrow {
    transition: none;
  }

  .ht-trek-card:hover,
  .ht-departure:hover,
  .ht-rental:hover,
  .ht-browse__card:hover,
  .ht-category:hover,
  .ht-btn--primary:hover {
    transform: none;
  }
}

/* Touch screens have no hover: keep the resting shadows, drop the lifts. */
@media (hover: none) {
  .ht-trek-card:hover,
  .ht-departure:hover,
  .ht-rental:hover,
  .ht-browse__card:hover,
  .ht-category:hover,
  .ht-btn--primary:hover {
    transform: none;
  }
}

/* ==========================================================================
   Floating buttons (admin-managed) + sticky "Enquiry Now" tab
   ========================================================================== */
.ht-float--left { right: auto; left: clamp(0.875rem, 0.5rem + 1vw, 1.5rem); }
.ht-float--right { left: auto; right: clamp(0.875rem, 0.5rem + 1vw, 1.5rem); }
.ht-float__btn { background: var(--ht-pine-800); border: 0; cursor: pointer; }
.ht-float__btn svg { width: 1.625rem; height: 1.625rem; fill: currentColor; }
/* Which stack shows depends on the device — the rest is display:none. */
@media (min-width: 48rem) { .ht-float--mobile { display: none; } }
@media (max-width: 47.9375rem) { .ht-float--desktop { display: none; } }
/* Older rule hid the call button on desktop; placement is admin-decided now. */
@media (min-width: 48rem) { .ht-float__btn--call { display: grid; } }

.ht-sticky-tab {
  position: fixed;
  top: 50%;
  z-index: var(--ht-z-float);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border: 0;
  background: var(--ht-clay-600, #a5571f);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: var(--ht-shadow-md);
  cursor: pointer;
  writing-mode: vertical-rl;
  transition: background-color .15s ease, transform .15s ease;
}
.ht-sticky-tab .ht-i-md { width: 1.1rem; height: 1.1rem; transform: rotate(90deg); }
.ht-sticky-tab--right { right: 0; border-radius: 0.75rem 0 0 0.75rem; transform: translateY(-50%); }
.ht-sticky-tab--left { left: 0; border-radius: 0 0.75rem 0.75rem 0; transform: translateY(-50%) rotate(180deg); }
.ht-sticky-tab--left .ht-i-md { transform: rotate(-90deg); }
.ht-sticky-tab:hover { background: var(--ht-clay-700, #8a4718); }
.ht-sticky-tab--right:hover { transform: translateY(-50%) translateX(-2px); }
@media (min-width: 48rem) { .ht-sticky-tab--mobile { display: none; } }
@media (max-width: 47.9375rem) {
  .ht-sticky-tab--desktop { display: none; }
  .ht-sticky-tab { font-size: 0.8rem; padding: 0.7rem 0.75rem; }
}

/* Phones: smaller floating buttons so they cover less of the content. */
@media (max-width: 47.9375rem) {
  .ht-float { gap: 0.5rem; }
  .ht-float__btn { width: 2.625rem; height: 2.625rem; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); }
  .ht-float__btn svg { width: 1.25rem; height: 1.25rem; }
  .ht-float--right { right: 0.75rem; }
  .ht-float--left { left: 0.75rem; }
}