/* =========================================================
   poland.pl — strona wizytówkowa
   Wdrożenie z projektu Adobe XD (POLAND_260918-dev.xd)

   Breakpointy wg Manuala:
     320–767 px   → typografia mobilna
     768–1366 px  → typografia desktopowa
     > 1366 px    → wielkości jak dla 1366 px
   ========================================================= */

/* ---------- 1. Kroje pisma ----------
   Space Grotesk i Inter są na wolnej licencji OFL.
   Pliki leżą w katalogu fonts/: woff2 jako podstawa, woff jako zapas
   dla starszych przeglądarek. Szczegóły w fonts/README.txt.          */

@font-face{
  font-family:"Space Grotesk";
  src:url("../fonts/SpaceGrotesk-Regular.woff2") format("woff2"),
      url("../fonts/SpaceGrotesk-Regular.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("../fonts/SpaceGrotesk-SemiBold.woff2") format("woff2"),
      url("../fonts/SpaceGrotesk-SemiBold.woff") format("woff");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/Inter-Regular.woff2") format("woff2"),
      url("../fonts/Inter-Regular.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}

/* ---------- 2. Tokeny ---------- */
:root{
  --white:#FFFFFF;
  --black:#000000;
  --red:#F40936;

  --display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --text:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

  --pad-x:21px;
  --pad-y:24px;
  --ease:.2s ease;
  --focus:#FFFFFF;
}

/* ---------- 3. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--text);
  font-size:16px;
  line-height:1.5;
  color:var(--black);
  background:var(--black);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,ul{margin:0}
ul{list-style:none;padding:0}
a{color:inherit}

/* widoczny fokus na każdym elemencie interaktywnym */
a:focus-visible,button:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:4px;
}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* =========================================================
   4. Ekran z wideo w tle (Main, 404)
   Header i hero przyklejone do górnej krawędzi,
   social i stopka do dolnej — zgodnie z Manualem.
   ========================================================= */

.screen{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:var(--pad-y) var(--pad-x);
  padding-block-start:calc(var(--pad-y) + env(safe-area-inset-top,0px));
  padding-block-end:calc(var(--pad-y) + env(safe-area-inset-bottom,0px));
  overflow:hidden;
  color:var(--white);
}

/* warstwa tła */
.bg{position:absolute;inset:0;z-index:0;background:#2A2A28}
.bg__media{width:100%;height:100%;object-fit:cover;display:block}
/* przyciemnienie — gwarantuje kontrast tekstu na każdej klatce */
.bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.22) 38%,rgba(0,0,0,.52) 100%);
}

.screen > *:not(.bg){position:relative;z-index:1}

/* Kolumna treści. Powyżej 1366 px układ nie rozjeżdża się na całą szerokość —
   zachowuje proporcje z widoku 1366 i centruje się w oknie (zgodnie z Manualem). */
.top,.bottom{width:100%;max-width:1240px;margin-inline:auto}

/* ---------- 5. Góra ekranu ---------- */
.top{display:flex;flex-direction:column;gap:0}

.brand{
  font-family:var(--display);font-weight:600;font-size:18px;line-height:1.2;
  text-decoration:none;border-bottom:2px solid var(--white);
  align-self:flex-start;padding-bottom:4px;
  transition:opacity var(--ease);
  z-index: 9999;
}
.brand:hover{opacity:.7}

.wordmark{
  font-family:var(--display);font-weight:600;
  /* Wielkości odczytane z artboardów (wysokość liter: 320→42px, 360→48px,
     768→106px, 1024→150px, 1366→207px). line-height .72 sprawia, że pudełko
     elementu pokrywa się z wysokością liter — dzięki temu odstępy liczą się
     tak samo jak w projekcie. */
  font-size:18.4vw;
  line-height:.72;letter-spacing:normal;
  margin-block:17px 0;
  /* Litera P ma własny lewy margines wewnątrz kroju. Przesunięcie o jego
     wartość ustawia tusz napisu w jednej linii z "poland.pl" powyżej —
     tak jak w projekcie. */
  margin-left:-.059em;
}

.tagline{
  font-family:var(--display);font-weight:600;
  font-size:18px;line-height:1.3;
  margin-top:14px;
}

/* ---------- 6. Dół ekranu ---------- */
.bottom{display:flex;flex-direction:column;gap:22px}

.lead{
  font-family:var(--display);font-weight:400;
  font-size:18px;line-height:1.35;max-width:26ch;
}

.socials{display:grid;grid-template-columns:1fr;column-gap:44px}
.socials li{position:relative}
/* Podkreślenia rysują się od lewej do prawej po wczytaniu strony,
   kolejno: Instagram, Facebook, X. Animacja trwa niecałe 2 s
   i odtwarza się raz — mieści się w wymaganiach WCAG 2.2.2. */
.socials li::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--white);
  transform-origin:left center;
  animation:line-draw .9s cubic-bezier(.65,0,.35,1) both;
  animation-delay:calc(.4s + var(--i,0) * .2s);
}
.socials li:nth-child(1){--i:0}
.socials li:nth-child(2){--i:1}
.socials li:nth-child(3){--i:2}
@keyframes line-draw{
  from{transform:scaleX(0)}
  to  {transform:scaleX(1)}
}

.socials a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--display);font-weight:600;font-size:28px;line-height:1.1;
  text-decoration:none;padding:10px 2px;
  transition:opacity var(--ease);
}
.socials a:hover{opacity:.72}
.socials a .arrow{
  flex:none;width:1.05em;height:1.05em;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
/* przesunięcie w jednostkach em: 25 px przy 50 px, 14 px na telefonie */
.socials a:hover .arrow,
.socials a:focus-visible .arrow{transform:translateX(.5em)}

/* ---------- 7. Stopka ---------- */
.foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;
  font-family:var(--text);font-size:12px;line-height:1.4;
}
.foot__right{display:flex;align-items:center;gap:20px}
.foot a,.foot button{
  color:var(--white);text-decoration:underline;text-underline-offset:3px;
  transition:opacity var(--ease);
}
.foot a:hover,.foot button:hover{opacity:.7}

/* przycisk zatrzymania tła — wymagany przez WCAG 2.2.2
   dla treści animowanej dłuższej niż 5 sekund            */
.bg-toggle{
  font:inherit;font-size:12px;
  background:none;border:0;padding:4px 2px;cursor:pointer;
}
/* gdy wideo się nie ładuje (reduced motion, oszczędzanie danych),
   przycisk nie ma czego zatrzymywać — chowamy go                   */
.bg-toggle[hidden]{display:none !important}

/* ---------- 8. Ekran 404 ---------- */
.error-msg{
  font-family:var(--display);font-weight:400;
  font-size:18px;line-height:1.35;
}
.back-link{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--display);font-weight:600;font-size:28px;line-height:1.1;
  text-decoration:none;padding:10px 2px;
  border-bottom:2px solid var(--white);
  transition:opacity var(--ease);
}
.back-link:hover{opacity:.72}
.back-link .arrow{width:1.05em;height:1.05em;flex:none;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.back-link:hover .arrow,.back-link:focus-visible .arrow{transform:translateX(.5em)}

/* =========================================================
   9. Podstrona Policies — dokument tekstowy, biała
   ========================================================= */
.doc{
  background:var(--white);color:var(--black);
  min-height:100vh;
  display:flex;flex-direction:column;
  padding:var(--pad-y) var(--pad-x);
  padding-block-end:calc(var(--pad-y) + env(safe-area-inset-bottom,0px));
}
.doc .brand{border-bottom-color:var(--black)}
.doc__head{border-bottom:3px solid var(--black);padding-bottom:14px;margin-bottom:40px}
.doc__title{
  font-family:var(--display);font-weight:600;
  font-size:clamp(34px,7vw,64px);line-height:1.05;letter-spacing:-.02em;
  margin-top:10px;
}
.doc__body{flex:1 0 auto;max-width:74ch;margin-inline:auto;width:100%}
.doc__body h2{
  font-family:var(--display);font-weight:600;
  font-size:22px;line-height:1.25;margin-top:44px;margin-bottom:14px;
}
.doc__body h2:first-child{margin-top:0}
.doc__body p{font-size:16px;line-height:1.55;margin-bottom:14px}
.doc__body a{color:var(--black);text-underline-offset:3px}
.doc__body a:hover{text-decoration:none}
.doc .foot{
  color:var(--black);margin-top:56px;padding-top:20px;
  border-top:1px solid #DDD;
}
.doc .foot a{color:var(--black)}
.doc a:focus-visible{outline-color:var(--black)}

/* =========================================================
   10. Tablet i desktop — od 768 px typografia desktopowa
   ========================================================= */
@media (min-width:768px){
  :root{--pad-x:63px;--pad-y:40px}

  /* 768→151px, 1024→214px, 1366→296px — przebieg odczytany z artboardów */
  .wordmark{font-size:calc(23.36vw - 32.7px);margin-block:36px 0}
  .brand{font-size:25px}
  .tagline{margin-top:28px}
  .tagline{font-size:25px}
  .lead{font-size:25px;max-width:none}

  .bottom{gap:30px}
  .socials a{font-size:clamp(34px,3.7vw,50px)}

  .foot{font-size:12px}
  .error-msg{font-size:25px}
  .back-link{font-size:clamp(34px,3.7vw,50px)}

  .doc__body h2{font-size:28px}
}

@media (min-width:1024px){
  .socials{grid-template-columns:repeat(2,1fr)}
  /* przy układzie wielokolumnowym strzałka stoi tuż za nazwą serwisu */
  .socials a{justify-content:flex-start;gap:24px}
}

/* powyżej 1366 px wielkości zostają jak dla 1366 px, kolumna centruje się */
@media (min-width:1366px){
  .socials{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1367px){
  .wordmark{font-size:286px}
  .socials a{font-size:50px}
  .back-link{font-size:50px}
}

/* =========================================================
   11. Ograniczenie animacji
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  /* pseudo-elementy trzeba wymienić jawnie — selektor * ich nie obejmuje */
  *,*::before,*::after{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}