/* How It Works 3D phone (index.html #band "How It Works"). Loaded on the home
   page only. Desktop: the phone is an absolute visual layer that overflows the
   band into the neighbouring Reviews (above) and Sign-Up (below) sections
   without changing their dimensions. Mobile: the phone is in normal flow below
   the CTA and stays fully inside the section. The phone is decorative
   (pointer-events:none) so it never blocks the CTA or neighbouring links. */

/* Positioned, overflow-visible stacking context above the neighbours so the
   phone can visually cross the section edges. The band's own box (and every
   neighbour's box) keeps its existing dimensions. */
.band { position: relative; overflow: visible; z-index: 3; }
.band__inner { position: relative; z-index: 2; }

.hiwphone { pointer-events: none; }
.hiwphone__fallback {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 78%; aspect-ratio: 1.7778 / 1; background: #2a2c31;
  border-radius: 10%; opacity: 1; transition: opacity 240ms ease;
  pointer-events: none;
}
.hiwphone__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.hiwphone__overlay {
  position: absolute; left: 0; top: 0; width: 0; height: 0; margin: 0; padding: 0;
  border: none; overflow: hidden; background: transparent;
  pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity 180ms ease; z-index: 4;
}
.hiwphone__iframe {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  border: none; margin: 0; padding: 0; display: block; pointer-events: auto;
}
.hiwphone__island {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  background: #000; border-radius: 9999px; pointer-events: none;
  z-index: 2; display: none;
}

/* Desktop / tablet-wide: the phone is a large overflow layer on the LEFT,
   vertically centred in the band and taller than it, so it bleeds into the
   neighbouring Reviews (above) + Sign-Up (below) sections. The copy + CTA are
   centre-aligned on the RIGHT (Figma 2251-108). band__inner reserves the left
   zone so the copy block sits clear of the phone. */
@media (min-width: 861px) {
  .band__inner {
    padding-left: clamp(480px, 52%, 780px);   /* reserve the left for the phone */
    flex-direction: column;
    align-items: center;        /* centre the copy + CTA within the right zone */
    justify-content: center;
    text-align: center;         /* copy is centre-aligned (issue 4) */
    gap: clamp(14px, 1.6vw, 24px);
  }
  .band__copy { flex: 0 1 auto; text-align: center; }
  .band__sub { margin: 0 auto; }
  /* Copy + CTA above the decorative phone so text stays readable + clickable. */
  .band__copy, .band__inner > .btn--blue { position: relative; z-index: 2; }
  .hiwphone {
    position: absolute;
    left: clamp(0px, 2.5vw, 48px);
    top: 50%;
    transform: translateY(-50%);   /* centred in the band, overflows equally */
    width: clamp(480px, 50vw, 720px);   /* ~1.5x prior size (issue 3) */
    height: clamp(520px, 44vw, 680px);
    z-index: 1;               /* above the band background, below the copy/CTA */
    overflow: visible;
  }
  /* Desktop title = "More jobs." in Permanent Marker (via the shared .marker
     class) + "Less hassle." regular, both white (Figma 2251-108), on two lines
     like mobile (owner, AFMBP-2266). The .marker class supplies the font,
     uppercase + letter-spacing. */
  .band__title { font-size: clamp(24px, 2.4vw, 34px); }
  .band__title .band__title__hl { display: block; }
}

/* Mobile: phone on TOP, then copy, then CTA (Figma 2613-2612); contained. */
@media (max-width: 860px) {
  .band__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
  }
  .band__sub { margin: 0 auto; }
  .hiwphone {
    position: relative;
    order: -1;                 /* phone above the copy + CTA */
    width: min(92vw, 440px);
    height: min(64vw, 300px);
    margin: 0 auto clamp(18px, 5vw, 30px);
    overflow: visible;
    z-index: 1;
  }
  /* Mobile title = "More jobs." in Permanent Marker (via .marker) + "Less
     hassle." regular, both white, larger + two lines (Figma 2613-2612). */
  .band__title { font-size: clamp(26px, 6.5vw, 40px); }
  .band__title .band__title__hl {
    display: block;            /* "More jobs." on its own line (Figma 2613-2612) */
    font-size: clamp(34px, 9vw, 52px);
    line-height: 0.95;
    margin: 0 0 0.08em;
  }
}

/* "How It Works" band copy typography (Figma 2251-108 / 2613-2612): the highlight
   phrase is WHITE (marker on mobile, regular on desktop — see media queries); the
   sub is semi-transparent white. Scoped to the home page (this file only). */
.band__title {
  color: #fff;
  font-weight: 400;
  line-height: 1.15;
}
.band__title .band__title__hl { color: #fff; }
.band__sub { color: rgba(255, 255, 255, 0.5); }