/* Links (bio-link) page — standalone minimal layout, no site header or footer */

body.links-page {
  min-height: 100vh; min-height: 100dvh;
  background: var(--wab-dark-water); color: #fff;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12px 0 24px; position: relative; overflow-x: hidden;
}

/* Floating language toggle — top-right corner */
.links-lang {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  display: inline-flex; gap: 2px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-pill); padding: 3px;
}
.links-lang button, .links-lang a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 11px; font-size: 12px; font-weight: 800;
  letter-spacing: .04em; border-radius: var(--radius-pill);
  color: rgba(255,255,255,.7); background: transparent; border: none; cursor: pointer;
  text-decoration: none; transition: all .2s;
}
.links-lang button:hover, .links-lang a:hover { color: #fff; }
.links-lang button.is-active, .links-lang a.is-active { background: #fff; color: var(--wab-dark-water); }

/* Card container — single centered column */
.links-card { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 18px; align-items: stretch; }

/* On small screens — pills touch screen edges; padding applied to text elements only */
@media (max-width: 599px) {
  body.links-page { padding-left: 8px; padding-right: 8px; }
  body.links-page main { width: 100%; }
  .links-card { max-width: none; padding: 0; }
  .links-logo, .links-section-label, .links-legal { padding-left: 20px; padding-right: 20px; }
  .links-section-label { font-size: 12px; }
  body.links-pills .links-link { border-radius: var(--radius-md); }
}

/* Logo */
.links-logo { display: flex; align-items: center; justify-content: center; margin-bottom: -6px; border: none; }
.links-logo img { width: 132px; height: 132px; }

/* Group labels */
.links-section-label {
  font-size: 10px; font-weight: 800; letter-spacing: var(--tracking-claim);
  text-transform: uppercase; color: #fff; text-align: center; margin: 4px 0 -4px;
}

/* Link groups */
.links-group { display: flex; flex-direction: column; gap: 10px; }

/* Legal links */
.links-legal { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 24px; }
.links-legal a { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.55); text-decoration: none; border: none; letter-spacing: .02em; transition: color .2s; }
.links-legal a:hover { color: var(--accent); }

/* Pills variant (default) */
body.links-pills .links-link {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-pill); color: #fff; text-decoration: none; font-weight: 700; font-size: 15px;
  transition: background .2s, transform .25s cubic-bezier(.22,1,.36,1), border-color .2s;
}
body.links-pills .links-link:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
body.links-pills .links-link .ic { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
body.links-pills .links-link .ic svg, body.links-pills .links-link .ic img { width: 22px; height: 22px; }
body.links-pills .links-link .label { flex: 1; }
body.links-pills .links-link .arrow { margin-left: auto; width: 16px; height: 16px; opacity: .55; transition: transform .25s, opacity .25s; }
body.links-pills .links-link:hover .arrow { transform: translateX(3px); opacity: 1; }

/* Photo background — applied via inline CSS (URL resolved in PHP) */
body.bg-photo {
  background-color: var(--wab-dark-water);
  background-attachment: fixed;
}
body.bg-photo .links-link { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(255,255,255,.14); }

/* Desktop — wider card, pills wrap into multiple per row */
@media (min-width: 600px) {
  body.links-page { align-items: flex-start; padding: 40px 32px 24px; }
  .links-card { max-width: 720px; }
  .links-section-label { font-size: 13px; }
  .links-legal { flex-direction: row; justify-content: center; gap: 20px; margin-top: 8px; }

  .links-group { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  body.links-pills .links-link { flex: 1 1 200px; }
  .links-link .arrow { display: none; }
}