/* ==========================================================================
   Contact CTA band — photo + "call us" copy above the footer, on every page.
   ========================================================================== */

/* --- Contact CTA band ------------------------------------------------------
   Not a real newsletter signup — this site has no backend to process email
   subscriptions, so a fake "Subscribe" button would be as dishonest as a
   fake price or a "Shop Now" with no checkout. It's a real tel: link instead. */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--color-accent); color: var(--color-text);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; /* flush with .site-foot below */
  --focus-ring-color: var(--color-accent-2-900); /* a gold ring would vanish on this gold band */
}
.cta-band::before, .cta-band::after {
  content: ''; position: absolute; z-index: 0;
  width: 20vw; max-width: 220px; aspect-ratio: 1;
  background: color-mix(in srgb, var(--color-accent-2-900) 16%, transparent);
  -webkit-mask-image: var(--shape-mark); mask-image: var(--shape-mark);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.cta-band::before { inset-inline-start: -8%; top: -20%; }
.cta-band::after { inset-inline-end: -8%; bottom: -22%; transform: rotate(180deg); }
/* Image and copy as one balanced, gapped pair centered in the band — rather
   than two separate full-bleed grid columns each centering independently
   (which left the pair looking lopsided against the colored band). */
.cta-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: clamp(32px, 6vw, 72px);
  padding: var(--space-8) var(--space-6);
}
/* min-height as a floor, not a fixed height — align-self: stretch still lets
   it grow to match a taller copy column; this only stops it collapsing to an
   odd, thin strip when the copy is short (e.g. the English translation runs
   shorter than the Arabic default). */
.cta-figure {
  position: relative; z-index: 1; margin: 0;
  flex: 1 1 380px; align-self: stretch; min-height: 320px;
}
.cta-ph {
  position: absolute;
  inset: var(--space-6);
  margin: auto;
  aspect-ratio: 1024 / 1535;
  max-width: 100%;
  max-height: 100%;
  border-radius: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cta-copy {
  /* Widened from 34ch — the heading below is a single line now (its own
     <br> was dropped from the heading text) and needed the extra room. */
  max-width: 46ch;
  flex: 1 1 380px;
  /* Small nudge toward the photo column — inset-inline-end (not a
     transform) keeps the direction correct under both [dir=rtl] and
     [dir=ltr]. */
  position: relative;
  inset-inline-end: 200px;
}
.cta-copy .kicker { color: color-mix(in srgb, var(--color-text) 85%, transparent); } /* 70% on amber was 3.6:1 */
/* Trimmed from clamp(26px,3vw,38px) and pinned to one line: at the old max
   size the full sentence needed more width than this column comfortably
   has to give without crowding the photo beside it. */
.cta-copy h2 { font-size: clamp(22px, 2.6vw, 32px); white-space: nowrap; }
.cta-contact {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin-top: var(--space-6);
}
/* Now a real tel: link (see index.html), not just a static badge sitting next
   to the actual "Call Now" button — no reason the number itself, the more
   natural tap target on a phone, shouldn't also dial. */
.cta-phone {
  display: inline-flex; align-items: center; padding: var(--space-3) var(--space-6);
  background: var(--color-bg); border-radius: 999px; font-size: 15px; font-weight: 600;
  color: var(--color-text); text-decoration: none;
  unicode-bidi: isolate;
  transition: background-color 0.2s ease;
}
.cta-phone:hover { background: var(--color-neutral-100); }
.cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-3) var(--space-6); border-radius: 999px;
  background: var(--color-accent-2-900); color: var(--color-neutral-100);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  text-decoration: none; transition: background 0.2s ease;
}
.cta-btn:hover { background: var(--color-accent-2-800); }

/* Desktop only: the photo drops by the band's own top/bottom padding, so its
   cropped lower edge lands on the band's lower edge (the band clips it)
   instead of floating with a gap underneath. */
@media (min-width: 1021px) {
  .cta-ph { transform: translateY(var(--space-8)); }
}

@media (max-width: 1020px) {
  .cta-inner { flex-direction: column; }
  .cta-figure { min-height: 220px; width: 100%; }
  /* Stacked layout has no photo column beside the copy to nudge toward. */
  .cta-copy { inset-inline-end: 0; }
  /* h2's own nowrap below was forcing the card wider than the viewport at
     this width — white-space reset to normal lets it wrap onto 2 lines. */
  .cta-copy { max-width: 90%; }
  .cta-copy h2 { white-space: normal; }
}

@media (max-width: 720px) {
  /* Dedicated mobile crop (assets/cta/customer-service-mobile.png — same 1024x1535 portrait
     ratio as the desktop photo, just a tighter chest-up framing instead of
     full body) swapped in over the inline background-image, same
     !important-over-inline-style technique as the hero banners, and same
     ../assets path reasoning (url() in a stylesheet resolves relative to
     the stylesheet itself, not the page). The ≤1020px rule above gives
     .cta-figure a flat 220px min-height, sized for whatever generic photo
     was there originally — with the real portrait photo now filling it,
     that floor is far shorter than the aspect-ratio actually needs, so the
     photo was rendering as a narrow sliver capped by that height instead
     of using the column's full width. Sizing the figure directly off the
     photo's own aspect-ratio instead lets it use the full width and grow
     exactly as tall as that width calls for.
     :not([data-bg]) waits for js/components/lazy-photos.js to reach the
     photo, same as the desktop image — unscoped, this !important rule would
     download the mobile photo on first load no matter where the band sits. */
  .cta-ph:not([data-bg]) { background-image: url('../../assets/cta/customer-service-mobile.png') !important; }
  /* flex-basis:380px in the inherited flex shorthand still drives the
     figure's height (the main axis once .cta-inner is column-direction)
     even with aspect-ratio set, so the height stayed pinned at 380px
     regardless of the actual photo ratio until flex-basis is freed to
     auto here too. */
  .cta-figure { flex: 0 1 auto; min-height: 0; aspect-ratio: 1024 / 1535; max-width: 170px; margin-inline: auto; }
  /* Same flex-basis:380px problem as .cta-figure above, just on the copy
     side: its actual content (kicker + heading + 2 buttons) is nowhere
     near 380px tall once stacked in a single mobile column, so the
     leftover flex-basis space was sitting empty below the buttons instead
     of the band ending where the content actually does. */
  .cta-copy { flex: 0 1 auto; }
  .cta-inner { padding: var(--space-4); gap: var(--space-3); }
  /* Full type/button resize pass for the CTA band, mobile only, by
     request — the desktop heading/button sizing (tuned for sitting beside
     a wide photo column) reads oversized now that everything's stacked in
     a narrow phone column. Shrunk twice more since — image and whole
     container both, by follow-up requests for even smaller still. */
  .cta-copy h2 { font-size: clamp(15px, 4vw, 18px); }
  /* Kicker text sits at the RTL/LTR start edge by default (.kicker has no
     text-align of its own) — reads fine beside the photo on desktop, but
     stacked full-width on mobile it visibly hugs one side instead of
     sitting over the centered heading below it. Centered here only; h2/
     .cta-contact keep their own existing mobile alignment untouched. */
  .cta-copy .kicker { text-align: center; }
  .cta-contact { gap: var(--space-2); margin-top: var(--space-2); }
  .cta-phone, .cta-btn { padding: 7px 14px; font-size: 11px; }
}