/* =========================================================
   FOOTER
   Figma: "Footer", Frame 241, 210, 215, 211, 212, 213, 209,
          background, Frame 281, Frame 282, Rectangles 32–35, Ellipse 851,
          Frame 312, Frame 313
   Size: 1440 x 506.63
   ========================================================= */

.footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 96px 120px;
  gap: 48px;
  isolation: isolate;
  width: 100%;
  background: linear-gradient(156.49deg, #285dba -21.52%, #122a54 116.38%);
  position: relative;
  overflow: hidden;
  color: #ffffff;
}

/* Figma: Frame 241 — main footer content row */

.footer-top {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 0 48px;
  gap: 193px;
  width: 100%;
  max-width: 1200px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 1;
}



/* Figma: Frame 210 — left block with logo + text */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 24px;
  width: 100%;
  max-width: 373px;
}

/* optional: main logo (Figma marked as display:none) */

.footer-brand-mark {
  width: 83.23px;   /* adjust based on PA logo's natural size */
  height: 91.63px;
  background-image: url("../images/PA_P_logo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}




/* replace white box with real SVG when ready */

.footer-brand-logo {
  width: 80.23px;
  height: 91.63px;
  /* background: #ffffff; */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px; /* if Figma has slight rounding */
}




/* text block */
.footer-brand-text {
  font-family: var(--pa-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 130%;
  color: #ffffff;
  opacity: 0.7;
  max-width: 373px; /* optional: Figma-accurate wrap */
}


/* Figma: Frame 215 — right columns */

.footer-columns {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0;
  gap: 48px;
  width: 100%;
  max-width: 628px;
}

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 16px;
}

.footer-column-title {
  font-family: var(--pa-font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 120%;
  color: #ffffff;
}

.footer-link {
  font-family: var(--pa-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 120%;
  color: #ffffff;
  opacity: 0.7;
  cursor: pointer;
}

/* Figma: Frame 213 + Frame 209 — contact + social icons */


.footer-social-row {
  display: flex;
  flex-direction: row;
  gap: 24px;
  margin-top: 18px; /* exact spacing from "Request a Demo" */
}

/* Circle button */
.footer-icon-facebook {
  position: absolute;
  width: 20px;
  height: 20px;
  left: calc(50% - 10px);
  top: calc(50% - 10px - 2px);
  background: url("../images/facebook.svg") center/contain no-repeat;
}

.footer-icon-linkedin {
  position: absolute;
  width: 20px;
  height: 20px;
  left: calc(50% - 10px);
  top: calc(50% - 10px - 2px);
  background: url("../images/Linkedin.svg") center/contain no-repeat;
}

.footer-icon-youtube {
  position: absolute;
  width: 20px;
  height: 20px;
  left: calc(50% - 10px);
  top: calc(50% - 10px - 2px);
  background: url("../images/youtube.svg") center/contain no-repeat;
}


/* Figma: Decorative background (background, Frame 281, Frame 282) */


/* ----------------------------------------------------------- */
/* FOOTER – Decorative Background (Figma: background, 281, 282) */
/* ----------------------------------------------------------- */

.footer-bg-large {
  position: absolute;
  width: 1439.45px;
  height: 954.97px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 25%);
  opacity: 0.03; /* identical softness as Figma */
  pointer-events: none;
  z-index: 0;
}

/* GRID OVERLAY (super soft white grid, not grey) */
.footer-grid::before,
.footer-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Vertical grid lines */
.footer-grid::before {
  background-image: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, 0.07),
    rgba(255, 255, 255, 0.07) 1px,
    transparent 1px,
    transparent 60px
  );
  opacity: 0.45; /* final visibility ≈ 3% */
}

/* Horizontal grid lines */
.footer-grid::after {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.07),
    rgba(255, 255, 255, 0.07) 1px,
    transparent 1px,
    transparent 60px
  );
  opacity: 0.45; /* final visibility ≈ 3% */
}



/* Footer floating squares (Figma: Rectangles 32–35) */
.footer-rect-32,
.footer-rect-33,
.footer-rect-34,
.footer-rect-35 {
  position: absolute;
  width: 66px;
  height: 59px;
  background: rgba(255, 255, 255, 0.04); /* ↓ from 0.12 → much lighter */
  border-radius: 4px;
  pointer-events: none;
  z-index: 0;
}


.footer-rect-32 {
  left: 193px;
  bottom: 80px; /* approximate from Figma bottom: 458.63 vs footer height */
}

.footer-rect-35 {
  left: 259px;
  bottom: 440px;
}

.footer-rect-34 {
  right: 215px;
  bottom: 20px;
}

.footer-rect-33 {
  right: 15px;
  bottom: 380px;
}

.footer-ellipse-851 {
  position: absolute;
  width: 296.71px;
  height: 107.69px;
  left: 9.79px;
  bottom: 458.63px;
  background: #75c9e3;
  filter: blur(40px);
  z-index: 0;
}

/* Figma: Frame 312 / Frame 313 — bottom row */

.footer-bottom {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0;
  gap: 48px;
  width: 100%;
  max-width: 1200px;
}

.footer-bottom-text {
  font-family: var(--pa-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #ffffff;
  opacity: 0.7;
}

.footer-bottom-links {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 24px;
}

.footer-bottom-link {
  font-family: var(--pa-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #ffffff;
  opacity: 0.7;
  cursor: pointer;
}


@media (max-width: 1200px) {
  .footer {
    padding: 72px 64px;
  }

  .footer-top {
    gap: 96px; /* reduce from 193px desktop spacing */
  }

  .footer-columns {
    gap: 32px;
    max-width: none; /* allow columns to shrink */
  }
}


@media (max-width: 992px) {
  .footer {
    padding: 64px 48px;
    gap: 32px;
  }

  .footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    padding-bottom: 32px;
  }

  .footer-columns {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 32px 48px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}


@media (max-width: 768px) {

  .footer {
    padding: 48px 32px;
    gap: 32px;
  }

  /* columns now stacked cleanly */
  .footer-columns {
    flex-direction: column;
    gap: 32px;
    width: 100%;
    max-width: none;
  }

  .footer-column {
    width: 100%;
  }

  /* brand text width */
  .footer-brand {
    max-width: 100%;
  }

  .footer-brand-text {
    font-size: 15px;
    max-width: 100%;
  }

  /* bottom row */
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .footer-bottom-links {
    flex-wrap: wrap;
    gap: 16px;
  }
}


@media (max-width: 480px) {

  .footer {
    padding: 40px 24px;
    gap: 24px;
  }

  .footer-brand-text {
    font-size: 14px;
  }

  /* compress column spacing */
  .footer-columns {
    gap: 24px;
  }

  .footer-column-title {
    font-size: 15px;
  }

  .footer-link {
    font-size: 15px;
  }

  /* social icons row */
  .footer-social-row {
    gap: 16px;
  }

  /* reduce floating decorative blocks */
  .footer-rect-32,
  .footer-rect-33,
  .footer-rect-34,
  .footer-rect-35 {
    width: 40px;
    height: 36px;
    opacity: 0.03;
  }

  /* reposition floating shapes */
  .footer-rect-32 { left: 40px; bottom: 20px; }
  .footer-rect-35 { left: 40px; bottom: 200px; }
  .footer-rect-34 { right: 40px; bottom: 10px; }
  .footer-rect-33 { right: 20px; bottom: 180px; }

  /* shrink ellipse glow */
  .footer-ellipse-851 {
    width: 200px;
    height: 60px;
    bottom: auto;
    top: 0;
    left: 0;
    opacity: 0.1;
  }
}

@media (max-width: 375px) {

  .footer {
    padding: 32px 20px;
  }

  .footer-columns {
    gap: 20px;
  }

  .footer-column-title {
    font-size: 14px;
  }

  .footer-link {
    font-size: 14px;
  }
}