/* ═══════════════════════════════════════════════════════════
   PATHURA — components/hero.css
   Moved verbatim from base.css during Phase 6 CSS split.
   No selectors, values, or comments changed.
═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────
   7. HERO
─────────────────────────────────────────────────────────── */
/* ─── HERO SECTION LAYOUT ───────────────────────── */
.hero-shell {
  background: var(--bg);
  padding: 1.25rem 0;
}

.hero-container {
  max-width: var(--max-width-page);
  width: 92%;
  margin: 0 auto;

  /* min-height (not a fixed height) — content stays centered inside
     an approx. 380–420px box by default; the box only grows if
     content ever genuinely needs more room. */
  min-height: clamp(380px, 40vh, 420px);
  padding: 28px 40px;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);

  position: relative;
  overflow: hidden;
}

/* ─── THEME BACKGROUND LAYER ─────────────────────
   Painted first, behind everything. Driven entirely by tokens
   so the Admin Panel can later set color / gradient / image
   without touching markup or layout. */
.hero-theme-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-color: var(--hero-theme-bg-color);
}

.hero-theme-bg::before {
  /* Gradient + Image (stacked so either or both can be set) */
  content: "";
  position: absolute;
  inset: 0;

  background-image: var(--hero-theme-bg-gradient), var(--hero-theme-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-theme-bg::after {
  /* Pattern (tile, independent of gradient/image) */
  content: "";
  position: absolute;
  inset: 0;

  background-image: var(--hero-theme-pattern-image);
  background-size: var(--hero-theme-pattern-size);
  background-repeat: repeat;
  opacity: var(--hero-theme-pattern-opacity);
}

/* ─── THEME LAYER (Version 2) ─────────────────────
   Optional seasonal/campaign theme pack. Sits above the base
   Hero background, below the Hero content. Fully independent
   of .hero-theme-bg — this is what the Admin Panel toggles
   per campaign (e.g. "Eid Theme", "Winter Sale"). Each sub-
   layer is optional and renders nothing unless an asset token
   is set; the whole layer is also gated by [data-theme-status]
   so a disabled theme never appears even if assets are set. */
.hero-theme-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-theme-layer[data-theme-status="disabled"] {
  display: none;
}

.hero-theme-asset {
  position: absolute;
  inset: 0;

  background-image: var(--hero-themepack-asset-image);
  background-size: var(--hero-themepack-asset-size);
  background-position: var(--hero-themepack-asset-position);
  background-repeat: no-repeat;
}

.hero-theme-pattern {
  position: absolute;
  inset: 0;

  background-image: var(--hero-themepack-pattern-image);
  background-size: var(--hero-themepack-pattern-size);
  background-repeat: repeat;
  opacity: var(--hero-themepack-pattern-opacity);
}

.hero-theme-decoration {
  position: absolute;
  inset: 0;

  background-image: var(--hero-themepack-decoration-image);
  background-size: var(--hero-themepack-decoration-size);
  background-position: var(--hero-themepack-decoration-position);
  background-repeat: no-repeat;
}

/* Reserved for Version 3 (particles / snow / festival motion).
   Intentionally unstyled beyond positioning — no visuals yet. */
.hero-theme-effects {
  position: absolute;
  inset: 0;
}

/* ─── THEME: "default-premium" ────────────────────
   Version 3 — the first shipped theme. Subtle luxury feel via
   soft glow + faint geometric pattern + edge-only abstract
   shapes. Every asset is just a token override, so the Admin
   Panel can swap any one of them (or the whole theme) later
   without touching this structure.

   Placement: glow + decoration are anchored to the four
   corners only (short falloff radius) so the 32% text column
   and the banner never sit under visible decoration — the
   center of the Hero stays clean. */
.hero-theme-layer[data-theme-name="default-premium"] {

  /* Background Asset — gentle gradient glow, corners only */
  --hero-themepack-asset-image:
    radial-gradient(420px circle at 4% 8%,
      color-mix(in srgb, var(--primary) 9%, transparent), transparent 70%),
    radial-gradient(460px circle at 97% 100%,
      color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
  --hero-themepack-asset-size: 100% 100%;
  --hero-themepack-asset-position: center;

  /* Pattern — very light geometric dot-grid */
  --hero-themepack-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='2' cy='2' r='1.2' fill='%23111111'/%3E%3C/svg%3E");
  --hero-themepack-pattern-size: 32px;
  --hero-themepack-pattern-opacity: .045;

  /* Decoration — soft abstract shapes, edges only, transparent center */
  --hero-themepack-decoration-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Ccircle cx='2' cy='0' r='16' fill='%23EC5D10' opacity='0.05'/%3E%3Ccircle cx='100' cy='4' r='10' fill='%23D9B67A' opacity='0.05'/%3E%3Ccircle cx='0' cy='100' r='12' fill='%23D9B67A' opacity='0.05'/%3E%3Ccircle cx='99' cy='98' r='18' fill='%23EC5D10' opacity='0.05'/%3E%3C/svg%3E");
  --hero-themepack-decoration-size: 100% 100%;
  --hero-themepack-decoration-position: center;

  /* Very subtle background transition on enable/switch only —
     no loop, no motion, no particles */
  transition: opacity .6s var(--ease);
}

@media (max-width: 900px) {
  .hero-theme-layer[data-theme-name="default-premium"] {
    --hero-themepack-pattern-size: 26px;
    --hero-themepack-pattern-opacity: .035;
  }
}

@media (max-width: 600px) {
  .hero-theme-layer[data-theme-name="default-premium"] {
    --hero-themepack-asset-image:
      radial-gradient(280px circle at 4% 6%,
        color-mix(in srgb, var(--primary) 8%, transparent), transparent 70%),
      radial-gradient(300px circle at 97% 100%,
        color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%);
    --hero-themepack-pattern-opacity: .03;
  }
}

/* ─── HERO CONTENT LAYER ──────────────────────────
   Everything that used to be direct children of
   .hero-container now lives here, unchanged. This element
   simply carries the flex layout .hero-container used to own. */
.hero-content-layer {
  position: relative;
  z-index: 2;

  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  gap: 3rem;
}

/* ─── OPTIONAL OVERLAY ────────────────────────────
   Topmost layer — a global tint/vignette that can sit over
   the entire Hero, including content, without altering layout.
   Off by default (opacity 0) so the Hero renders unchanged. */
.hero-theme-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;

  background-color: var(--hero-theme-overlay-color);
  opacity: var(--hero-theme-overlay-opacity);
}

.hero-left {
  flex: 0 0 32%;
  max-width: 32%;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-right {
  flex: 0 0 68%;
  max-width: 68%;

  display: flex;
  align-items: center;
}

/* Hero Swiper — fills the right column, inherits Hero's rounded corners */
.hero-swiper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;

  background: var(--surface-2);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.hero-swiper .swiper-wrapper,
.hero-swiper .swiper-slide {
  height: 100%;
}

.hero-slide {
  width: 100%;
  height: 100%;
}

/* ─── Hero Banner (reusable component) ────────────────
   Pure image-driven marketing banner. All copy, CTA and
   offer graphics live inside the banner image itself —
   this component only provides the clickable frame, the
   responsive art-directed <picture>, and loading/hover
   polish. Every slide shares this exact markup/CSS; only
   the data-field values (image src, alt, href, etc.) will
   differ once wired up to the Admin Panel / API. */
.hero-banner-link {
  display: block;
  width: 100%;
  height: 100%;

  border-radius: var(--r-lg);
  overflow: hidden;

  background: var(--hero-banner-skeleton-bg);
}

.hero-banner-link picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-banner-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-lg);
  transition: transform var(--transition-slow) var(--ease);
}

.hero-banner-link:hover .hero-banner-img {
  transform: scale(var(--hero-banner-hover-scale));
}

/* ─── Navigation Arrows ───────────────────────────── */
.hero-swiper-prev,
.hero-swiper-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;

  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.65);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(4px);

  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  transition: color var(--transition-base) var(--ease),
              background var(--transition-base) var(--ease),
              box-shadow var(--transition-base) var(--ease);
}

.hero-swiper-prev { left: 14px; }
.hero-swiper-next { right: 14px; }

.hero-swiper-prev:hover,
.hero-swiper-next:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary);
  box-shadow: var(--shadow-lg);
}

.hero-swiper-prev.swiper-button-disabled,
.hero-swiper-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}

/* ─── Pagination Bullets ──────────────────────────── */
.hero-swiper-pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.hero-swiper-pagination .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-sm);
  opacity: 1;
  margin: 0;
  transition: width var(--transition-base) var(--ease),
              background var(--transition-base) var(--ease);
}

.hero-swiper-pagination .swiper-pagination-bullet-active {
  width: 18px;
  background: var(--primary);
}

@media (max-width: 1024px) and (min-width: 601px) {
  .hero-swiper-prev,
  .hero-swiper-next {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  .hero-swiper-prev,
  .hero-swiper-next {
    width: 26px;
    height: 26px;
    font-size: 14px;
  }

  .hero-swiper-prev { left: 8px; }
  .hero-swiper-next { right: 8px; }

  .hero-swiper-pagination { bottom: 8px; }

  .hero-swiper-pagination .swiper-pagination-bullet {
    width: 5px;
    height: 5px;
  }

  .hero-swiper-pagination .swiper-pagination-bullet-active {
    width: 14px;
  }
}

/* Badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;

  padding: 4px 12px;
  margin-bottom: 0.7rem;

  background: var(--hero-badge-bg);
  border: 1px solid var(--hero-badge-border);
  border-radius: var(--r-pill);

  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--hero-badge-text);
}

/* Heading */
.hero-heading {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.5vw, 1.8rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.3px;
  color: var(--hero-heading-color);
  margin-bottom: 0.5rem;
  overflow-wrap: break-word;
}
.hero-heading-accent { color: var(--primary); }

/* Description */
.hero-desc {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--hero-desc-color);
  max-width: 32ch;
  margin-bottom: 1rem;
}

/* CTA Buttons */
.hero-cta-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 1.1rem;
}

.hero-btn {
  border-radius: var(--btn-radius);
  padding: 10px 21px;
  font-family: var(--btn-font);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: var(--btn-transition), box-shadow 0.25s ease;
}

.hero-btn-primary {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: var(--surface);
  box-shadow: var(--hero-btn-primary-shadow);
}
.hero-btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 36%, transparent);
  transform: translateY(-2px);
}

.hero-btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.hero-btn-secondary:hover {
  border-color: var(--secondary);
  color: var(--secondary);
  transform: translateY(-2px);
}

/* Trust Badges */
.hero-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  list-style: none;
  padding-top: 0.8rem;
  border-top: 1px solid var(--hero-divider);
}

.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 6px;

  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--hero-trust-text);
}
.hero-trust-item i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--hero-trust-icon-bg);
  font-size: 12px;
  color: var(--primary);
}

@media (max-width: 1024px) and (min-width: 601px) {
  .hero-container {
    width: 92%;
    padding: 2.5rem;
  }

  .hero-left {
    flex: 0 0 40%;
    max-width: 40%;
  }

  .hero-right {
    flex: 0 0 60%;
    max-width: 60%;
  }

  .hero-swiper { min-height: 250px; }
}

@media (max-width: 600px) {
  .hero-shell { padding: .75rem 0; }
  .hero-container {
    min-height: auto;
    width: calc(100% - 2 * var(--space-page-x-mobile));
    padding: 1.25rem var(--space-page-x-mobile);
    border-radius: 14px;
  }

  /* .hero-content-layer is the real flex parent — stack it on mobile
     (the old rule targeted .hero-container, which is display:block). */
  .hero-content-layer {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }

  .hero-left,
  .hero-right {
    flex: 1 1 auto;
    max-width: 100%;
  }

  .hero-heading { font-size: 1.4rem; }
  .hero-desc { max-width: none; font-size: 13.5px; }
  .hero-cta-group { gap: 8px; }
  .hero-btn { flex: 1 1 45%; padding: 12px 16px; text-align: center; min-height: 44px; }
  .hero-swiper { min-height: 190px; }
}