/*
 * Public landing hero themes.
 *
 * Only rendered when a PUBLIC_LANDING_HERO campaign has a PromoHeroTheme.
 * The unthemed hero keeps using the original .home-hero rules in brand.css.
 * Every color comes from --hero-* custom properties that the template sets from
 * values validated as strict hex; nothing here is operator-supplied CSS.
 *
 * Layout breakpoints are container queries on the hero itself, so the OPS
 * Promotions Manager preview (a narrow panel) shows the stacked layout the same
 * way a phone does.
 */

.landing-hero {
  --hero-primary: #2F4738;
  --hero-accent: #8C2E6E;
  --hero-bg-start: #F8F9F8;
  --hero-bg-end: #EAEAEA;
  --hero-text: #1E1E1E;
  container-type: inline-size;
  container-name: landing-hero;
}

.landing-hero--themed {
  /* Re-point the shared button tokens so the CTAs follow the campaign palette. */
  --hmc-brand-accent: var(--hero-primary);
  --hmc-brand-accent-hover: color-mix(in srgb, var(--hero-primary) 82%, #000000);
  --hmc-brand-accent-active: color-mix(in srgb, var(--hero-primary) 72%, #000000);
  --primary-color: var(--hero-primary);
  --accent-color: var(--hero-accent);
  color: var(--hero-text);
  background: linear-gradient(135deg, var(--hero-bg-start) 0%, var(--hero-bg-end) 100%);
  border-color: rgba(0, 0, 0, 0.06);
}

.landing-hero--themed::after {
  z-index: 1;
  background: radial-gradient(circle at 15% 15%, rgba(140, 46, 110, 0.12), transparent 55%);
  background: radial-gradient(
    circle at 15% 15%,
    color-mix(in srgb, var(--hero-accent) 14%, transparent),
    transparent 55%
  );
}

.landing-hero--themed .landing-hero__headline {
  color: var(--hero-primary);
  overflow-wrap: anywhere;
}

.landing-hero--themed .landing-hero__subtitle {
  color: var(--hero-text);
  opacity: 0.82;
}

.landing-hero--themed .hero-tag {
  color: var(--hero-primary);
  border-color: color-mix(in srgb, var(--hero-accent) 45%, transparent);
  background: color-mix(in srgb, var(--hero-accent) 10%, #ffffff);
}

.landing-hero--themed .hero-dot {
  background: var(--hero-accent);
}

.landing-hero--themed .kpi-card dd {
  color: var(--hero-primary);
}

.landing-hero__content {
  position: relative;
  z-index: 3;
}

.landing-hero__arabic {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0;
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
  font-weight: 700;
  line-height: 1.6;
  color: var(--hero-primary);
}

.landing-hero__arabic [lang="ar"] {
  padding-block-end: 0.15rem;
  border-block-end: 2px solid var(--hero-accent);
}

.landing-hero__accent-inline {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--hero-accent);
}

/* ------------------------------------------------------------ patterns */

.landing-hero--pattern-geometric::before,
.landing-hero--pattern-islamic::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.07;
  background:
    repeating-linear-gradient(45deg, var(--hero-accent) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(-45deg, var(--hero-accent) 0 1px, transparent 1px 28px);
}

@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  .landing-hero--pattern-islamic::before {
    opacity: 0.09;
    background: var(--hero-accent);
    /* Eight-point star lattice, tinted by --hero-accent through the mask. */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Crect x='18' y='18' width='28' height='28'/%3E%3Crect x='18' y='18' width='28' height='28' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='5'/%3E%3Cpath d='M0 0L12 12M64 0L52 12M0 64L12 52M64 64L52 52'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Crect x='18' y='18' width='28' height='28'/%3E%3Crect x='18' y='18' width='28' height='28' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='5'/%3E%3Cpath d='M0 0L12 12M64 0L52 12M0 64L12 52M64 64L52 52'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-size: 64px 64px;
    mask-size: 64px 64px;
  }
}

/* The default layout keeps its media card; the pattern sits behind it. */
.landing-hero--default > .grid {
  position: relative;
  z-index: 2;
}

/* ------------------------------------------- soft overlap + full visual */
/* Narrow widths first: text leads, artwork follows below it, no overlap. */

.landing-hero--soft_overlap,
.landing-hero--full_visual {
  padding: 0;
}

.landing-hero__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: clamp(1.5rem, 4vw, 3.25rem);
}

.landing-hero__inner {
  position: relative;
  z-index: 3;
  order: 1;
  min-width: 0;
}

.landing-hero__accent {
  position: relative;
  z-index: 2;
  order: 2;
  margin: 0;
  font-size: clamp(3.5rem, 18cqi, 6rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--hero-accent);
  opacity: 0.9;
}

.landing-hero__art {
  position: relative;
  z-index: 1;
  order: 3;
  min-width: 0;
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 16 / 10;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%);
}

.landing-hero__art picture,
.landing-hero__img {
  display: block;
  width: 100%;
  height: 100%;
}

.landing-hero__img {
  object-fit: cover;
  object-position: center;
}

.landing-hero__kpis .kpi-card {
  background: rgba(255, 255, 255, 0.92);
}

/* Wide containers: artwork becomes a trailing layer that fades into the text. */
@container landing-hero (min-width: 900px) {
  .landing-hero__stage {
    display: block;
    min-height: clamp(30rem, 42cqi, 38rem);
  }

  .landing-hero__inner {
    display: flex;
    align-items: center;
    min-height: inherit;
  }

  /* Physical right in LTR and RTL: campaign artwork is composed right-aligned. */
  .landing-hero__art {
    position: absolute;
    inset-block: 0;
    right: 0;
    left: auto;
    width: 60%;
    aspect-ratio: auto;
    border-radius: 0;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(0, 0, 0, 0.18) 18%,
      rgba(0, 0, 0, 0.7) 38%,
      #000 58%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(0, 0, 0, 0.18) 18%,
      rgba(0, 0, 0, 0.7) 38%,
      #000 58%
    );
  }

  /* Campaign artwork keeps its key content (logos, branding) on the right, so
     crop from the left. Physical "right" on purpose: RTL must not flip it. */
  .landing-hero--soft_overlap .landing-hero__img {
    object-position: right center;
  }

  .landing-hero--soft_overlap .landing-hero__content {
    max-width: min(46%, 36rem);
  }

  [dir="rtl"] .landing-hero--soft_overlap .landing-hero__inner {
    justify-content: flex-end;
  }

  [dir="rtl"] .landing-hero--soft_overlap .landing-hero__accent {
    right: auto;
    left: 44%;
  }

  .landing-hero__accent {
    position: absolute;
    top: 50%;
    inset-inline-start: 44%;
    transform: translateY(-50%);
    font-size: clamp(7rem, 16cqi, 13rem);
    opacity: 0.2;
    pointer-events: none;
  }

  /* Full visual: artwork fills the hero, text sits on a readable panel. */
  .landing-hero--full_visual .landing-hero__art {
    width: 100%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .landing-hero--full_visual .landing-hero__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      var(--hero-bg-start) 0%,
      color-mix(in srgb, var(--hero-bg-start) 78%, transparent) 38%,
      transparent 68%
    );
  }

  [dir="rtl"] .landing-hero--full_visual .landing-hero__art::after {
    background: linear-gradient(
      to left,
      var(--hero-bg-start) 0%,
      color-mix(in srgb, var(--hero-bg-start) 78%, transparent) 38%,
      transparent 68%
    );
  }

  .landing-hero--full_visual .landing-hero__content {
    max-width: min(50%, 38rem);
  }
}

/* No mask support: a gradient overlay softens the artwork's leading edge instead. */
@supports not ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
  .landing-hero--soft_overlap .landing-hero__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--hero-bg-start) 0%, transparent 25%);
  }

  @container landing-hero (min-width: 900px) {
    .landing-hero--soft_overlap .landing-hero__art::after {
      background: linear-gradient(to right, var(--hero-bg-start) 0%, transparent 55%);
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .landing-hero__img {
    transition: transform 0.6s ease;
  }
}