/* -------- Variables -------- */
.site-footer,
.footer-cta { --dark:#0c2734; --dark-2:#0a202a; --ink:#eaf4fb; --muted:#b6c7d3;
              --brand:#12b2e8; --brand-2:#0ed3a5; --line:#0f3242;
              --max:1150px; --radius:14px; --shadow:0 10px 22px rgba(0,0,0,.25); }

/* -------- CTA Banner -------- */
.footer-cta{
  position:relative; color:#fff; display:grid; place-items:center;
  aspect-ratio: 16 / 9;           /* nice wide look on desktop */
  min-height: 350px;
}
.footer-cta__bg{
  position:absolute; inset:0; z-index:-1;
  /* your image path */
  background: url("res/footer_pic.png") center/cover no-repeat;
}
.footer-cta::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
}
.footer-cta__inner{ text-align:center; padding:48px 16px; }
.footer-cta__title{ margin:0 0 8px; font:900 1.35rem/1.1 system-ui,Segoe UI,Inter,Arial; letter-spacing:.3px; }
.footer-cta__sub{ margin:0 auto 16px; max-width:760px; font-size:.95rem; opacity:.95; }
.footer-cta__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:.65rem 1.1rem; border-radius:999px; border:1.5px solid #fff; color:#fff;
  text-decoration:none; font-weight:800; box-shadow:var(--shadow); backdrop-filter:saturate(140%) blur(3px);
}
.footer-cta__btn:hover{ background:rgba(255,255,255,.1); }

/* Full-bleed helper (edge-to-edge on phones even inside padded layout) */
.footer-cta--bleed{
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  width:100vw;
}

/* -------- Footer Base -------- */
.site-footer{ background:var(--dark); color:var(--ink); border-top:1px solid var(--line); }
.footer__container{ width:min(100%,var(--max)); margin-inline:auto; padding:32px 20px; }

/* Newsletter */
.footer-news{ text-align:center; }
.footer-news__title{ margin:0 0 6px; font:900 .95rem/1 system-ui,Segoe UI,Inter,Arial; letter-spacing:.2px; }
.footer-news__sub{ margin:0 0 14px; color:var(--muted); font-size:.9rem; }

.footer-form{
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  margin:0 auto 22px; width:min(100%, 520px);
}
.footer-input{
  flex:1 1 320px; padding:12px 14px; border-radius:999px; border:1px solid #214455;
  background:#0f3140; color:var(--ink); outline:none;
}
.footer-input::placeholder{ color:#8fb0c4; }
.footer-btn{
  padding:12px 18px; border:none; border-radius:999px; cursor:pointer; color:#06202b;
  background:linear-gradient(90deg, var(--brand), var(--brand-2)); font-weight:800;
}

/* Socials */
.footer-socials{ display:flex; gap:12px; justify-content:center; margin:10px 0 18px; }
.soc{
  width:36px; height:36px; border-radius:999px; display:grid; place-items:center;
  background:#0f3242; color:#8fc6df; text-decoration:none;
}
.soc:hover{ background:#124054; color:#bfe6f7; }
.soc svg{ width:18px; height:18px; }

/* Copyright */
.footer-copy{
  border-top:1px solid #0f3242; margin-top:14px; padding-top:14px;
  text-align:center; color:#90aab9; font-size:.85rem; letter-spacing:.25px;
}

/* Utilities */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 640px){
  /* Make CTA less tall on phones, crop from center, keep text centered */
  .footer-cta{
    aspect-ratio: auto;       /* stop enforcing 16:9 */
    min-height: 260px;        /* balanced height on mobile */
  }
  .footer-cta__bg{
    background-position: center 50%;
    background-size: cover;
  }
  .footer-cta__inner{ padding: 28px 16px; }
  .footer-cta__title{ font-size: 1.2rem; }
  .footer-cta__sub{
    font-size: .9rem;
    max-width: 28ch;          /* tighter measure for readability */
    margin: 0 auto 14px;
  }
}

/* Ultra-small phones */
@media (max-width: 380px){
  .footer-cta{ min-height: 220px; }
  .footer-cta__title{ font-size: 1.08rem; }
  .footer-cta__sub{ font-size: .88rem; }
}