/**
 * my-sugar-daddy.com landing page -- Version 1 ("Ein Blick. Alles ist
 * möglich.").
 *
 * Built from a Figma mockup screenshot (desktop only): a split hero --
 * dark copy panel on the left, full-height photo with a floating profile
 * card on the right -- followed by a stat bar and a one-line footer. The
 * mobile layout is not in the mockup; it follows the same "copy sits on top
 * of a full-bleed, darkened photo" pattern already used on
 * sites/msd-dates/begin/v1 (see that file's changelog for why: the photo
 * has to carry the contrast for the headline on any breakpoint).
 *
 * Brand tokens are from the mysugardaddy-branding skill (colors, Tinos/Roboto).
 */

:root {
  --c-bg: #000000;
  --c-bg-stats: #050505;
  --c-card: #1a1a1a;
  --c-border: #4e4e4e;
  --c-accent: #c82151;
  --c-accent-hover-bg: #3c0b18;
  --c-text: #ffffff;
  --c-text-muted: #b2b2b2;

  --radius: 4px;
  --font-display: 'Tinos', 'Times New Roman', serif;
  --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --gutter: 18px;
  --content-max: 1600px;
}

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

/* html/body/main/hero form a flex column where the HERO grows to absorb
   whatever vertical space the viewport has beyond stats+footer's natural
   size. Without this, a viewport taller than the page's fixed content
   height (e.g. a colleague's larger monitor) left a dead black gap below
   the footer that grew with screen size -- the page looked different on
   every screen. Now the photo simply fills more of the screen instead, and
   stats+footer always sit flush at the very bottom. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  display: flex;
  flex-direction: column;
  flex: 1;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

/* ---------------------------------------------------------------- shared */

.eyebrow {
  margin: 0 0 14px;
  color: var(--c-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius);
  background: var(--c-accent);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-primary:hover {
  background: #b01c47;
}

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

/* ------------------------------------------------------------ navigation */

.nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: 84px;
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding-inline: var(--gutter);
}

.nav__logo {
  display: block;
  margin-right: auto;
}

.nav__logo img {
  width: 190px;
  height: auto;
}

.nav__links {
  display: none;
  align-items: center;
  gap: 36px;
}

.nav__links a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.nav__links a:hover {
  color: var(--c-accent);
}

.nav__login {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-transform: uppercase;
  color: var(--c-accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  flex: 1;
  min-height: 420px;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

/* Mobile/tablet: the copy sits on top of the photo, so the whole frame needs
   a heavy scrim. Weighted towards top and bottom, where the eyebrow and the
   button/trust line need the most contrast. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.6) 42%, rgba(0, 0, 0, 0.92) 100%);
}

/* position:relative + z-index is load-bearing on mobile/tablet: .hero__media
   is position:absolute (inset:0) and would otherwise paint ON TOP of this
   block even though it comes first in the DOM -- absolutely positioned
   elements stack above static ones regardless of source order. */
.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 420px;
  padding: 76px var(--gutter) 18px;
}

.hero__headline {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
}

.hero__rule {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.hero__rule span {
  display: block;
  height: 1px;
  background: var(--c-border);
}

.hero__rule span:first-child {
  width: 60px;
  background: var(--c-accent);
}

.hero__rule span:last-child {
  flex: 1;
  max-width: 190px;
}

.hero__body {
  margin: 0 0 14px;
  max-width: 480px;
  font-size: 15px;
  line-height: 1.4;
}

.hero__body span {
  display: block;
}

.hero .btn-primary {
  width: auto;
  padding: 0 30px;
  min-height: 44px;
  margin-bottom: 8px;
}

.hero__trust {
  margin: 0;
  color: var(--c-text-muted);
  font-size: 12px;
}

.hero__trust span {
  margin: 0 8px;
}

.hero__trust span:first-child {
  margin-left: 0;
}

/* Floating profile card -- hidden on mobile per feedback (name/online-status
   badge adds clutter on a small screen and isn't needed there), shown from
   tablet up in the photo area. */
.profile-card {
  display: none;
  position: absolute;
  top: 88px;
  right: var(--gutter);
  z-index: 3;
  padding: 12px 16px;
  border: 1px solid var(--c-accent);
  border-radius: var(--radius);
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(6px);
}

.profile-card__name {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
}

.profile-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--c-text-muted);
  font-size: 13px;
}

.profile-card__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2ecc71;
  flex: 0 0 auto;
}

/* -------------------------------------------------------------- stat bar */

.stats {
  flex: 0 0 auto;
  background: var(--c-bg-stats);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.stats__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 10px var(--gutter);
}

.stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.stat svg {
  flex: 0 0 auto;
  color: var(--c-accent);
}

/* ----------------------------------------------------------------- footer */

.footer {
  flex: 0 0 auto;
  padding: 8px var(--gutter);
  text-align: center;
}

.footer p {
  margin: 0;
  color: var(--c-text-muted);
  font-size: 12px;
}

.footer a {
  color: var(--c-text-muted);
  text-decoration: none;
}

.footer a:hover {
  color: var(--c-text);
}

/* ==================================================== Mobile only */

/* On mobile .hero grows (flex:1) to fill whatever vertical space is left
   above the stats bar, but .hero__copy was a normal-flow box sized to its
   own content -- it only ever occupied the top ~420-500px, leaving a big
   dead stretch of bare photo below the copy on any phone taller than that.
   Stretching .hero__copy over the full hero (like .hero__media already is)
   and centering its content vertically spreads the leftover space evenly
   above and below instead of dumping it all in one place. The button gets
   extra margin-top so it settles a bit below the (now higher) text block
   rather than sitting right underneath it. */
@media (max-width: 767.98px) {
  .hero__copy {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
  }

  .hero__inner {
    justify-content: center;
  }

  .hero .btn-primary {
    margin-top: 22px;
  }
}

/* ================================================= Tablet */

@media (min-width: 768px) {
  :root {
    --gutter: 48px;
  }

  .hero {
    min-height: 460px;
  }

  .hero__inner {
    min-height: 460px;
    max-width: 640px;
    padding-block: 76px 32px;
  }

  .hero__headline {
    font-size: 46px;
  }

  .hero__body {
    font-size: 17px;
  }

  .stats__inner {
    flex-direction: row;
    justify-content: space-between;
  }

  /* From tablet up the photo panel has enough vertical room that the card
     no longer collides with the trust line, so it moves back to the
     bottom-right corner (matching the desktop mockup). */
  .profile-card {
    display: block;
    top: auto;
    bottom: 32px;
  }
}

/* ================================================ Desktop -- split hero */

@media (min-width: 1100px) {
  :root {
    --gutter: 100px;
  }

  .hero {
    min-height: 560px;
  }

  /* align-items:flex-start + an explicit padding-top (NOT centering) is
     load-bearing: .nav is an absolutely positioned overlay with height 84px,
     and centering the copy block within a short hero can place the eyebrow
     right underneath/behind it -- happened for real once the hero was
     shrunk to fit the fold, garbling the eyebrow into the nav row. A fixed
     offset guarantees clearance regardless of how tall the hero ends up. */
  /* width, not flex:0 0 48%: .hero is no longer a row flex container here
     (see .hero__media below for why), so .hero__copy is back to being a
     normal in-flow block sized by an explicit percentage width. */
  .hero__copy {
    position: relative;
    z-index: 2;
    width: 48%;
    display: flex;
    align-items: flex-start;
    background: var(--c-bg);
  }

  .hero__inner {
    min-height: 0;
    max-width: 560px;
    padding: 108px var(--gutter) 32px;
  }

  /* Absolutely positioned (inset instead of flex-basis) so its height comes
     directly from .hero's own laid-out box -- not from a percentage-height
     <img> needing .hero to have a "definite" height the way a flex row's
     stretched cross-size does. That distinction is exactly what blew up:
     .hero is flex-grown by <main> now (so it can fill a tall screen instead
     of leaving a dead gap below the footer -- see the flex:1 in the base
     .hero rule), and asking .hero__media's cross-size to *also* resolve via
     row-flex stretch while an <img height:100%> inside it needed that same
     size back created a circular fallback to the image's intrinsic aspect
     ratio, stretching .hero to ~1000px regardless of any height/min-height
     value written here. inset:0 (relative to .hero__copy's absolutely
     positioned sibling .hero) sidesteps that: it takes .hero's already
     concrete, laid-out size directly, no percentage circularity involved. */
  .hero__media {
    position: absolute;
    inset: 0 0 0 auto;
    width: 52%;
  }

  /* On desktop the photo panel is fully separate from the copy panel, so the
     bottom gradient only needs to be a light scrim for the profile card's
     legibility, not for the headline. A second, left-edge gradient is
     layered on top of it (same black as the copy panel) so the seam between
     the two panels fades into the photo instead of cutting it off hard. */
  .hero__media::after {
    background:
      linear-gradient(90deg, var(--c-bg) 0%, rgba(0, 0, 0, 0.85) 6%, rgba(0, 0, 0, 0.35) 14%, rgba(0, 0, 0, 0) 24%),
      linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%);
  }

  /* At this box's aspect ratio object-fit:cover has to crop a lot more off
     the image's height than its width -- a low Y anchor keeps that crop off
     the top (the model's head) instead of splitting it evenly. */
  .hero__media img {
    object-position: center 8%;
  }

  .hero__headline {
    font-size: 56px;
  }

  .profile-card {
    top: auto;
    right: 40px;
    bottom: 32px;
  }

  .nav__links {
    display: flex;
  }

  .nav__logo img {
    width: 240px;
  }
}