/* Home page hero + Baku buildings strip, adapted from static-homepage/index.html.
   Layout/behavior kept as authored there; the only additions are the
   full-bleed breakout (this site constrains .site-main to --max-width,
   which the original standalone page didn't have to account for) and the
   .contents-link class replacing inline style="display: contents" on the
   logo-wrapping <a> tags. */

:root {
  --overlap: 7vw; /* building 3 overlapping left under building 2 */
  --overlap2: 2.5vw; /* building 4 overlapping left over building 3 */
}

.contents-link {
  display: contents;
}

.hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -1.25rem;
  aspect-ratio: 1 / 1;
  min-height: calc(360px + 27vw);
  max-height: 100vh;
  padding: 0;
  color: white;
  overflow: shown;
}
.hero .bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
  margin: 0;
}
.hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
}
.hero .soc-logo {
  display: inline-block;
  height: 13em;
  width: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  vertical-align: middle;
  margin-right: -0.5rem;
  border-radius: 2rem;
  opacity: 1;
  transition: opacity 0.15s ease;
}
/* Fallback for no-JS: dims the whole box on hover, ignoring transparency.
   When JS runs, it sets this element's opacity inline per-pixel on
   mousemove, which — being an inline style — takes precedence over
   this rule regardless of :hover, giving the precise behavior instead. */
.hero .soc-logo:hover {
  opacity: 0.75;
}

.hero .content h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: white;
  font-weight: 600;
  font-family: "Cal Sans", sans-serif;
  /* Fluid instead of a flat 4rem so "Azerbaijan Society" always
     fits on one line rather than wrapping (which was also
     throwing off the centering) at narrow widths. */
  font-size: clamp(1.5rem, 7vw, 4rem);
  white-space: nowrap;
}

.hero .content h1 span {
  position: relative;
}

.hero .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-left: 10%;
  padding-right: 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  gap: 10px;
  /* Was a flat 7%, which on tall/large-viewport heroes (7% of a much
     bigger height) pushed the whole content block noticeably above
     true center. Scaling with vh but capping keeps the nudge modest
     regardless of hero height. */
  padding-bottom: clamp(0.75rem, 4vh, 3rem);
}
.hero .tagline {
  padding-left: 1.2rem;
  padding-top: 1rem;
  font-size: 1.2rem;
  font-weight: 500;
  max-width: 60%;
  text-align: center;
}
.hero .partner-logos {
  display: flex;
  align-items: center;
  gap: 1em;
  justify-content: center;
  padding-right: 0.5rem;
}
.hero .partner-logo {
  display: block;
  height: 2em;
  width: auto;
  object-fit: contain;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.15s ease;
}
.hero .partner-logo:hover {
  opacity: 0.75;
}
.hero .qmul-logo {
  height: 3.2em;
  padding-right: 1rem;
}
.hero .header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: -0.5rem;
}

/* Buildings strip: bottom-aligned inside .hero, justified widths, staggered offsets + scroll parallax */
.buildings {
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  gap: 0;
  display: flex;
  align-items: flex-end;
}
.buildings img {
  position: relative;
  flex-basis: 0;
  flex-shrink: 0;
  width: auto;
  object-fit: cover;
  margin: 0;
  padding: 0;
  height: calc((100vw + var(--overlap) + var(--overlap2)) / 3.7292);
  /* Hit-testing is handled manually in JS (see hero.js) so that
     per-pixel transparency, not the rectangular box, decides hits.
     No JS fallback here — without JS the buildings simply aren't
     clickable. */
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.15s ease;
}

.buildings img[data-building="heydar-aliyev-center"] { margin-left: calc(-1 * var(--overlap)); }
.buildings img[data-building="maiden-tower"] { margin-left: calc(-1 * var(--overlap2)); }

.buildings img[data-building="flame-towers"] { flex-grow: 0.7821; z-index: 1; }
.buildings img[data-building="carpet-museum"] { flex-grow: 0.9471; z-index: 3; }
.buildings img[data-building="heydar-aliyev-center"] { flex-grow: 1.4327; z-index: 2; }
.buildings img[data-building="maiden-tower"] { flex-grow: 0.5673; z-index: 10; }

/* Buildings start level; stagger emerges only from scroll-driven parallax below */

/* Scroll-driven parallax (progressive enhancement — Chrome/Edge today, Firefox landing, Safari not yet) */
@keyframes parallax-slow {
  from { translate: 0 0; }
  to   { translate: 0 -6vh; }
}
@keyframes parallax-mid {
  from { translate: 0 0; }
  to   { translate: 0 -12vh; }
}
@keyframes parallax-fast {
  from { translate: 0 0; }
  to   { translate: 0 -18vh; }
}

@supports (animation-timeline: scroll()) {
  .buildings img[data-building="flame-towers"] {
    animation: parallax-slow linear both;
    animation-timeline: scroll(root block);
  }
  .buildings img[data-building="carpet-museum"] {
    animation: parallax-mid linear both;
    animation-timeline: scroll(root block);
  }
  .buildings img[data-building="heydar-aliyev-center"] {
    animation: parallax-slow linear both;
    animation-timeline: scroll(root block);
  }
  .buildings img[data-building="maiden-tower"] {
    animation: parallax-fast linear both;
    animation-timeline: scroll(root block);
  }
}

/* ---------- Medium screens (tablets / small laptops) ---------- */
/* Nothing between desktop and the old mobile query scaled the
   fixed-size logo/title/text down, so on these widths they'd
   overflow or overlap the (aspect-ratio-limited) hero height. */
@media (max-width: 1024px) {
  .hero .content {
    padding-left: 6%;
    padding-right: 6%;
    gap: 8px;
  }
  .hero .soc-logo {
    height: 9em;
  }
  .hero .qmul-logo {
    height: 2.4em;
  }
  .hero .partner-logo {
    height: 1.6em;
  }
  .hero .tagline {
    font-size: 1rem;
    max-width: 75%;
    padding-top: 0.5rem;
  }
}

/* ---------- Small screens (phones) ---------- */
@media (max-width: 600px) {
  /* Aspect-ratio was making the hero quite short on narrow
     viewports; min-height gives it more room instead. */
  .hero {
    aspect-ratio: unset;
    min-height: 92vh;
  }
  .hero .content {
    gap: 16px;
    padding-bottom: 4vh;
  }
  /* Stack the society logo above the title/partner-logos block
     instead of side-by-side — fits better at this width. */
  .hero .header {
    flex-direction: column;
    gap: 0.5rem;
  }
  .hero .soc-logo {
    margin-right: 0;
  }
  .hero .partner-logos {
    /* Space under the title before the logo row starts. */
    margin-top: 0.5rem;
  }
  .hero .tagline {
    /* Space under the title/logo block before the description. */
    margin-top: 0.5rem;
    max-width: 85%;
  }
}

/* ---------- Short viewports (e.g. landscape phones, small windows) ---------- */
/* Independent of width: when there isn't much vertical room, the
   normal gap before the paragraph pushes it down far enough to
   sit behind the buildings strip. Tighten it up here. */
@media (max-height: 500px) {
  .hero .content {
    gap: 4px;
    padding-bottom: 1vh;
  }
  .hero .tagline {
    margin-top: 0;
  }
}