/* =========================================================
   footer-v17.css
   PUDELVERSE Footer (Fixed Light / Ethereum-like Columns)
   - Canonical structure: /components/footer-v14.html
   - Goals:
     1) Always keep horizontal gutters (even on huge screens)
     2) Stable multi-column grid with good gaps
     3) Mobile-first stacking + touch targets
     4) Safety overrides against page-level resets
   ========================================================= */

/* -----------------------------
   Root footer skin (fixed light)
   ----------------------------- */

.pv-footer--fixedlight{
  background: #ffffff !important;
  color: #141417 !important;
  border-top: 1px solid #e7e7ec !important;

  /* Outer breathing room (prevents "stuck to edge" feeling) */
  padding: 18px 0 26px;
}

.pv-footer--fixedlight *{
  color: inherit;
  box-sizing: border-box;
}

/* -----------------------------
   Container (the key)
   ----------------------------- */

.pv-footer__container{
  /* Use a slightly tighter default than 1200
     so the footer doesn't feel like "empty stadium" on ultra-wide */
  max-width: 1120px;
  margin: 0 auto;

  /* Stronger side gutters */
  padding: 26px 24px 18px;
}

/* iOS safe area */
@supports (padding: max(0px)){
  .pv-footer__container{
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }
}

/* -----------------------------
   Top row: brand + social
   ----------------------------- */

.pv-footer__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;

  padding-bottom: 16px;
  border-bottom: 1px solid #ececf2;
}

.pv-footer__brand{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
  min-width: 0;
}

/* P logo: no border, transparent */
.pv-footer__brandIcon{
  width: 32px;
  height: 32px;
  border-radius: 0;
  border: 0;
  background: transparent;
  display:block;
}

.pv-footer__brandSub{
  font-size: 12px;
  color: #6a6a73 !important;
  letter-spacing: 0.06em;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  max-width: 720px;
}

/* Social icons (no border box) */
.pv-footer__social{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}

/* Tap area */
.pv-footer__iconBtn{
  width: 40px;
  height: 40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;

  background: transparent;
  border: 0;
  border-radius: 12px;

  transition: transform 160ms ease, background 160ms ease;
}

.pv-footer__iconBtn:hover{
  transform: translateY(-1px);
  background: rgba(20,20,23,0.04);
}

.pv-footer__iconBtn:focus-visible{
  outline: 2px solid rgba(34, 97, 255, 0.55);
  outline-offset: 2px;
}

.pv-footer__icon{
  width: 34px;
  height: 34px;
  display:block;
  opacity: 0.92;
}

/* -----------------------------
   Groups: multi-column grid
   ----------------------------- */

.pv-footer__groups{
  padding-top: 18px;
  display:grid;

  /* Mobile-first: 1 col */
  grid-template-columns: 1fr;

  /* More breathing room */
  gap: 22px 28px;
  align-items:start;
}

@media (min-width: 860px){
  .pv-footer__groups{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
  }
}

@media (min-width: 1120px){
  .pv-footer__groups{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px 28px;
  }
}

/* Extra large screens: slightly wider container */
@media (min-width: 1400px){
  .pv-footer__container{
    max-width: 1200px;
  }
}

/* Group */
.pv-footer__group{
  padding: 0;
  min-width: 0;
}

.pv-footer__groupTitle{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #141417 !important;

  margin: 0 0 10px;
}

/* Links */
.pv-footer__links{
  display:grid;
  gap: 10px;
}

.pv-footer__link{
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration:none;
  color: #55565f !important;
  line-height: 1.45;

  /* Long text safety */
  word-break: break-word;
  overflow-wrap: anywhere;

  /* Touch rhythm */
  padding: 2px 0;
}

.pv-footer__link:hover{
  color:#141417 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Better tap targets on touch devices */
@media (hover: none){
  .pv-footer__link{
    padding: 6px 0;
  }
}

/* -----------------------------
   Bottom row
   ----------------------------- */

.pv-footer__bottom{
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid #ececf2;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;

  font-size: 12px;
  color: #6a6a73 !important;
}

.pv-footer__bottomLeft{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.pv-footer__dot{ opacity: 0.6; }

.pv-footer__bottomLink{
  text-decoration:none;
  color:#6a6a73 !important;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pv-footer__bottomLink:hover{
  color:#141417 !important;
}

.pv-footer__bottomRight{
  color:#6a6a73 !important;
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.pv-footer__mid{ opacity: .65; }

/* -----------------------------
   Tablet / Mobile tuning
   ----------------------------- */

@media (max-width: 920px){
  .pv-footer__container{
    padding: 22px 16px 16px;
  }

  .pv-footer__top{
    flex-direction: column;
    align-items:flex-start;
  }

  .pv-footer__brandSub{
    max-width: 100%;
    white-space: normal;
  }

  /* Keep icons aligned right (as you intended) */
  .pv-footer__social{
    align-self:flex-end;
  }
}

@media (max-width: 640px){
  .pv-footer--fixedlight{
    padding: 14px 0 22px;
  }

  .pv-footer__container{
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Force single column */
  .pv-footer__groups{
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .pv-footer__groupTitle{
    margin-bottom: 8px;
  }

  .pv-footer__iconBtn{
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .pv-footer__icon{
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 420px){
  .pv-footer__iconBtn{
    width: 40px;
    height: 40px;
  }
  .pv-footer__icon{
    width: 32px;
    height: 32px;
  }
}

/* =========================================================
   HARD SAFETY PATCH
   - If some page CSS resets footer or forces 0 padding,
     these restore expected layout.
   ========================================================= */

footer.pv-footer.pv-footer--fixedlight{
  padding: 18px 0 26px !important;
}

footer.pv-footer.pv-footer--fixedlight .pv-footer__container{
  margin-left: auto !important;
  margin-right: auto !important;
}