/* =========================================================================
   GulfRabit · Home module styles
   Only home-specific composition lives here (hero, trust strip layout,
   industry band, testimonials). Everything else reuses the shared design
   system. Load AFTER shared/css/style.css.
   ========================================================================= */

/* ---- Hero carousel ---------------------------------------------------- */
.hero { position: relative; overflow: hidden; }
.hero__viewport { position: relative; height: clamp(460px, 78vh, 760px); }
.hero__slide {
  position: absolute; inset: 0;
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr);   /* prevent content min-width from overflowing on mobile */
  opacity: 0; visibility: hidden;
  transition: opacity 700ms var(--ease-out), visibility 700ms;
}
@media (max-width: 520px) { .hero__actions .btn-lg-gr { flex: 1 1 auto; } }
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* brand-gradient duotone overlay ties disparate imagery into one system */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.78) 42%, rgba(255,255,255,.30) 100%),
    var(--gr-gradient-soft);
}
.hero__content { position: relative; z-index: 2; max-width: 640px; }
.hero__eyebrow { color: var(--link); }
.hero__title { margin: var(--space-3) 0; }
.hero__text { color: var(--text-secondary); max-width: 48ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

.hero__controls { position: absolute; z-index: 3; bottom: var(--space-6); right: var(--space-6); display: flex; gap: var(--space-2); }
.hero__dots { position: absolute; z-index: 3; bottom: var(--space-6); left: var(--space-6); display: flex; gap: var(--space-2); }
.hero__dot { width: 32px; height: 4px; border: 0; border-radius: var(--radius-pill); background: rgba(16,19,20,.18); cursor: pointer; padding: 0; overflow: hidden; }
.hero__dot.is-active { background: var(--gr-gradient); }

/* ---- Trust strip ------------------------------------------------------ */
.trust-band { border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); background: var(--surface-band); }

/* ---- Industry / B2B band --------------------------------------------- */
.industry-band {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  background:
    linear-gradient(90deg, rgba(255,255,255,.97), rgba(255,255,255,.82)),
    url("../../assets/images/hero/hero-industrial.svg") center/cover;
  padding: clamp(2rem, 5vw, 4rem);
}
.industry-band__grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .industry-band__grid { grid-template-columns: 1.4fr 1fr; } }
.industry-stat { display: flex; flex-direction: column; }
.industry-stat__num { font-family: var(--font-display); font-size: var(--fs-31); color: var(--link); font-variant-numeric: tabular-nums; }
.industry-stat__label { font-size: var(--fs-12); color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }

/* ---- Testimonials ----------------------------------------------------- */
.testimonials { position: relative; }
.testi-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.testi-track::-webkit-scrollbar { display: none; }
.testi-card { scroll-snap-align: center; padding: var(--space-2); }
.testi-card__inner { max-width: 760px; margin: 0 auto; text-align: center; padding: var(--space-7) var(--space-5); }
.testi-quote { font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, var(--fs-31)); line-height: var(--lh-snug); font-weight: var(--fw-semibold); }
.testi-author { margin-top: var(--space-5); color: var(--text-muted); }
.testi-stars { color: var(--lime-ink); margin-bottom: var(--space-4); }

/* ---- Newsletter band -------------------------------------------------- */
.newsletter-band { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--gr-gradient); color: #04222b; padding: clamp(2rem, 5vw, 4rem); text-align: center; }
.newsletter-band .input-gr { background: rgba(255,255,255,.9); border-color: transparent; color: var(--gr-ink); }
.newsletter-band .btn-gr { background: var(--gr-ink); color: var(--text-inverse); border-color: transparent; }
.newsletter-band .btn-gr:hover { background: #000; }

/* ---- Featured brands (text logo-wall) -------------------------------- */
.brand-wall { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 5vw, 3.5rem); padding: var(--space-6) var(--space-4); }
.brand-wall__item { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(1.1rem, 2.4vw, var(--fs-25)); color: var(--text-muted); letter-spacing: .01em; transition: color var(--dur-base) var(--ease-out); }
.brand-wall__item:hover { color: var(--text-primary); }

/* ---- Category grid on home ------------------------------------------- */
.home-cat-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px)  { .home-cat-grid { grid-template-columns: repeat(4, 1fr); } }
/* Clean icon-led tiles with a faint brand glow that lifts on hover. */
.home-cat-grid .category-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 100% 0%, rgba(27,180,212,.12), transparent 58%);
  opacity: .65; transition: opacity var(--dur-base) var(--ease-out);
}
.home-cat-grid .category-card:hover::before { opacity: 1; }
.home-cat-grid .category-card > * { position: relative; z-index: 1; }

/* ---- Mobile hero: shorter, so the shop starts above the fold ----------
   Measured at 390px before this: the hero was 702px tall and the first content
   section began at 1042px — more than a full phone screen of scrolling before
   a single product or category appeared. A luxury storefront can afford a
   generous hero on a desktop; on a phone it just delays the shop.

   `78vh` is the culprit. It is a reasonable desktop proportion and a poor
   mobile one, because a phone viewport is tall and narrow: 78% of it is far
   more vertical space than the same fraction of a laptop screen. Below 640px
   the hero is sized in absolute terms instead. */
@media (max-width: 639.98px) {
  .hero__viewport { height: clamp(380px, 52vh, 460px); }

  /* The slide's own padding was tuned for the taller box. */
  .hero__slide { padding-block: var(--space-6); }

  .hero__title { font-size: var(--fs-31); line-height: var(--lh-tight); }
  .hero__text {
    font-size: var(--fs-16);
    /* 34ch, not 48: at 390px a 48ch measure is most of the screen width and
       runs to four or five lines, which pushes the button off-screen. */
    max-width: 34ch;
  }
  .hero__actions { margin-top: var(--space-5); }

  /* Full-width tap target. A phone thumb should not have to aim. */
  .hero__actions .btn-gr { width: 100%; justify-content: center; }

  /* Controls sat in the corners of a much taller box; tighten with it. */
  .hero__controls,
  .hero__dots { bottom: var(--space-4); }
  .hero__controls { right: var(--space-4); }
  .hero__dots { left: var(--space-4); }
}

/* Very small phones (360px and under) — one more step down, because at this
   width the title was wrapping to four lines and eating the whole slide. */
@media (max-width: 380px) {
  .hero__viewport { height: clamp(340px, 48vh, 400px); }
  .hero__title { font-size: var(--fs-25); }
}