/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Dilemma';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://superspeciosa.com/cdn/shop/files/Dilemma-SansBold.otf?v=1718382000) format('opentype');
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Dilemma', Arial, Helvetica, sans-serif;
  background-color: #f6f0df;          /* matches banner background */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
  display: flex;                      /* lets the hero stretch to fill 100vh */
  flex-direction: column;
}

/* ---------- Stage ---------- */
.hero-wrap {
  display: block;
  position: relative;
  flex: 1 0 auto;                     /* fills all space between top and footer */
  width: 100%;
  overflow: hidden;
  /* Desktop: extra space below the image continues the 5 colour bars */
  background: linear-gradient(to right,
    #7a68d9 0 20%, #61c9a3 20% 40%, #5aaed8 40% 60%, #ee7d83 60% 80%, #e6a16f 80% 100%);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hero-stage {
  position: relative;
  width: 100%;
}

.hero-media,
.hero-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Focus / press feedback (whole banner is the link) ---------- */
.hero-wrap:focus-visible {
  outline: 3px solid #8ab83f;
  outline-offset: -3px;
}

.hero-wrap:active { opacity: 0.95; }

/* ---------- Footer ---------- */
footer {
  background-color: #8ab83f;
  padding: 6px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
}

.footer-links {
  display: flex;
  justify-content: center;
}

footer .footer-links a {
  font-family: 'Dilemma', Arial, Helvetica, sans-serif;
  color: #000;
  font-size: 18px;
  text-decoration: none;
  padding: 8px 12px;                  /* bigger tap target on mobile */
}

footer .footer-links a:hover,
footer .footer-links a:focus-visible {
  text-decoration: underline;
}

/* ---------- Mobile-only slices (hidden on desktop) ---------- */
.m-top, .m-bars { display: none; }

/* ---------- Mobile ---------- */
@media screen and (max-width: 768px) {

  /* The page is exactly one screen tall: banner on top, footer at the bottom.
     The mobile banner is split in two:
       - top part (offer bar, photo, text) keeps its natural ratio
       - the 5 coloured bars share the remaining height: they grow on tall
         phones and shrink a little on short ones (min 9vw each), so there
         is never a gap and nothing is cropped on the sides. */
  html, body { height: 100%; }

  body {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    background-color: #e6a16f;         /* safety: never a cream gap */
  }

  main { min-height: 0; flex: 1 1 auto; }

  .hero-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    background: #e6a16f;
  }

  .hero-stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .hero-media { display: none; }       /* replaced by the slices below */

  .m-top,
  .m-bars { display: block; }

  .m-top {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 700 / 798;           /* offer bar + photo, down to the first bar */
    background: url(../images/hero-mobile.png) top center / 100% auto no-repeat;
  }

  .m-bars {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .m-bar {
    flex: 1 1 0;
    min-height: 9vw;
    display: flex;
    align-items: center;               /* label stays centred when the bar grows/shrinks */
    overflow: hidden;
  }

  .m-bar i {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 700 / 80;            /* one bar, natural size */
    background: url(../images/hero-mobile.png) 0 0 / 100% auto no-repeat;
  }

  /* each bar = a slice of the image (y offset / (1200 - 80)) */
  .m-bar:nth-child(1) { background: #7a68d9; }
  .m-bar:nth-child(2) { background: #61c9a3; }
  .m-bar:nth-child(3) { background: #5aaed8; }
  .m-bar:nth-child(4) { background: #ee7d83; }
  .m-bar:nth-child(5) { background: #e6a16f; }

  .m-bar:nth-child(1) i { background-position: 0 71.25%; }
  .m-bar:nth-child(2) i { background-position: 0 78.39%; }
  .m-bar:nth-child(3) i { background-position: 0 85.63%; }
  .m-bar:nth-child(4) i { background-position: 0 92.77%; }
  .m-bar:nth-child(5) i { background-position: 0 100%; }

  footer .footer-links a {
    font-size: 16px;
  }
}