/* mateuszmaslanka.pl - wersja statyczna, bez WordPressa.
   Wymiary przeniesione 1:1 z motywu Bridge (pomiary 1440 px i 390 px, 2026-10-31).
   Breakpointy: do 1000 px tryb mobilny (menu, hero), do 767 px kolumny jedna pod drugą. */

@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/1Ptsg8zYS_SKggPNyCg4Q4FqPfE.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/1Ptsg8zYS_SKggPNyCg4TYFq.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/1Ptsg8zYS_SKggPNyCg4Q4FqPfE.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/1Ptsg8zYS_SKggPNyCg4TYFq.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/1Ptsg8zYS_SKggPNyCg4Q4FqPfE.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/1Ptsg8zYS_SKggPNyCg4TYFq.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #000;
  --heading: #303030;
  --title: #272727;
  --text: #777;
  --text-dark: #333;
  --muted: #b5b5b5;
  --muted-mobile: #5c5c5c;
  --accent: #02b3ff;
  --line: #eaeaea;
  --bg: #fff;
  --bg-soft: #fafafa;
  --bg-footer: #f0f0f0;
  --header-h: 116px;
  --header-sticky-h: 80px;
  --wrap: min(1300px, 100% - 140px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 14px/26px 'Raleway', sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color .15s ease-out; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.wrap { width: var(--wrap); margin: 0 auto; }
.i { display: block; fill: currentColor; height: 1em; width: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[id] { scroll-margin-top: var(--header-sticky-h); }

/* ---------- nagłówek ---------- */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 100; height: var(--header-h); background: #fff; }
.site-header__inner { display: flex; align-items: center; height: 100%; padding: 0 25px 0 45px; }
.logo img { width: auto; height: 105px; transition: height .2s ease-out; }
.nav { margin-left: auto; }
.nav ul { display: flex; }
.nav a { display: block; padding: 11px 16px; font-size: 12px; font-weight: 700; letter-spacing: 2px; line-height: normal; text-transform: uppercase; color: var(--ink); }
.nav a:hover, .nav a.is-current { color: var(--accent); }
.header-social { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: 20px; color: var(--ink); font-size: 18px; }
.menu-toggle { display: none; }

/* przyklejony nagłówek (desktop) pojawia się po przewinięciu jednego ekranu */
.site-header.is-stuck { position: fixed; height: var(--header-sticky-h); box-shadow: 0 1px 3px rgba(0, 0, 0, .11); animation: header-in .3s ease-out; }
.site-header.is-stuck .logo img { height: 70px; }
@keyframes header-in { from { transform: translateY(-100%); } to { transform: none; } }

/* ---------- hero ---------- */
.hero { position: relative; height: 100vh; min-height: 640px; background: url(img/hero.webp) 50% 0 / cover no-repeat; }
.hero__content { position: absolute; top: 20%; left: 0; right: 0; }
.hero__text { width: 50%; color: var(--ink); text-shadow: rgba(0, 0, 0, .4) 1px 1px 2px; }
.hero h1 { margin: 24px 0 20px; font-size: 72px; line-height: 77px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
.hero p { margin: 10px 0 15px; font-size: 17px; line-height: 23px; }
.hero__photo { display: none; }

/* ---------- nagłówki sekcji ---------- */
.section-title { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--heading); text-align: center; }

/* ---------- Skills ---------- */
.skills { padding: 140px 0 72px; }
/* odstępy jak w WordPressie: 56 px pod każdą kompetencją, 64 + 84 px między rzędami */
.skills__grid { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 148px; margin: 85px -15px 0; }
.skill { padding: 0 15px 56px; text-align: center; }
.skill__icon { display: flex; justify-content: center; color: #555; font-size: 60px; transition: color .15s ease-out; }
.skill__icon:hover { color: var(--accent); }
.skill h3 { margin-top: 40px; font-size: 18px; line-height: 20px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--heading); }
.skill p { margin-top: 25px; }

/* ---------- Know-how ---------- */
.knowhow { background: var(--bg-soft); padding: 121px 0 138px; }
.slider { position: relative; margin-top: 182px; }
.slider__viewport { overflow: hidden; }
.slider__track { display: flex; transition: transform .6s cubic-bezier(.25, .8, .25, 1); touch-action: pan-y; }
.slide { flex: 0 0 100%; display: grid; grid-template-columns: 524px 1fr; column-gap: 30px; align-items: start; }
.slide__card { min-height: 576px; padding: 100px 38px 32px 30px; background: #fff; text-align: right; }
.slide h3 { font-size: 38px; line-height: 50px; font-weight: 300; letter-spacing: -.38px; color: var(--title); }
.slide p { margin-top: 32px; font-size: 15px; line-height: 26px; color: var(--muted); }
.slide__img img { width: 100%; }
.dots { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: #cfcfcf; cursor: pointer; }
.dots button[aria-current="true"] { background: var(--heading); }

/* ---------- Recommendations ---------- */
.recs { padding: 140px 0 60px; }
.recs__inner { width: min(590px, 100%); margin: 50px auto 0; }
.recs__viewport { display: grid; }
.rec { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s ease-out, visibility .6s; text-align: center; }
.rec.is-active { opacity: 1; visibility: visible; }
.rec blockquote { margin: 0; font-size: 20px; line-height: 35px; color: var(--ink); }
.rec figcaption { margin: 45px 0 11px; font-size: 13px; line-height: 20px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); }
.rec figcaption a, .rec figcaption span { display: block; color: var(--accent); }
.rec figcaption a:hover { color: var(--ink); }
.arrows { display: flex; justify-content: center; gap: 6px; margin-top: 9px; }
.arrows button { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 2px solid var(--heading); border-radius: 4px; background: transparent; color: var(--ink); font-size: 16px; cursor: pointer; }
.arrows button:hover { background: var(--heading); color: #fff; }

/* ---------- stopka ---------- */
.site-footer { background: var(--bg-footer); padding: 79px 0 95px; }
.site-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 25px; }
.site-footer h2 { margin-bottom: 18px; font-size: 18px; line-height: 20px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--heading); }
.site-footer h2 + ul, .site-footer h2 + p { margin-top: 0; }
.footer-menu li { margin: 8px 0; }
.footer-menu a { font-size: 16px; line-height: 22px; letter-spacing: 1px; color: var(--text-dark); }
.footer-menu + h2 { margin-top: 30px; }
.footer-social { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: -10px; font-size: 18px; color: var(--text-dark); }
.footer-contact p { font-size: 14px; line-height: 22px; color: var(--text-dark); }

/* ---------- podstrony ---------- */
.page-title { display: flex; align-items: center; justify-content: center; height: 374px; padding-top: var(--header-h); background: url(img/title-bg.webp) 50% 0 / 1920px auto fixed; }
.page-title h1 { font-size: 45px; line-height: 47px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: #fff; text-align: center; }
.page-body { width: min(857px, 100% - 140px); margin: 0 auto; padding: 170px 0 50px; }
.page-body h3 { font-size: 20px; line-height: 34px; font-weight: 300; color: var(--heading); }
.page-body a { color: var(--heading); }
.page-body a:hover { color: var(--accent); }
.page-body code { font-family: monospace; }
.page-body--empty { padding: 120px 0; text-align: center; }

/* ---------- baner cookies, przycisk do góry ---------- */
.cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; padding: 13px 20px; background: #000; color: #fff; font-size: 13px; line-height: 20px; text-align: center; }
.cookie[hidden] { display: none; }
.cookie a { color: #fff; text-decoration: underline; }
.cookie button { margin: 0 0 0 10px; padding: 2px 10px; border: 0; border-radius: 3px; background: #006dcc; color: #fff; font: 12px/20px sans-serif; cursor: pointer; }
.to-top { position: fixed; right: 25px; bottom: 65px; z-index: 90; display: flex; align-items: center; justify-content: center; width: 49px; height: 49px; border: 2px solid #e0e0e0; border-radius: 50%; background: #fff; color: #cdcdcd; font-size: 16px; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- tryb mobilny: do 1000 px ---------- */
@media (max-width: 1000px) {
  :root { --wrap: calc(100% - 48px); }
  [id] { scroll-margin-top: 0; }  /* nagłówek mobilny nie jest przyklejony */
  .site-header, .site-header.is-stuck { position: relative; height: 101px; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); animation: none; }
  .site-header__inner { position: relative; justify-content: center; padding: 0 15px; }
  .logo img, .site-header.is-stuck .logo img { height: 50px; }
  .menu-toggle { position: absolute; left: 15px; top: 0; display: flex; align-items: center; height: 100%; padding: 0 6px 0 0; border: 0; background: none; color: #303030; font-size: 27px; cursor: pointer; }
  .header-social { display: none; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 0 15px; background: #fff; box-shadow: 0 6px 8px rgba(0, 0, 0, .06); display: none; }
  .nav.is-open { display: block; }
  .nav ul { display: block; }
  .nav li + li { border-top: 1px solid var(--line); }
  .nav a { padding: 10px 0; font-size: 11px; line-height: 26px; letter-spacing: 1.5px; color: var(--heading); }

  .hero { height: auto; min-height: 0; background: none; }
  .hero__photo { display: block; height: min(92vw, 640px); background: url(img/hero.webp) 80% 25% / cover no-repeat; }
  .hero__content { position: static; padding: 32px 0 40px; }
  .hero__text { width: auto; text-shadow: none; }
  .hero h1 { margin: 0 0 20px; font-size: 38px; line-height: 53px; letter-spacing: 2px; }
  .hero p { line-height: 23.8px; }

  .section-title { font-size: 28px; line-height: 31px; letter-spacing: 2px; }
  .skills { padding: 64px 0 40px; }
  .skills__grid { grid-template-columns: repeat(2, 1fr); row-gap: 30px; column-gap: 24px; margin: 52px 0 0; }
  .skill { display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; padding: 0; text-align: left; }
  .skill__icon { grid-row: span 2; justify-content: flex-start; font-size: 40px; margin-top: 2px; }
  .skill h3 { margin: 0; line-height: 1.35; }
  .skill p { margin-top: 6px; font-size: 14px; line-height: 22px; color: var(--muted-mobile); }

  .knowhow { padding: 56px 0 48px; }
  .slider { margin-top: 24px; }
  .slide { display: flex; flex-direction: column; }
  .slide__card { order: 2; min-height: 0; padding: 24px 22px 8px; text-align: left; }
  .slide h3 { font-size: 26px; line-height: 34px; letter-spacing: 0; }
  .slide p { margin: 16px 0 16px; line-height: 25px; color: var(--muted-mobile); }
  .dots { margin-top: 24px; }

  .recs { padding: 64px 0 48px; }
  .rec { text-align: left; }
  .rec blockquote { font-size: 17px; line-height: 28px; }
  .rec figcaption { margin-top: 24px; font-size: 12px; }
  .rec figcaption a, .rec figcaption span { font-weight: 400; letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; }

  .site-footer { padding: 56px 0 24px; }
  .site-footer h2 { margin-bottom: 12px; }
  .footer-menu li { margin: 0; }
  .footer-menu a { font-size: 15px; line-height: 36px; }
  .footer-contact p { line-height: 35px; }

  .page-title { height: auto; padding: 36px 24px; background-attachment: scroll; background-size: cover; }
  .page-title h1 { font-size: 28px; line-height: 30px; letter-spacing: 2px; }
  .page-body { width: calc(100% - 48px); padding: 40px 0 40px; }
  .page-body h3 { font-size: 18px; line-height: 30px; }

  .cookie button { display: block; margin: 8px auto 0; }
  .to-top { right: 25px; }
}

@media (min-width: 768px) and (max-width: 1000px) {
  .logo img, .site-header.is-stuck .logo img { height: 70px; }
}

/* ---------- telefon: do 767 px ---------- */
@media (max-width: 767px) {
  .skills__grid { grid-template-columns: 1fr; }
  .skill { padding: 0 6px; }
  .site-footer__cols { grid-template-columns: 1fr; row-gap: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slider__track, .rec, .to-top, .site-header.is-stuck { transition: none; animation: none; }
}