/*
 * Aprendomates promo banners — shared styles.
 * Self-contained: only depends on files inside this same `banners/` folder
 * (assets/) plus Google Fonts for the body face. No dependency on the
 * aprendomates.com codebase, so this folder can be copied into any other
 * project as-is. See README.md for the full behavioural spec.
 */

@font-face {
  font-family: 'claire_handbold';
  src: url('assets/claire.woff2') format('woff2'),
       url('assets/claire.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.amb {
  --amb-sky: #8fc8d1;
  --amb-sky-deep: #6fb0bb;
  --amb-purple: #98599a;
  --amb-purple-dark: #7a4380;
  --amb-pink: #e74b61;
  --amb-pink-deep: #c8324b;
  --amb-cream: #fffaf1;
  --amb-ink: #33313f;

  container-type: inline-size;
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-inline: auto;
  background: var(--amb-sky);
  font-family: 'Baloo 2', ui-rounded, 'Segoe UI', sans-serif;
  color: var(--amb-ink);
  isolation: isolate;
  line-height: 1.2;
}
.amb, .amb * { box-sizing: border-box; }
.amb img { display: block; max-width: 100%; }

/* ---------------------------------------------------------------------
   Clouds — identical shape/animation recipe to shared/shell.css on
   aprendomates.com: a rounded rectangle plus two round pseudo-element
   "bumps" so it reads as a lumpy cloud, drifting sideways forever.
   Pure CSS, no images, no JS.
--------------------------------------------------------------------- */
.amb-clouds {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.amb-cloud {
  position: absolute;
  background: #fff;
  border-radius: 60px;
  animation-name: amb-cloud-drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.amb-cloud::before, .amb-cloud::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
.amb-cloud::before { width: 55%; height: 130%; top: -55%; left: 6%; }
.amb-cloud::after  { width: 45%; height: 100%; top: -40%; right: 8%; }
@keyframes amb-cloud-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--amb-drift, 60px)); }
}
@media (prefers-reduced-motion: reduce) {
  .amb-cloud { animation: none; }
}

/* ---------------------------------------------------------------------
   Mascot — always a small corner accent, never a full centered figure:
   pinned to a corner and bled off two edges by the banner's own
   overflow:hidden so only the head/torso/one arm peeks in, like it's
   popping into frame. A slow bob keeps it feeling alive without
   competing with the screenshots for attention.
--------------------------------------------------------------------- */
.amb-mascot {
  position: absolute;
  z-index: 1;
  animation: amb-bob 2.6s ease-in-out infinite alternate;
}
@keyframes amb-bob {
  from { transform: translateY(0); }
  to   { transform: translateY(-5%); }
}
@media (prefers-reduced-motion: reduce) {
  .amb-mascot { animation: none; }
}

/* ---------------------------------------------------------------------
   Text — one ink colour only (no white/purple double-outline), a single
   soft drop-shadow for legibility against the sky instead of a stroke.
--------------------------------------------------------------------- */
.amb-headline {
  margin: 0;
  font-family: 'claire_handbold', 'Baloo 2', sans-serif;
  color: #fff;
  text-shadow: 0 2px 0 rgba(51, 40, 60, .28), 0 5px 10px rgba(20, 30, 40, .2);
}
.amb-sub {
  margin: .35em 0 0;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 0 rgba(51, 40, 60, .22);
}

/* ---------------------------------------------------------------------
   Game screenshot tiles — a cream "frame" like a little phone bezel.
--------------------------------------------------------------------- */
.amb-tile {
  position: relative;
  flex: none;
  border-radius: 9%;
  background: var(--amb-cream);
  padding: 2.2%;
  box-shadow: 0 6px 14px -3px rgba(20, 40, 45, .4), 0 2px 4px rgba(20, 40, 45, .22);
}
.amb-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7%;
}
.amb-tile-tag {
  position: absolute;
  left: 50%;
  bottom: -1.6cqw;
  transform: translateX(-50%);
  background: var(--amb-purple-dark);
  color: #fff;
  font-weight: 700;
  font-size: 2.1cqw;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .3em .8em;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 3px 6px rgba(20, 40, 45, .25);
}

/* ---------------------------------------------------------------------
   CTA button — a real, interactive <button>, not a styled div.
--------------------------------------------------------------------- */
.amb-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'claire_handbold', 'Baloo 2', sans-serif;
  background: var(--amb-pink);
  color: #fff;
  text-decoration: none;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 0 var(--amb-pink-deep), 0 10px 16px rgba(20, 40, 45, .3);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  white-space: nowrap;
}
.amb-cta:hover {
  background: #ef5c70;
  transform: translateY(-2px);
  box-shadow: 0 8px 0 var(--amb-pink-deep), 0 14px 18px rgba(20, 40, 45, .32);
}
.amb-cta:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--amb-pink-deep), 0 4px 8px rgba(20, 40, 45, .3);
}
.amb-cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .amb-cta { transition: none; }
}

.amb-logo {
  position: static;
  z-index: 5;
  line-height: 0;
  margin: 0 auto;
}

.amb-body {
  position: relative;
  z-index: 2;
  display: flex;
}

/* =======================================================================
   Horizontal banner — 970×250 reference size.
   Mobile-first: stacked/centered by default; a wide row layout (mascot |
   text | screenshot fan, with the logo and CTA as corner overlays and the
   970:250 aspect locked) takes over once the banner has ≥620px to work
   with, so it degrades gracefully all the way down to phone width.
========================================================================= */
.amb-h { max-width: 970px; }

/* amb-frame, not amb-h, is what @container below switches layout on — a
   container can size its children by its own width, but it can never
   query *itself*, so the element the query changes has to be a child of
   the one carrying container-type. */
.amb-h .amb-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.8cqw;
  padding: 4cqw 5cqw 5cqw;
}
/* The mascot is always a corner accent (see the shared .amb-mascot rule
   above) — never part of this flow, in either layout mode, which is
   what leaves the flow free for the screenshots to be the big thing. */
.amb-h .amb-mascot { left: -4.5cqw; bottom: 0; width: 17cqw; }
.amb-h .amb-logo { width: 12cqw; }
.amb-h .amb-headline { font-size: 5.6cqw; }
.amb-h .amb-sub { font-size: 2.9cqw; max-width: 30em; }
.amb-h .amb-fan { display: flex; justify-content: center; gap: 1.6cqw; }
.amb-h .amb-tile { width: 26cqw; height: 26cqw; }
.amb-h .amb-tile.t1 { transform: rotate(-6deg); }
.amb-h .amb-tile.t2 { transform: rotate(3deg); }
.amb-h .amb-tile.t3 { transform: rotate(-3deg); }
.amb-h .amb-cta { margin-top: 0.2cqw; padding: 2.2cqw 6cqw; font-size: 3.8cqw; }

@container (min-width: 620px) {
  .amb-h .amb-frame { display: block; padding: 0; aspect-ratio: 970 / 250; }
  .amb-h .amb-logo {
    position: absolute; top: 1.24cqw; left: 1.65cqw; width: 6.8cqw; margin: 0;
  }
  .amb-h .amb-text {
    position: absolute; left: 11.5cqw; top: 0; bottom: 0; width: 27cqw;
    display: flex; flex-direction: column; justify-content: center; gap: .5cqw;
  }
  .amb-h .amb-headline { font-size: 3.5cqw; }
  .amb-h .amb-sub { font-size: 1.35cqw; max-width: none; }
  .amb-h .amb-fan {
    display: block;
    position: absolute; left: 41cqw; right: 2.6cqw; top: 0; bottom: 0;
  }
  .amb-h .amb-tile { position: absolute; width: 21cqw; height: 21cqw; }
  .amb-h .amb-tile.t1 { left: 0; top: 4.5cqw; transform: rotate(-7deg); }
  .amb-h .amb-tile.t2 { left: 20cqw; top: 11.5cqw; transform: rotate(3deg); }
  .amb-h .amb-tile.t3 { right: 0; top: 0; transform: rotate(-3deg); }
  .amb-h .amb-cta {
    position: absolute; right: 2.2cqw; bottom: 1.4cqw; margin: 0;
    padding: .9cqw 2cqw 1.1cqw; font-size: 1.45cqw;
  }
}

/* =======================================================================
   Vertical banner — 300×600 reference size (half-page / skyscraper).
   Always a fixed 1:2 aspect ratio, stacked column — this shape is narrow
   at every real embed width, so it only needs fluid cqw scaling, never a
   layout swap.
========================================================================= */
.amb-v { max-width: 300px; aspect-ratio: 300 / 600; }

.amb-v .amb-body {
  position: relative;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  padding: 4cqw 4cqw 3.6cqw;
}
/* Mascot is a small corner accent here too (see the shared .amb-mascot
   rule) — pulled out of the flow so the screenshots get almost all the
   vertical space. */
.amb-v .amb-mascot { top: -1cqw; left: -9cqw; width: 30cqw; }
.amb-v .amb-logo { width: 22cqw; }
.amb-v .amb-headline { margin-top: 1.6cqw; font-size: 6.2cqw; }
.amb-v .amb-sub { margin-top: 0.5cqw; font-size: 3cqw; max-width: 88cqw; }
.amb-v .amb-grid { position: relative; width: 90cqw; height: 90cqw; margin-top: 2.4cqw; }
.amb-v .amb-tile { position: absolute; width: 43cqw; height: 43cqw; }
.amb-v .amb-tile.g1 { left: 0; top: 0; transform: rotate(-4deg); }
.amb-v .amb-tile.g2 { left: 47cqw; top: 0; transform: rotate(3deg); }
.amb-v .amb-tile.g3 { left: 0; top: 47cqw; transform: rotate(3deg); }
.amb-v .amb-tile.g4 { left: 47cqw; top: 47cqw; transform: rotate(-3deg); }
.amb-v .amb-cta { margin-top: 2.8cqw; padding: 2.8cqw 0; width: 58cqw; font-size: 4.2cqw; }

/* =======================================================================
   Strip banner — 970×110 reference size. A dismissible site
   announcement bar, built from the *same* game-world visual language as
   the other two (sky, drifting clouds, the corner-peeking mascot), and
   directly borrowing the vertical banner's own recipe for showing the
   games — all 4, thinly-bordered, each named — just unrolled into one
   row instead of a 2×2 grid.
========================================================================= */
.amb-s { max-width: 970px; }

.amb-s .amb-frame {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1cqw;
  padding: 1.2cqw 1.6cqw 1.2cqw 9.2cqw;
  min-height: 11.3cqw;
}
/* Clouds paint first (negative z-index, inside .amb-frame's own stacking
   context) so every other child - even plain, unpositioned flex items
   like the CTA - reliably paints above them. Without this, a
   position:absolute cloud with z-index:0 was painting OVER the CTA
   button, because a positioned element beats a non-positioned one in
   paint order regardless of DOM position. */
.amb-s .amb-clouds { z-index: -1; }

.amb-s .amb-mascot { left: -2.5cqw; bottom: -1cqw; width: 10.5cqw; }

/* Same thin-frame tile as the other two banners, just resized - and
   given its own fixed (not %) padding, because percentage padding
   resolves against the *flex container's* width, not the tile's own -
   at this tile size that made the "thin" frame balloon into a chunky
   border. A few degrees of fixed rotation for personality (matching
   the vertical grid's tiles), no motion - this row is meant to read
   calmly, like the vertical grid unrolled, not bounce for attention. */
.amb-s .amb-tile { width: 7.6cqw; height: 7.6cqw; flex: none; padding: 0.32cqw; }
.amb-s .amb-tile.g1 { transform: rotate(-4deg); }
.amb-s .amb-tile.g2 { transform: rotate(3deg); }
.amb-s .amb-tile.g3 { transform: rotate(3deg); }
.amb-s .amb-tile.g4 { transform: rotate(-4deg); }
/* The name tag overlays the tile's own bottom edge instead of hanging
   below it (which is how the vertical banner does it) - there isn't
   enough spare height in an 110px-tall bar for a tag hanging below
   four tiles at once without it clipping. */
.amb-s .amb-tile-tag {
  left: 0; right: 0; bottom: 0; top: auto; transform: none;
  border-radius: 0 0 18% 18%;
  font-size: 1cqw;
  padding: .15em 0;
}

.amb-s .amb-copy { flex: 1 1 auto; min-width: 0; }
.amb-s .amb-headline {
  font-size: 2.3cqw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.amb-s .amb-cta { flex: none; padding: .85cqw 2.2cqw; font-size: 1.35cqw; }

.amb-s .amb-close {
  flex: none;
  width: 2.6cqw;
  height: 2.6cqw;
  min-width: 22px;
  min-height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .6);
  color: var(--amb-purple-dark);
  font-size: 1.3cqw;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, transform .15s ease;
}
.amb-s .amb-close:hover { background: #fff; }
.amb-s .amb-close:active { transform: scale(.9); }
.amb-s .amb-close:focus-visible { outline: 2px solid var(--amb-purple-dark); outline-offset: 2px; }

@container (max-width: 559.98px) {
  .amb-s .amb-tile.g3, .amb-s .amb-tile.g4 { display: none; }
  .amb-s .amb-headline { font-size: 4.4cqw; }
  .amb-s .amb-cta { font-size: 2.8cqw; padding: 1.6cqw 3.4cqw; }
  .amb-s .amb-close { font-size: 2.8cqw; }
}