/* 
  Landing page built to match the layout from the provided PPTX.
  Static, responsive, full-viewport.
*/

*{ box-sizing: border-box; }
html, body{ height: 100%; }

:root{
  /* Header/footer bars: reduced by ~1/5 vs previous header height. */
  --bar-h: clamp(36px, 4.8vh, 52px);
  --page-bg: #0b0f0d;

  --divider: rgba(255,255,255,.95);
  /* Slightly softened title color (less harsh edges on bright text) */
  --title-color: rgba(105, 199, 240, 0.92);

  /* Slightly softer (less harsh) banner fills */
  --banner-green: rgba(20, 86, 50, 0.62);
  --banner-orange: rgba(140, 80, 35, 0.72);

  --tile-outline-hover: rgba(255,255,255,.75);
  --tile-outline-width: 3px;

  --title-size: clamp(1.6rem, 3.0vw, 3.1rem);
  --title-size-sm: clamp(1.15rem, 3.2vh, 2.0rem);

  --banner-pad-y: clamp(12px, 2.2vh, 18px);
  --banner-pad-x: clamp(12px, 2.8vw, 22px);

  /* Fixed banner height so all label panels match (as in the PPTX). */
  --banner-h: clamp(72px, 11vh, 120px);

  /* Topbar height for tiles 2 & 3 (increased by ~1/2). */
  --topbar-h: clamp(120px, 18vh, 240px);
}

body{
  margin: 0;
  background: var(--page-bg);
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  overflow: hidden; /* keep it as a full-screen landing */
}

a{ color: inherit; }

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

.page{
  min-height: calc(var(--vh, 1vh) * 100);
  display: flex;
  flex-direction: column;
}

.header{
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 clamp(12px, 2.2vw, 24px);
  background: rgba(0,0,0,.25);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand img{
  height: clamp(18px, 3.1vh, 26px);
  width: auto;
  display: block;
}

.tiles{
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  /* No horizontal separators between header and footer (matches PPTX). */
  border-top: 0;
  border-bottom: 0;
}

.tile{
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  outline: none;
  border-left: 4px solid var(--divider);
}

.tile:first-child{ border-left: none; }
.tile:last-child{ border-right: 4px solid var(--divider); }

.tile::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: var(--bgpos, center);
  transform: scale(1.02);
  transition: transform 320ms ease, filter 320ms ease;
}

.tile::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.28) 0%,
    rgba(0,0,0,0.0) 45%,
    rgba(0,0,0,0.22) 100%
  );
  pointer-events: none;
}

.tile__content{
  position: relative;
  height: 100%;
  width: 100%;
}

.tile__badge{
  position: absolute;
  top: clamp(16px, 2.2vw, 28px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(80px, 10vw, 132px);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: rgba(19, 93, 44, 0.82);
  border: 3px solid rgba(255,255,255,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(0,0,0,0.28);
}

/* Lower the Forest Hub badge so its center aligns with the vertical center
   of the (taller) topbars in tiles 2 & 3. */
.tile--forest .tile__badge{
  top: calc(var(--topbar-h) / 2);
  transform: translate(-50%, -50%);
}

.tile__badge img{
  width: 62%;
  height: auto;
  display: block;
}

.tile__topbar{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: clamp(14px, 2.2vw, 22px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.tile__topbar--forum{
  /* Transparent / no border; taller by ~50% */
  background: transparent;
  border-bottom: 0;
  padding: 0;
  min-height: var(--topbar-h);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.tile__topbar--trees{
  /* Transparent / no border; taller by ~50% */
  background: transparent;
  border-bottom: 0;
  padding: 0;
  min-height: var(--topbar-h);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.tile__topbar img{
  /* Use max-* to keep aspect ratio (no distortion) */
  max-height: clamp(48px, 10vh, 110px);
  height: auto;
  width: auto;
  max-width: min(88%, 420px);
  display: block;
}

/* Enlarge topbar logos (Tile 2: 2x, Tile 3: +20%) */
.tile__topbar--forum img{
  max-height: clamp(96px, 20vh, 220px);
  max-width: min(92%, 720px);
}

.tile__topbar--trees img{
  max-height: clamp(58px, 12vh, 132px);
  max-width: min(92%, 520px);
}

.tile__banner{
  position: absolute;
  left: 0;
  right: 0;
  top: 66%;
  transform: translateY(-50%);
  /* Same-height label panels across all tiles */
  height: var(--banner-h);
  padding: 0 var(--banner-pad-x);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.02em;
  /* Soften the label look */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: box-shadow 260ms ease, background-color 260ms ease;
}

.tile__banner span{
  font-size: var(--title-size);
  font-weight: 650;
  color: var(--title-color);
  line-height: 1.1;
  text-shadow: 0 3px 18px rgba(0,0,0,0.42);
}

.tile__banner--forest{ background: var(--banner-green); }
.tile__banner--forum{ background: var(--banner-orange); }
.tile__banner--trees{ background: var(--banner-green); }

.tile:hover::before,
.tile:focus-visible::before{
  transform: scale(1.08);
  filter: brightness(1.07) saturate(1.05);
}

.tile:hover .tile__banner,
.tile:focus-visible .tile__banner{
  box-shadow: inset 0 0 0 var(--tile-outline-width) var(--tile-outline-hover);
}

.tile:active::before{
  transform: scale(1.06);
  filter: brightness(1.03) saturate(1.03);
}

.footer{
  min-height: var(--bar-h);
  padding: 0 clamp(12px, 2.2vw, 24px);
  font-size: clamp(0.78rem, 1.2vw, 0.95rem);
  line-height: 1.35;
  background: rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
}

.footer a{
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.footer a:hover,
.footer a:focus-visible{
  border-bottom-color: rgba(255,255,255,0.92);
}

.footer__sep{
  opacity: 0.65;
}

@media (max-width: 900px){
  :root{
    --topbar-h: clamp(96px, 16vh, 200px);
  }

  .tiles{
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    border-top: 0;
    border-bottom: 0;
  }

  .tile{
    border-left: none;
    border-right: none;
    border-top: 3px solid var(--divider);
  }

  .tile:first-child{ border-top: none; }

  .tile__banner{
    top: 70%;
  }

  .tile__banner span{
    font-size: var(--title-size-sm);
  }

  .tile__topbar img{
    max-height: clamp(44px, 8vh, 96px);
    height: auto;
    width: auto;
    max-width: min(92%, 360px);
  }

  /* Keep the same relative scaling in the topbars on smaller screens */
  .tile__topbar--forum img{ max-height: clamp(88px, 16vh, 190px); }
  .tile__topbar--trees img{ max-height: clamp(52px, 10vh, 116px); }
}

@media (prefers-reduced-motion: reduce){
  .tile::before,
  .tile__banner{
    transition: none !important;
  }
}


/* Background images extracted from the PPTX */
.tile--forest{
  --bg: url('../assets/images/bg-forest-hub.png');
  --bgpos: center;
}

.tile--forum{
  --bg: url('../assets/images/bg-forum-of-mayors.jpg');
  --bgpos: center 65%;
}

.tile--trees{
  --bg: url('../assets/images/bg-trees-in-cities.jpg');
  --bgpos: center;
}