/* THEO app-download popup — layout only.

   The phone and the MA1 are baked into the background image, so this popup is
   a FIXED-ASPECT CANVAS: a 1:1 square whose children sit at the same % offsets
   as the Figma frame (2406:2660, "layout popup"). That is why positions are
   percentages and type is sized in cqw — everything must scale together with
   the artwork or the QR cards drift off their painted panels.

   Type SIZE and COLOUR live on the Bricks elements (colour via global classes),
   not here — same rule as theo-app-landing-1.css. This file owns geometry. */

/* Bricks' popup content container defaults to a white padded box, which framed
   the artwork. Matched via :has() rather than the popup ID so the rule survives
   the template being rebuilt with a new ID. */
.brx-popup .brx-popup-content:has(> .tal-pop) {
  background-color: transparent; border: 0; padding: 0; width: auto; max-width: none;
}

.tal-pop {
  container-type: inline-size;          /* makes cqw resolve against the popup, not the viewport */
  position: relative;
  width: min(92vw, 88vh, 860px);
  aspect-ratio: 1 / 1;
  background: #000 center / cover no-repeat;
  overflow: hidden;
}

.tal-pop > * { position: absolute; }

.tal-pop-logo {
  left: 4.26%; top: 5.28%; width: 24.9%; height: 4.4%;
  background: url(../img/theo-logo-white.svg) no-repeat left center / contain;
}

/* close: square with a green rule, an X drawn from two lines */
.tal-pop-close {
  left: 92.2%; top: 4.35%; width: 4.44%; height: 4.44%;
  padding: 0; background: none; cursor: pointer;
  border: 0.42cqw solid var(--theo-green);
  display: grid; place-items: center;
}
.tal-pop-close::before,
.tal-pop-close::after {
  content: ""; position: absolute; width: 55%; height: 0.42cqw;
  background: var(--theo-white);
}
.tal-pop-close::before { transform: rotate(45deg); }
.tal-pop-close::after  { transform: rotate(-45deg); }
.tal-pop-close:focus-visible { outline: var(--border-emph) solid var(--theo-green); outline-offset: 4px; }

.tal-pop-head { left: 8%; right: 8%; top: 15%; width: 84%; text-align: center; margin: 0; }
.tal-pop-head em { font-style: normal; color: var(--theo-green); }
.tal-pop-sub  { left: 8%; right: 8%; top: 26.5%; width: 84%; text-align: center; }

.tal-pop-qr     { top: 39.91%; width: 26.94%; }
.tal-pop-qr--a  { left: 3.70%; }
.tal-pop-qr--b  { left: 70.56%; }
.tal-pop-badge    { top: 67.5%; width: 26.2%; }
.tal-pop-badge--a { left: 4.07%; }
.tal-pop-badge--b { left: 70.93%; }
.tal-pop-qr img, .tal-pop-badge img { display: block; width: 100%; height: auto; }
.tal-pop-qr:focus-visible, .tal-pop-badge:focus-visible {
  outline: var(--border-emph) solid var(--theo-green); outline-offset: 4px;
}

/* Mobile: a QR code is useless on the device you are holding — drop the codes,
   stack the two store badges, and let the artwork breathe. */
@media (max-width: 767px) {   /* == Bricks 'mobile_landscape' */
  /* Taller canvas: the two stacked badges need ~28% of the height between them,
     and at 3/4 they collided. The cqw type steps up because the container is
     now narrow — proportional scaling, not a design-token change. */
  .tal-pop { width: 94vw; aspect-ratio: 9 / 16; background-position: 50% 45%; }
  .tal-pop-logo { width: 34%; height: 3.4%; top: 3.4%; }
  .tal-pop-close { width: 7.5%; height: 4.2%; left: 88.5%; top: 3%; border-width: 0.7cqw; }
  .tal-pop-close::before, .tal-pop-close::after { height: 0.7cqw; }
  /* type sizes for this breakpoint live on the elements in Bricks
     (_typography:mobile_landscape) — element IDs outrank these classes */
  .tal-pop-head { top: 10%; }
  .tal-pop-sub  { top: 20.5%; }
  .tal-pop-qr { display: none; }   /* you cannot scan a code with the phone showing it */
  .tal-pop-badge { left: 14%; width: 72%; }
  .tal-pop-badge--a { top: 62%; }
  .tal-pop-badge--b { top: 78%; }
}