/* =======================================================================
   Reset / Base
   ======================================================================= */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #000;
  /* fallback color */
}

/* Helper: things that should render only on mobile portrait */
/* Hide mobile-only pieces everywhere by default */
.logo-mobile,
.hero-cta--mobile,
.tagline-mobile,
.only-mobile {
  display: none !important;
}


/* =======================================================================
   Hero: full-bleed background (JPEG only)
   - Desktop/default also used for tablet-portrait
   ======================================================================= */
.hero {
  position: relative;
  width: 100vw;
  height: 100svh;
  /* mobile-safe viewport */
  height: 100vh;
  /* fallback */
  background: url("../images/hero-wide.jpg") center 55% / cover no-repeat;
  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* =======================================================================
   Overlay: absolute container that keeps logo + button aligned (desktop/tablet)
   ======================================================================= */
:root {
  --overlay-left: 27vw;
  /* horizontal position of overlay CENTER */
  --overlay-top: 33%;
  /* vertical position of overlay CENTER */
  --overlay-max-width: 700px;
}

.hero-overlay {
  position: absolute;
  left: var(--overlay-left, 27vw);
  top: var(--overlay-top, 33%);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: min(90vw, var(--overlay-max-width));
  z-index: 2;
}

/* Logo / Tagline sizing (desktop/tablet overlay) */
.hero-logo,
.hero-tagline {
  display: block;
  line-height: 0;
}

.hero-logo img,
.hero-logo {
  width: clamp(260px, 38vw, 600px);
  height: auto;
  display: block;
}

.hero-tagline img,
.hero-tagline {
  width: clamp(220px, 30vw, 520px);
  height: auto;
  display: block;
}

/* =======================================================================
   CTA Button (PNG swap, no fade, no layout shift)
   ======================================================================= */
.hero-cta {
  position: relative;
  width: clamp(180px, 22vw, 275px);
  aspect-ratio: 680 / 173;
  display: grid;
  place-items: center;
  line-height: 0;
  margin-right: 4%;
}

.btn-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transition: transform .12s ease;
}

.btn-img.base {
  opacity: 1;
}

.btn-img.hover {
  opacity: 0;
}

.footer-text {
  color: rgb(255, 255, 255);
  font-family: 'Courier New', Courier, monospace;
  font-size: .8rem;
  position: absolute;
  bottom: 0;
  opacity: .7;
}

@media (hover:hover) {

  .hero-cta:hover .btn-img.base,
  .hero-cta:focus-visible .btn-img.base {
    opacity: 0;
  }

  .hero-cta:hover .btn-img.hover,
  .hero-cta:focus-visible .btn-img.hover {
    opacity: 1;
    transform: scale(1.05);
    /* remove if you want ZERO motion */
  }
}

.hero-cta:active .btn-img.hover {
  transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .btn-img {
    transition: none !important;
  }
}

/* =======================================================================
   TABLET: landscape only (768–1024px)
   ======================================================================= */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .hero {
    background-image: url("../images/hero-tablet.jpg");
    background-position: center 58%;
  }

  :root {
    --overlay-left: 45vw;
    /* nudge horizontally */
    --overlay-top: 46%;
    /* tweak vertically */
    --overlay-max-width: 620px;
  }

  .hero-logo img,
  .hero-logo {
    width: clamp(240px, 34vw, 520px);
  }

  .hero-tagline img,
  .hero-tagline {
    width: clamp(200px, 30vw, 480px);
  }

  .hero-cta {
    width: clamp(200px, 26vw, 360px);
  }
}

/* MOBILE: portrait only (≤640px) */
@media (max-width: 640px) and (orientation: portrait) {
  .hero {
    background-image: url("../images/hero-mobile.jpg");
    background-position: center 60%;
  }

  /* Hide desktop/tablet stack */
  .hero-overlay {
    display: none !important;
  }

  /* Show mobile-only elements */
  .logo-mobile,
  .hero-cta--mobile,
  .tagline-mobile,
  .only-mobile {
    display: block !important;
  }

  /* Mobile logo */
  .logo-mobile {
    position: absolute;
    left: 6vw;
    /* tweak to taste */
    top: 3%;
    width: clamp(150px, 44vw, 200px);
    height: auto;
    z-index: 2;
    pointer-events: none;
  }

  /* Mobile CTA (fixed-size wrapper, no layout shift) */
  .hero-cta--mobile {
    position: absolute;
    left: 50%;
    bottom: 18%;
    transform: translateX(-50%);
    width: clamp(180px, 60vw, 340px);
    margin-right: 0;
    z-index: 2;
  }

  /* Mobile tagline block (swap to an <img> if you have an asset) */
  .tagline-mobile {
    position: absolute;
    left: 0;
    right: 0;
    /* lock to both sides */
    bottom: max(0px, env(safe-area-inset-bottom));
    /* avoid iOS home bar */
    width: 100vw;

    max-width: 100%;
    /* fill hero width */
    height: auto;
    /* keep aspect ratio */
    display: block;
    /* no inline gap */
    transform: none;
    /* remove prior translate */
    z-index: 2;
    pointer-events: none;
    /* optional: if decorative */
  }
}

/* If you use an image for the mobile tagline instead of text:
     .tagline-mobile { background: none; padding: 0; border-radius: 0; box-shadow: none; }
     .tagline-mobile img { width: 100%; height: auto; display: block; }
  */