/* =========================================================
   HOMEPAGE PAGE STYLES
   Shared rules are maintained in master.css.
   ========================================================= */

.epik-plan-section,
.section.alt.epik-plan-section {
  padding-top: 112px;
  padding-bottom: 118px;
  background:
    radial-gradient(
      circle at 4% 12%,
      rgba(227, 28, 37, 0.035),
      transparent 22%
    ),
    #ffffff;
}

/* Desktop / landscape tablet: all primary site heroes share one height. */

@media (min-width: 981px) {
  body.home-page .motion-hero,
body.location-page .locator-premium-hero {
    height: var(--halogo-hero-height-desktop);
    min-height: var(--halogo-hero-height-desktop);
  }

  /* Home */
  body.home-page .motion-hero-wrap {
    height: var(--halogo-hero-height-desktop);
    min-height: var(--halogo-hero-height-desktop);
  }

body.home-page .motion-hero-copy {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  body.home-page .cinematic-wall {
    height: var(--halogo-hero-height-desktop);
    padding-top: 20px;
    padding-bottom: 20px;
    gap: 12px;
  }

  body.home-page .cinematic-row {
    height: 132px;
    min-height: 132px;
  }

  body.home-page .cinematic-card {
    height: 132px;
  }

  /* Rakan Niaga / Partners. Match the higher-specificity luxury variant. */

  /* FAQ / eSIM */

  /* Location */
  body.location-page .locator-premium-hero {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  body.location-page .locator-premium-hero__inner {
    min-height: var(--halogo-hero-inner-desktop);
  }

  body.location-page .locator-premium-copy {
    padding-top: 0;
    padding-bottom: 0;
  }

  body.location-page .locator-premium-visual {
    min-height: var(--halogo-hero-inner-desktop);
  }
}

/* =========================================================
   PLAN CAROUSEL — ACTIVE POSITION INDICATOR
   JavaScript applies .is-active and aria-current="true".
   ========================================================= */

body.home-page .plan-carousel-dot {
  flex: 0 0 auto;
}

body.home-page .plan-carousel-dot.is-active,
body.home-page .plan-carousel-dot[aria-current="true"] {
  width: 36px;
  height: 10px;
  border-radius: 999px;
  background: #e72832;
  box-shadow: 0 4px 12px rgba(231, 40, 50, 0.22);
}

/* FAQ had a legacy 1300px minimum width. Remove it at every viewport so
   headings, search and image never get pushed outside the visible canvas. */

/* Tablet: let copy + artwork stack and grow naturally instead of clipping. */

@media (max-width: 980px) {
  body.home-page .motion-hero,
body.location-page .locator-premium-hero {
    height: auto;
  }

  /* A later desktop alignment rule previously restored two columns on the
         homepage at mobile widths. Force the hero back to one content-safe stack. */
  body.home-page .motion-hero-wrap {
    width: calc(100% - 32px);
    height: auto;
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  body.home-page .motion-hero-copy {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-self: stretch;
  }

  body.home-page .cinematic-wall {
    width: 100%;
    min-width: 0;
  }

  body.help-page .faq-v3-search {
    margin-right: auto;
    margin-left: auto;
  }

  body.location-page .locator-premium-hero {
    min-height: auto;
    padding-top: 56px;
    padding-bottom: 72px;
  }

  body.location-page .locator-premium-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  body.location-page .locator-premium-copy {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 0;
    text-align: center;
  }

  body.location-page .locator-premium-copy > p,
body.location-page .locator-hero-search,
body.location-page .locator-premium-hero .locator-compact-stats {
    margin-right: auto;
    margin-left: auto;
  }

  body.location-page .locator-premium-visual {
    width: min(720px, 100%);
    min-height: 500px;
    margin: 0 auto 18px;
  }

  body.location-page .locator-photo-frame {
    inset: 0 24px;
  }
}

/* Small screens: content dictates height; no fixed hero box is allowed. */

@media (max-width: 680px) {
  body.home-page .motion-hero,
body.location-page .locator-premium-hero {
    min-height: auto;
  }

  body.location-page .locator-premium-hero {
    padding-top: 42px;
    padding-bottom: 72px;
  }

  body.location-page .locator-premium-visual {
    min-height: 390px;
    margin-top: 8px;
  }
}