/* ==========================================================================
   home.css — /en/home.html
   Design A "Editorial Trust" — home-only styles.
   Layout/sections mirror the Home-Page template; styling uses Design-A tokens
   & components (global.css / header.css / footer.css). Native CSS Grid +
   Flexbox only. No Bootstrap.
   ========================================================================== */

/* ── Section scaffold ─────────────────────────────────────────────────────── */
.home-section { padding-block: clamp(var(--sp-10), 6vw, var(--sp-16)); }
.home-section--tint { background: var(--bg-warm); }
.home-section--flush { padding-block: clamp(var(--sp-6), 4vw, var(--sp-10)); }

.home-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-block-end: var(--sp-5);
}
.home-section-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--gray-900);
}
@media (min-width: 768px) { .home-section-title { font-size: var(--text-3xl); } }

.view-more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
  transition: color var(--transition-fast);
}
.view-more:hover { color: var(--primary-hover); }
.view-more svg { width: 16px; height: 16px; }

/* ── Hero (full-bleed image + overlaid content) ───────────────────────────── */
.home-hero { position: relative; }
.home-hero-bg {
  display: block;
  width: 100%;
  height: clamp(360px, 46vw, 560px);
  object-fit: cover;
}
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 32, 96, 0.30) 0%, rgba(0, 32, 96, 0.55) 100%);
}
.home-hero-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-6);
  color: var(--on-navy);
}
.home-hero-content h1 {
  font-size: clamp(var(--text-4xl), 6vw, var(--text-5xl));
  font-weight: var(--weight-bold);
  line-height: 1.1;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}
.home-hero-content p {
  font-size: var(--text-lg);
  max-width: 46ch;
  opacity: 0.95;
}

/* ── Filter pills ─────────────────────────────────────────────────────────── */
/* Mobile base: scroll horizontally. Wrapping all 15 categories at 375px costs
   9 rows / ~430px — over half the viewport — which would bury the cards below
   the fold. Scrollbar styling is inherited from shared/global.css (thin/orange).
   Tablet and up: wrap, so the full set is visible with no scroller — matching
   the .filter-chips / .category-filter layouts in shared/global.css that the
   tours and visa listings already use for this same unified .pill component. */
.pill-row {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-block-end: var(--sp-2);
  margin-block-end: var(--sp-4);
  list-style: none;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
  .pill-row {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}
/* .pill visual styling now lives in the unified CATEGORY PILLS component in
   shared/global.css (single source of truth). Only the .pill-row layout
   container above is defined here. */

/* ── Horizontal card scroller (CSS-only; no JS carousel) ──────────────────── */
.h-scroller {
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* overflow-x:auto forces overflow-y to compute to `auto`, which clips vertically — so a card's
     hover lift (translateY -3px) + shadow would be cut at the top. Give top+bottom room inside the
     clip box, then pull the added top padding back with a negative top margin so the section
     spacing stays pixel-identical (the 16px gap above each scroller absorbs it, no overlap). */
  padding-block: var(--sp-4);
  margin-block-start: calc(var(--sp-4) * -1);
  list-style: none;
  /* Scrollbar styling is inherited from shared/global.css (thin + brand orange).
     Do not re-declare scrollbar-color/-width here — the site-wide rule is the
     single source of truth, so the bar matches every other scroller. */
  -webkit-overflow-scrolling: touch;
}
.h-scroller > li {
  flex: 0 0 var(--scroller-item, 260px);
  scroll-snap-align: start;
}
/* Item widths sized so a fixed number of cards peek into the 1440 container
   (the rest slide). Math at wide desktop: the container is 1440 wide with 20px
   gutters = 1400 of content, and the scroller gap is 20px, so N visible cards
   means  N*w + (N-1)*20 = 1400.
     cards-sm   240px -> ~5.5 visible
     cards-cars 238px -> 5.5 visible  (5.5*238 + 5*20 = 1409)
     cards-lg   293px -> 4.5 visible  (4.5*293 + 4*20 = 1398.5)

   cards-cars exists so the Car Rental scroller can be sized independently of
   Holiday Homes, which shares the same .svc-card but shows 4.5. They were one
   class; splitting them is the point, so do not re-merge them because the two
   values happen to look close on a wide screen.

   The min(..., 78vw) is a small-screen guard only: it engages below roughly a
   376px viewport (305px for cards-cars), where a flat card would be wider than
   the padded container and clip instead of peeking. No-op on larger screens. */
.h-scroller.cards-sm   { --scroller-item: 240px; }
.h-scroller.cards-cars { --scroller-item: min(238px, 78vw); }
.h-scroller.cards-lg   { --scroller-item: min(293px, 78vw); }
.h-scroller.tiles      { --scroller-item: 150px; }

/* ── Experience card (Essential Experiences) — overlay portrait card matching
      the Home-Page template: image-filled, text over a dark bottom gradient ──── */
/* Razor integration: each card is wrapped in a link to the tour (data-bound) */
.exp-card-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.exp-card {
  position: relative;
  width: 100%;
  aspect-ratio: 25 / 39;            /* ~250×390 portrait, as in the template */
  border-radius: 14px;
  overflow: hidden;
  background: var(--gray-900);
  border: 1px solid transparent;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              border-color var(--transition-fast);
}
.exp-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  border-color: var(--primary);
}
.exp-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s var(--ease-out);
}
.exp-card:hover .exp-card-img { transform: scale(1.07); }
.exp-card::after {                  /* dark gradient over the lower image */
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 65%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, transparent 100%);
  pointer-events: none;
}
.exp-card-body {                    /* text overlaid on the image bottom */
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 14px 16px;
}
.exp-card-title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--on-navy);
  line-height: 1.3;
}
.exp-price {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: #FFCC00;                   /* gold — matches the template price + the gold dirham glyph */
}
.exp-price .from,
.exp-price .unit {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.86);
}
.exp-price img { width: 15px; height: auto; }

/* ── Service card (Car Rental + Holiday Homes) ────────────────────────────── */
.svc-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.svc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.svc-card-img-wrap { position: relative; }
.svc-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--gray-100);
}
.svc-wish {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-end: var(--sp-3);
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.92);
  color: var(--gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: color var(--transition-fast);
}
.svc-wish:hover { color: var(--primary); }
.svc-wish svg { width: 18px; height: 18px; }
.svc-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  flex: 1;
}
.svc-rating { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); }
.rating-badge {
  background: var(--primary);
  color: var(--on-primary-lg);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
  padding: 2px var(--sp-2);
}
.rating-label   { font-weight: var(--weight-semibold); color: var(--gray-900); }
.rating-reviews { color: var(--gray-600); }
/* Holiday-home and car titles are long, descriptive strings from the provider
   ("Facing the Dubai Water Canal 1BR, Minutes from Metro…"), so they wrap to
   several lines inside a card. Kept a step below the body scale with snug
   leading so a 3-4 line title does not dominate the card. */
.svc-title { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--gray-900); line-height: var(--leading-snug); }
.svc-text  { font-size: var(--text-sm); color: var(--gray-600); line-height: var(--leading-relaxed); }
.svc-card-footer {
  margin-block-start: auto;
  padding-block-start: var(--sp-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.svc-more-link {
  font-size: var(--text-sm);
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
}
.svc-more-link:hover { text-decoration: underline; }
/* The unit ("per night" / "/ day") sits on its own line UNDER the amount, not
   inline after it. Inline, the footer's flex shrink broke it mid-phrase
   ("AED 243 per" / "night"), which read as a wrapping bug. block + nowrap makes
   the two-line stack deliberate and keeps each line intact. */
.svc-price { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--gray-900); line-height: var(--leading-snug); white-space: nowrap; }
.svc-price span { display: block; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--gray-600); }

/* ── Visa tiles ───────────────────────────────────────────────────────────── */
.visa-grid-home {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .visa-grid-home { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .visa-grid-home { grid-template-columns: repeat(4, 1fr); } }
/* Razor integration: the whole visa tile is a link to the visa detail page */
.visa-tile-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.visa-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  height: 100%;
  padding: var(--sp-6);
  background: var(--bg-white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.visa-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.visa-tile-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.visa-tile-icon svg { width: 22px; height: 22px; }
.visa-tile-title { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--gray-900); }
.visa-tile-desc { font-size: var(--text-sm); color: var(--gray-600); line-height: var(--leading-relaxed); flex: 1; }

/* ── Activity tiles (Top Things to Do) ────────────────────────────────────── */
.activity-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  color: var(--gray-900);
}
.activity-img {
  display: block;
  width: 100%;
  height: 130px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--gray-100);
}
.activity-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.activity-title { font-size: var(--text-sm); font-weight: var(--weight-medium); text-align: center; }
.activity-tile:hover .activity-img img { transform: scale(1.05); }
.activity-tile:hover .activity-title { color: var(--primary); }

/* Whole-card/tile wrapper links are not inline text links, so they must never
   pick up the global `a:hover { text-decoration: underline }` (global.css) — that
   rule's specificity (0,1,1) beats the base `text-decoration: none` (0,1,0) on
   these wrappers, striking through the tile's title AND description on hover.
   A `.class:hover` guard (0,2,0) wins it back. The intended hover affordances —
   the card lift/shadow and the activity title turning --primary — are untouched. */
.exp-card-link:hover,   .exp-card-link:focus-visible,
.visa-tile-link:hover,  .visa-tile-link:focus-visible,
.activity-tile:hover,   .activity-tile:focus-visible {
  text-decoration: none;
}

/* ── Promo banners (full-width images) ────────────────────────────────────── */
.home-banner-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
}

/* ── Support / Advertising cells (full-bleed two-tone) ────────────────────── */
/* Support / Advertising band — matches the template's "top banner":
   one orange band, two centered prompts, a soft glow circle behind each. */
.promo-cells {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--primary);
  overflow: hidden;
}
@media (min-width: 768px) { .promo-cells { grid-template-columns: 1fr 1fr; } }
.promo-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: clamp(var(--sp-6), 4vw, var(--sp-10)) var(--sp-6);
  color: var(--on-primary-lg);
}
.promo-cell::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 440px;
  height: 440px;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.10);
  pointer-events: none;
}
.promo-cell > * { position: relative; z-index: 1; }
.promo-cell p { font-size: var(--text-xl); font-weight: var(--weight-semibold); margin: 0; }
@media (min-width: 768px) {
  .promo-cell + .promo-cell { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.18); }
}

.btn-white { background: var(--bg-white); color: var(--navy); border-color: var(--bg-white); }
.btn-white:hover { background: var(--gray-100); color: var(--navy); border-color: var(--gray-100); }

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .exp-card, .svc-card, .visa-tile, .activity-img img, .view-more, .pill, .svc-wish { transition: none; }
  .exp-card:hover, .svc-card:hover, .visa-tile:hover { transform: none; }
  .activity-tile:hover .activity-img img { transform: none; }
}

/* ===== HERO A — GetYourGuide: Full-bleed photo hero, centered search bar + category chips ===== */
.ha-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 460px;
  padding: var(--sp-16) 0;
  overflow: hidden;
  isolation: isolate;
}
.ha-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.ha-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent; /* no dark overlay — show the Dubai photo as-is */
}
.ha-hero__inner {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.ha-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--on-navy);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
}
.ha-hero__eyebrow svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.ha-hero__title {
  margin: 0 0 var(--sp-3);
  color: var(--on-navy);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(0, 28, 58, 0.45);
}
.ha-hero__subtitle {
  margin: 0 auto var(--sp-8);
  max-width: 560px;
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  text-shadow: 0 1px 8px rgba(0, 28, 58, 0.40);
}
.ha-hero__search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--sp-2);
  background: var(--bg-white);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
}
.ha-hero__field {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1 1 auto;
  min-width: 0;
  padding-inline-start: var(--sp-5);
  color: var(--gray-400);
}
.ha-hero__field svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.ha-hero__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--gray-900);
  padding: var(--sp-3) 0;
}
.ha-hero__input::placeholder {
  color: var(--gray-400);
  font-weight: var(--weight-medium);
}
.ha-hero__input:focus {
  outline: none;
}
.ha-hero__search:focus-within {
  box-shadow: var(--shadow-lg), 0 0 0 3px var(--primary-border);
}
.ha-hero__submit {
  flex-shrink: 0;
  border-radius: var(--radius-full);
  padding-inline: var(--sp-8);
  gap: var(--sp-2);
}
.ha-hero__submit svg {
  width: 1.125rem;
  height: 1.125rem;
}
.ha-hero__submit-label {
  display: inline;
}
.ha-hero__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.ha-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: var(--on-navy);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: var(--transition-fast);
}
.ha-hero__chip svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}
.ha-hero__chip:hover {
  background: var(--bg-white);
  border-color: var(--bg-white);
  color: var(--navy);
}
.ha-hero__chip:focus-visible {
  outline: 2px solid var(--bg-white);
  outline-offset: 2px;
}
.ha-hero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-8);
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.ha-hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.ha-hero__trust-item svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  color: var(--on-navy);
}
.ha-hero__trust-sep {
  width: 1px;
  height: 1rem;
  background: rgba(255, 255, 255, 0.3);
}
@media (max-width: 640px) {
  .ha-hero {
    min-height: 0;
    padding: var(--sp-12) 0;
  }
  .ha-hero__title {
    font-size: var(--text-4xl);
  }
  .ha-hero__subtitle {
    font-size: var(--text-base);
  }
  .ha-hero__search {
    flex-wrap: wrap;
    border-radius: var(--radius-2xl);
    padding: var(--sp-3);
    gap: var(--sp-3);
  }
  .ha-hero__field {
    flex-basis: 100%;
    padding-inline-start: var(--sp-4);
  }
  .ha-hero__submit {
    flex-basis: 100%;
    justify-content: center;
  }
  .ha-hero__trust-sep {
    display: none;
  }
}