/*
 * privaatsustingimused.html lehe-spetsiifiline CSS
 */

/* Lehe taust (body::before pseudoelemendiga) */
html,
body {
  background: transparent;
}

body {
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--color-bg-soft) url("../../assets/page-heroes/valdkonnad-hero.webp") center center / cover no-repeat;
}

/* Sisu-paigutus */
.content {
  width: min(1240px, 92vw);
  margin: 0 auto;
  padding: clamp(54px, 7vw, 94px) 0 84px;
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .content {
    width: min(100% - 32px, 920px);
  }
}

/* Hero ja kicker */
.content > .hero {
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0 0 clamp(32px, 4vw, 48px);
  padding: 0;
  background: transparent;
  display: block;
}

.content > .hero .kicker {
  width: 100%;
  margin: 0;
  text-transform: uppercase;
  text-align: center;
  font-size: clamp(4.13rem, 6.89vw, 5.51rem);
  color: var(--menu-hover);
  -webkit-text-fill-color: var(--menu-hover);
  letter-spacing: 0.07em;
  line-height: 0.86;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 8px var(--color-shadow-dark-42);
}

html[lang="ru"] .content > .hero .kicker {
  font-size: clamp(1.24rem, 3.45vw, 3.62rem);
  letter-spacing: 0.035em;
  line-height: 1;
}

/* Privaatsuse tekstipaneel */
.panel {
  border: 1px solid var(--color-line-on-dark);
  background: rgba(31, 31, 31, 0.44);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  padding: clamp(24px, 3.2vw, 36px) clamp(18px, 2.2vw, 24px) clamp(18px, 2.2vw, 26px) clamp(36px, 4vw, 56px);
}

.panel p,
.panel li {
  color: rgba(255, 244, 236, 0.76);
  font-size: clamp(1.04rem, 1.18vw, 1.16rem);
  line-height: 1.72;
}

.panel p {
  margin: 0 0 1rem;
}

.panel h2 {
  margin: 2rem 0 0.7rem;
  color: var(--menu-hover);
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.panel ul {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
}

.panel a {
  color: var(--color-white);
  text-decoration: none;
  border-bottom: 1px solid var(--color-line-on-dark-medium);
}

.panel a[href^="mailto:"] {
  position: relative;
  display: inline-block;
  color: transparent;
  background: linear-gradient(
    90deg,
    var(--color-panel-glass-light) 0,
    var(--color-panel-glass-light) 50%,
    var(--color-white-88) 50%,
    var(--color-white-88) 100%
  );
  background-size: 220% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
  border-bottom: 0;
  transition: background-position 340ms ease;
}

.panel a[href^="mailto:"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.12em;
  height: 1px;
  background: var(--color-white-34);
  transform: scaleX(0.18);
  transform-origin: left center;
  transition: transform 340ms cubic-bezier(0.16, 1, 0.3, 1), background-color 340ms ease;
}

.panel a[href^="mailto:"]:hover,
.panel a[href^="mailto:"]:focus-visible {
  background-position: 0 0;
  outline: none;
}

.panel a[href^="mailto:"]:hover::after,
.panel a[href^="mailto:"]:focus-visible::after {
  transform: scaleX(1);
  background: var(--color-panel-glass-light);
}