/*
 * The intro (hero) and the footer. Shared by the stand-alone landing page
 * (index.html) and the artwalk.art app build (#5623), where they sit above and
 * below the ArtWalk app in the same document. Every rule is therefore scoped
 * to .hero / .site-footer / .aw-* classes: a bare element or utility-like
 * selector here would restyle the app (Tailwind has its own `block` class).
 */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/plus-jakarta-sans-variable-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

.hero,
.site-footer {
  --primary: #ea1e63;
  --secondary: #ea7e1e;
  --light: #fffffe;
  --black: #130107;
  --background-alt: #f9f9f9;
  --foreground: #565555;
  --meta: #c2c2c2;
  /* The heart logo next to the "ARTWALK" lettering (#5650). The heart is drawn
     on 7 square pixel rows that fill the image, with no margin. The capitals
     stand between the bottom edge of the first row and the top edge of the
     last row, so they are 5 rows high and one row is a fifth of the cap
     height. --aw-cap is the cap height of Plus Jakarta Sans in em, measured
     in the browser on the drawn glyphs (745 of 1000 units, same at 600 and
     800). Used on an element, --aw-logo-row is one row at that element's
     font size, so the logo follows the lettering at every size.
     Where the lettering runs over two lines (the hero on phones), the five
     rows reach from the cap top of "ARTWALK" to the baseline of ".art" on the
     next line; that rule sets its own --aw-logo-row. */
  --aw-cap: 0.745;
  --aw-logo-rows: 7;
  --aw-logo-row: calc(var(--aw-cap) / (var(--aw-logo-rows) - 2) * 1em);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  box-sizing: border-box;
}

.hero *,
.site-footer * {
  box-sizing: border-box;
}

.site-footer a,
.aw-back {
  text-decoration: none;
}

.site-footer img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.site-footer ul,
.site-footer p,
.site-footer h3 {
  margin: 0;
}

/* #5852, Stephan: the brand reads "ART WALK", with the space between the two
   words narrowed "so stark, daß es kaum auffällt, daß es zwei Worte sind, nur
   ein bisschen halt". The space stays an ordinary one (copy and screen readers
   get "ART WALK"); it never wraps. apps/web/src/styles.css carries the same
   rule for the app. Where CSS cannot reach (titles, alt, plain text) the
   narrow no-break space U+202F does the same job. -0.06em leaves about two
   thirds of Plus Jakarta Sans' 0.175em space: "nur ein bisschen", the gap
   still visible on a close look. U+202F (half a space) is the narrowest
   no-break choice for plain text, so there the gap is a little tighter. Inside a flex box (footer title, "– Startseite" links) the brand
   and its neighbouring text share one wrapper <span>: as separate flex items
   the spaces between them would be dropped. */
.aw-brand {
  white-space: nowrap;
  word-spacing: -0.06em;
}

.aw-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* "Zurück zu PixDeluxe": only for visitors who came from pixdeluxe.com. The
   boot script sets the class on <html>; without it (or without JavaScript)
   the link is not there at all. */
.aw-back {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: calc(16px + env(safe-area-inset-left, 0px));
  z-index: 2;
  display: none;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(19, 1, 7, 0.55);
  color: var(--light);
  font-size: 15px;
  font-weight: 600;
}

.aw-from-pixdeluxe .aw-back {
  display: inline-flex;
}

.aw-back:hover,
.aw-back:focus-visible {
  background: var(--primary);
  color: var(--light);
}

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

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  height: 100vh;
  height: 100svh;
  min-height: 420px;
  overflow: hidden;
  background: var(--black);
  color: var(--light);
}

.hero-media {
  position: absolute;
  inset: 0;
}

.hero-media-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
}

.hero-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(19, 1, 7, 0.55) 0%, rgba(19, 1, 7, 0.35) 60%, rgba(19, 1, 7, 0.6) 100%);
}

/* The footer's box (.footer-main: at most 1200px, centred, 5vw at the
   sides), so the heart stands on the same left line as the footer heart and
   the app header heart at every width (#5688). landing.js sizes the
   lettering to this box's content width. */
.hero-title {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0;
  padding: 0 5vw;
  text-align: left;
  font-weight: 800;
  line-height: 1;
}

.lettering {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: baseline;
  column-gap: 0.28em;
  row-gap: 0.08em;
  justify-items: start;
  text-align: left;
  white-space: nowrap;
  font-size: min(9vw, 96px);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(19, 1, 7, 0.55);
}

.line-art {
  display: inline-flex;
  align-items: baseline;
}

.slot {
  display: inline-grid;
}

/* The slot is as wide as the longest completion, so the block of logo,
   lettering and completion keeps its place when the word changes. Each word
   starts at the slot's left edge, straight after ".art". */
.word {
  grid-area: 1 / 1;
  justify-self: start;
  white-space: pre;
  opacity: 0;
}

.word.is-skipped {
  display: none;
}

/* The logo's bottom edge takes the baseline, then moves down by one row. */
.hero-logo {
  position: relative;
  top: var(--aw-logo-row);
  width: calc(var(--aw-logo-rows) * var(--aw-logo-row));
  height: calc(var(--aw-logo-rows) * var(--aw-logo-row));
  max-width: none;
  filter: drop-shadow(0 2px 24px rgba(19, 1, 7, 0.55));
}

/* Phones: "ARTWALK" above ".art…" so the lettering can stay large; the logo
   stands in front of both lines. Its five inner rows reach from the cap top
   of "ARTWALK" to the baseline of ".art" (#5650). --aw-line-pitch is the
   distance between the two baselines in em: the line height plus the gap. */
@media (max-width: 700px) {
  .lettering {
    --aw-line-gap: 0.08;
    --aw-line-pitch: calc(1 + var(--aw-line-gap));
    --aw-logo-row: calc((var(--aw-cap) + var(--aw-line-pitch)) / (var(--aw-logo-rows) - 2) * 1em);
    grid-auto-flow: row;
    grid-template-columns: auto auto;
    row-gap: calc(var(--aw-line-gap) * 1em);
    line-height: 1;
    font-size: 8vw;
  }
  /* The logo's bottom edge takes the baseline of "ARTWALK" and moves down to
     one row below the baseline of ".art". The negative margin keeps the tall
     logo from stretching the first line. */
  .hero-logo {
    grid-area: 1 / 1;
    margin-top: calc(-1 * var(--aw-logo-rows) * var(--aw-logo-row));
    top: calc(var(--aw-line-pitch) * 1em + var(--aw-logo-row));
  }
  .line {
    grid-column: 2;
  }
}

/* ---------- footer (as on pixdeluxe.com) ---------- */

.site-footer {
  background: var(--black);
  color: var(--foreground);
  font-size: 14px;
}

.footer-main {
  display: grid;
  grid-template-columns: 35% 1fr 1fr 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 5vw;
}

/* One value for the gap under the logo and the gap above the last line. */
.footer-brand {
  --aw-brand-gap: 16px;
}

/* The box is exactly as high as the logo. The logo's bottom edge is the
   baseline; the lettering is moved up by one row from there. */
.footer-brand-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  height: calc(var(--aw-logo-rows) * var(--aw-logo-row));
  font-size: clamp(17.9px, 1.119rem + 0.616vw, 28px);
  line-height: 1;
  white-space: nowrap;
}

.footer-brand-title img {
  flex: none;
  width: calc(var(--aw-logo-rows) * var(--aw-logo-row));
  height: calc(var(--aw-logo-rows) * var(--aw-logo-row));
  max-width: none;
}

.footer-site-title {
  position: relative;
  top: calc(-1 * var(--aw-logo-row));
  color: var(--light);
  font-weight: 600;
}

/* Expand the clickable box, compensating in the inline layout so the text
   keeps its position and the existing footer spacing stays the same. */
.footer-site-title,
.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: max(0px, calc((44px - 1lh) / 2));
  margin-block: min(0px, calc((1lh - 44px) / 2));
}

.footer-site-title:hover {
  color: var(--primary);
}

.footer-claim {
  margin: var(--aw-brand-gap) 0;
  color: var(--background-alt);
}

.footer-claim .footer-claim-rate {
  margin-top: calc(var(--aw-brand-gap) / 3);
}

.footer-claim .footer-claim-call {
  margin-top: var(--aw-brand-gap);
}

.footer-social {
  display: inline-flex;
  color: var(--light);
  padding: 10px;
  margin: -10px;
  min-width: 44px;
  min-height: 44px;
}

.footer-social:hover {
  color: var(--primary);
}

.footer-col h3 {
  margin: 0 0 12px;
  color: var(--light);
  font-size: clamp(14px, 0.875rem + 0.366vw, 20px);
  font-weight: 500;
}

.footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 2.5;
}

.footer-col a {
  color: var(--foreground);
}

.footer-col a:hover {
  color: var(--primary);
}

.footer-col .footer-meta,
.footer-col .footer-meta a {
  color: var(--meta);
}

.footer-col .footer-plain {
  color: var(--meta);
  text-decoration: none;
  cursor: default;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 5vw;
  border-top: 1px solid #ffffff17;
}

.footer-bottom p {
  margin: 0;
  color: var(--background-alt);
  font-size: clamp(14px, 0.875rem + 0.122vw, 16px);
}

.footer-top {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--light);
  font-size: 0;
}

.footer-top::before {
  content: "↑";
  font-size: 22px;
}

.footer-top:hover {
  background: var(--secondary);
  color: var(--light);
}

@media (max-width: 900px) {
  .footer-main {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .footer-main {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}