/* Ponte public homepage (index.html, #home). Shown only to first-time visitors
   on the website; see the view switch at the top of index.html. Not shipped in
   the iPhone app: native/build-web.js removes this file and the #home markup.

   One screen, no scrolling, over a full-screen photo of Porto at sunset
   (assets/home: bg-portrait.jpg for upright screens, bg-wide.jpg otherwise).
   Phones: the headline sits on the bright sky at the top, the buttons on the
   darker stone at the bottom. Wider screens: everything on the calm left side.
   tests/home.test.js checks the fit from 375x667 to 1440x900.
   One deliberate look, so colours are set here, not from app.css's tokens. */

html[data-view="home"] #app { display: none !important; }
html[data-view="app"] #home { display: none !important; }

html[data-view="home"],
html[data-view="home"] body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #2A1C17;
  color-scheme: light;
}

#home {
  --h-ink: #14192A;
  --h-ink-soft: #2E3650;
  --h-teal: #0E7C86;
  --h-teal-deep: #0A5B63;
  --h-display: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
  --h-body: 'DM Sans', system-ui, -apple-system, sans-serif;

  position: relative;
  isolation: isolate;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: env(safe-area-inset-top, 0px) max(20px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(20px, env(safe-area-inset-left, 0px));
  background: #2A1C17;
  color: var(--h-ink);
  font-family: var(--h-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
#home *, #home *::before, #home *::after { box-sizing: border-box; }
#home a { color: inherit; }
#home img { max-width: 100%; height: auto; display: block; }
#home :focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 8px; box-shadow: 0 0 0 6px var(--h-teal-deep); }
#home h1 { font-family: var(--h-display); color: var(--h-ink); margin: 0; text-wrap: balance; }
#home p { margin: 0; text-wrap: pretty; }
/* app.css styles <main> for the app's layout; the homepage's <main> is plain */
#home main { flex: none; grid-area: auto; padding: 0; }

/* ---------- the photo, and the shading that keeps text readable on it ---------- */
#home .h-bg, #home .h-bg img { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; }
#home .h-bg { z-index: -2; }
#home .h-bg img { object-fit: cover; object-position: 50% 45%; }
#home::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,241,228,.82) 0%, rgba(255,241,228,.55) 26%, rgba(255,241,228,0) 44%),
    linear-gradient(0deg, rgba(20,12,10,.86) 0%, rgba(20,12,10,.55) 22%, rgba(20,12,10,0) 42%);
}

/* ---------- header ---------- */
.h-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; }
.h-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-family: var(--h-display); font-weight: 800; font-size: 1.25rem; color: var(--h-ink) !important; }
.h-brand img { width: 36px; height: 36px; border-radius: 10px; }
#home .h-nav-cta { color: #fff; background: var(--h-teal-deep); text-decoration: none; font-weight: 700; font-size: .92rem; padding: 9px 16px; border-radius: 999px; }
#home .h-nav-cta:hover { background: #084A51; }

/* ---------- main: copy at the top, actions at the bottom ---------- */
.h-main { min-height: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding-block: clamp(4px, 1.5svh, 16px) clamp(8px, 2svh, 20px); }
.h-copy { max-width: 600px; }
#home .h-eyebrow { font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--h-teal-deep); }
#home h1 { margin-top: clamp(6px, 1.2svh, 14px); font-size: clamp(2rem, min(9.6vw, 5.4svh), 4.6rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.04em; }
#home h1 em { font-style: normal; color: var(--h-teal-deep); }
#home .h-lead { margin-top: clamp(8px, 1.4svh, 18px); font-size: clamp(.98rem, 2.1svh, 1.18rem); color: var(--h-ink-soft); max-width: 30em; font-weight: 500; }

.h-actions { display: flex; flex-direction: column; gap: clamp(6px, 1.2svh, 14px); }
.h-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.h-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 999px;
  background: var(--h-teal-deep); color: #fff !important; text-decoration: none; font-weight: 700; font-size: 1.02rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.28); transition: background .15s;
}
.h-btn:hover { background: #084A51; }
#home .h-store img { height: 52px; width: auto; }
#home .h-note { font-size: .86rem; color: #F3E9E1; text-shadow: 0 1px 2px rgba(0,0,0,.4); }

/* ---------- footer ---------- */
.h-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; padding-block: 10px 14px; border-top: 1px solid rgba(255,255,255,.22); font-size: .82rem; }
.h-footer nav { display: flex; gap: 16px; }
#home .h-footer a { color: #F3E9E1; text-decoration: none; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
#home .h-footer a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 899px) { .h-footer > a:first-child { flex-basis: 100%; } }

/* short phones (iPhone SE and similar): the eyebrow goes, so the people in the photo stay visible */
@media (max-height: 720px) and (orientation: portrait) { #home .h-eyebrow { display: none; } }

/* ---------- wide screens: copy and actions together on the calm left of the photo ---------- */
@media (orientation: landscape) and (min-width: 700px) {
  #home { padding-left: max(40px, calc((100vw - 1240px) / 2)); padding-right: max(40px, calc((100vw - 1240px) / 2)); }
  #home .h-bg img { object-position: 60% 50%; }
  #home::before {
    /* the dark band is listed first so it sits on top: the footer stays readable across the whole width */
    background:
      linear-gradient(0deg, rgba(20,12,10,.78) 0%, rgba(20,12,10,.45) 7%, rgba(20,12,10,0) 16%),
      linear-gradient(90deg, rgba(255,241,228,.88) 0%, rgba(255,241,228,.7) 30%, rgba(255,241,228,0) 58%);
  }
  .h-main { justify-content: center; gap: clamp(18px, 3.5svh, 36px); }
  #home h1 { font-size: clamp(2.6rem, min(5.2vw, 9svh), 4.8rem); }
  #home .h-note { color: var(--h-ink-soft); text-shadow: none; }
  .h-copy, .h-actions { max-width: 560px; }
  .h-footer { padding-block: 14px 18px; }
}

@media (prefers-reduced-motion: reduce) { #home * { transition: none !important; } }