/* ================================================================
   PAVYZDYS — asmeninis treneris „Ritmas"
   Savarankiškas stilius. Nenaudoja nei pagrindinės svetainės, nei
   kitų dviejų pavyzdžių CSS.

   Charakteris, kuriuo skiriasi nuo kitų trijų:
     · šviesus šaltas fonas su vienu ryškiu oranžiniu akcentu
     · sunkus sisteminis grotesk'as, kursyvas kaip judesio ženklas
     · hero — nuotrauka per visą plotį su tekstu ant jos
     · planai kaip trys lyginamos kortelės, viena išskirta
     · savaitės tvarkaraštis lentele
   ================================================================ */

@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter-latin.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 {
  --sniegas:  #f3f4f6;
  --sniegas-2:#e6e8ec;
  --anglis:   #101216;
  --anglis-2: #2b2f37;
  --pilka:    #6b7280;
  --ugnis:    #f2541b;
  --linija:   #d6d9df;

  /* Sunkus grotesk'as ateina iš sistemos — Inter projekte yra tik 400 svorio,
     o šiam pavyzdžiui reikia storo. */
  --sunkus: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --tekstas: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --plotis: 1180px;
  --krastas: clamp(20px, 5vw, 56px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--sniegas);
  color: var(--anglis);
  font-family: var(--tekstas);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* height: auto BŪTINA. HTML height="1152" naršyklėje veikia kaip
   height: 1152px, tad be šito nuotraukos tempiamos iki atributo aukščio. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.vidus { max-width: var(--plotis); margin: 0 auto; padding-inline: var(--krastas); }

h1, h2, h3, .storas {
  font-family: var(--sunkus); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.05;
  overflow-wrap: break-word; text-wrap: balance;
}
/* pretty neleidžia paskutiniam žodžiui likti vienam eilutėje */
p, .ivadas, li { text-wrap: pretty; }
h1 { font-size: clamp(38px, 6vw, 74px); }
h2 { font-size: clamp(28px, 3.8vw, 44px); }
h3 { font-size: 20px; line-height: 1.25; }
em { font-style: italic; color: var(--ugnis); }

.zyme {
  font-family: var(--sunkus); font-weight: 700; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ugnis);
}
.ivadas { color: var(--pilka); max-width: 56ch; font-size: 18px; margin-top: 14px; }

/* ---------------- Demo juosta ---------------- */

.demo {
  background: var(--anglis); color: var(--sniegas);
  font-size: 13px; padding: 10px var(--krastas);
  display: flex; gap: 8px 22px; justify-content: space-between; flex-wrap: wrap;
}
.demo a { color: var(--ugnis); font-weight: 600; }

/* ---------------- Viršus ---------------- */

.virsus { position: sticky; top: 0; z-index: 50; background: var(--sniegas); border-bottom: 1px solid var(--linija); }
.virsus .vidus { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 14px; }
.zenklas { font-family: var(--sunkus); font-weight: 800; font-size: 21px; text-decoration: none; letter-spacing: -.02em; }
.zenklas i { font-style: italic; color: var(--ugnis); }
.meniu { display: flex; align-items: center; gap: 26px; font-size: 15px; }
.meniu a { text-decoration: none; color: var(--pilka); }
.meniu a:hover { color: var(--anglis); }
@media (max-width: 900px) { .meniu a:not(.cta) { display: none; } }

.cta {
  font-family: var(--sunkus); font-weight: 700; font-size: 14.5px;
  background: var(--ugnis); color: #fff !important; padding: 11px 20px;
  border-radius: 2px; text-decoration: none;
}
.cta:hover { background: #d5410c; }

/* ---------------- Hero: nuotrauka per visą plotį ---------------- */

.hero { position: relative; }
.hero img { width: 100%; height: clamp(400px, 62vh, 620px); object-fit: cover; }
.hero .uzdanga {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(16,18,22,.88) 0%, rgba(16,18,22,.62) 46%, rgba(16,18,22,.15) 100%);
}
.hero .turinys {
  position: absolute; inset: 0; display: flex; align-items: center;
  color: var(--sniegas);
}
/* Be width:100% flex elementas ima plotį iš turinio ir išsilieja pro kraštą. */
.hero .turinys > .vidus { width: 100%; min-width: 0; }
.hero h1 { max-width: 15ch; margin: 14px 0 18px; }
.hero p { max-width: 42ch; color: #d3d6dc; font-size: 18px; }
.hero .mygtukai { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
@media (max-width: 700px) {
  .hero img { height: 560px; }
  .hero .uzdanga { background: linear-gradient(180deg, rgba(16,18,22,.55) 0%, rgba(16,18,22,.9) 65%); }
}

.mygtukas {
  font-family: var(--sunkus); font-weight: 700; font-size: 15px;
  padding: 14px 26px; border-radius: 2px; text-decoration: none;
  background: var(--ugnis); color: #fff; border: 2px solid var(--ugnis);
  cursor: pointer; transition: background .16s ease, color .16s ease;
}
.mygtukas:hover { background: transparent; color: var(--ugnis); }
.mygtukas.sviesus { background: transparent; color: var(--sniegas); border-color: rgba(255,255,255,.5); }
.mygtukas.sviesus:hover { background: var(--sniegas); color: var(--anglis); border-color: var(--sniegas); }

/* ---------------- Skaičių juosta ---------------- */

.skaiciai { background: var(--anglis); color: var(--sniegas); }
.skaiciai .vidus { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 26px; padding-block: 34px; }
.skaiciai b { display: block; font-family: var(--sunkus); font-weight: 800; font-size: 40px; letter-spacing: -.04em; }
.skaiciai b i { font-style: italic; color: var(--ugnis); }
.skaiciai span { font-size: 14px; color: #9aa0ab; }

/* ---------------- Sekcijos ---------------- */

.dalis { padding: clamp(56px, 8vw, 100px) 0; }
.dalis.pilka { background: var(--sniegas-2); }
.dalis > .vidus > header { margin-bottom: clamp(30px, 4vw, 46px); }
.dalis > .vidus > header h2 { margin-top: 10px; }

/* ---------------- Planai: trys lyginamos kortelės ---------------- */

.planai { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .planai { grid-template-columns: 1fr; } }

.planas {
  background: #fff; border: 1px solid var(--linija); border-radius: 3px;
  padding: clamp(24px, 3vw, 32px); display: flex; flex-direction: column; gap: 14px;
}
.planas.issskirta {
  background: var(--anglis); color: var(--sniegas); border-color: var(--anglis);
  position: relative;
}
@media (min-width: 901px) { .planas.issskirta { margin-top: -14px; padding-block: calc(clamp(24px, 3vw, 32px) + 14px); } }
.planas.issskirta .ivadas, .planas.issskirta li { color: #b9bec8; }
.planas .antgalvis { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.planas .kaina { font-family: var(--sunkus); font-weight: 800; font-size: 30px; letter-spacing: -.03em; white-space: nowrap; }
/* white-space: normal būtina — kitaip paaiškinimas paveldi nowrap iš .kaina
   ir kortelė nebegali susitraukti siaurame ekrane. */
.planas .kaina small {
  font-family: var(--tekstas); font-weight: 400; font-size: 13px; color: var(--pilka);
  display: block; letter-spacing: 0; white-space: normal;
}
.planas.issskirta .kaina small { color: #9aa0ab; }
.planas ul { list-style: none; display: grid; gap: 9px; font-size: 15.5px; }
.planas li { padding-left: 20px; position: relative; }
.planas li::before { content: '—'; position: absolute; left: 0; color: var(--ugnis); }
.planas .mygtukas { text-align: center; margin-top: auto; }

.zenkliukas {
  position: absolute; top: -11px; left: clamp(24px, 3vw, 32px);
  background: var(--ugnis); color: #fff; font-family: var(--sunkus); font-weight: 700;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px;
}

/* ---------------- Tvarkaraštis ---------------- */

.tvarkarastis { border-top: 2px solid var(--anglis); }
.tvarkarastis .eile {
  display: grid; grid-template-columns: 120px 1fr auto; gap: 12px 24px;
  padding: 16px 0; border-bottom: 1px solid var(--linija); align-items: baseline;
}
@media (max-width: 640px) { .tvarkarastis .eile { grid-template-columns: 1fr; gap: 2px; } }
.tvarkarastis .diena { font-family: var(--sunkus); font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.tvarkarastis .ka { color: var(--anglis); }
.tvarkarastis .laikas { display: flex; gap: 6px; flex-wrap: wrap; }
.tvarkarastis .laikas b {
  font-family: var(--sunkus); font-weight: 700; font-size: 13.5px;
  padding: 5px 11px; border: 1px solid var(--linija); border-radius: 2px;
  background: #fff; color: var(--anglis);
}
.tvarkarastis .laikas b.uzimta {
  background: transparent; border-style: dashed; color: var(--pilka);
  text-decoration: line-through; text-decoration-color: var(--ugnis);
}

/* ---------------- Savaičių kortelės ---------------- */
/* Sąmoningai kitoks komponentas nei tvarkaraštis žemiau — kitaip dvi
   sekcijos iš eilės atrodytų kaip ta pati lentelė du kartus. */

.savaites { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 820px) { .savaites { grid-template-columns: 1fr; } }
.savaite {
  background: #fff; border: 1px solid var(--linija); border-radius: 3px;
  padding: clamp(22px, 3vw, 30px); position: relative; overflow: hidden;
}
.savaite .nr {
  font-family: var(--sunkus); font-weight: 800; font-size: 78px; line-height: .8;
  letter-spacing: -.06em; color: transparent;
  -webkit-text-stroke: 2px var(--linija);
  position: absolute; right: 16px; top: 14px; pointer-events: none;
}
/* Numeris stovi viršutiniame dešiniajame kampe, tad antraštė ir žymė
   privalo baigtis prieš jį — kitaip tekstas užlipa ant skaitmens. */
.savaite .kada, .savaite h3 { position: relative; padding-right: 78px; }
.savaite .kada { font-family: var(--sunkus); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ugnis); }
.savaite p { margin-top: 10px; color: var(--pilka); font-size: 15.5px; position: relative; }

/* ---------------- Galerija: nesimetriška ---------------- */

.tinklas { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, 1fr); gap: 14px; }
.tinklas img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.tinklas img:first-child { grid-row: span 2; aspect-ratio: 4/5; }
.tinklas img:not(:first-child) { aspect-ratio: 4/3; }
@media (max-width: 700px) {
  .tinklas { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .tinklas img:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16/10; }
}

/* ---------------- Tamsi juosta su kvietimu ---------------- */

.juosta-tamsi { background: var(--anglis); color: var(--sniegas); }
.juosta-tamsi .vidus {
  padding-block: clamp(44px, 6vw, 76px);
  display: grid; grid-template-columns: 1.4fr auto; gap: 28px; align-items: center;
}
@media (max-width: 820px) { .juosta-tamsi .vidus { grid-template-columns: 1fr; } }
.juosta-tamsi p { font-family: var(--sunkus); font-weight: 800; font-size: clamp(22px, 3vw, 34px); line-height: 1.15; letter-spacing: -.03em; max-width: 22ch; }
.juosta-tamsi p em { font-style: italic; color: var(--ugnis); }
.juosta-tamsi small { display: block; font-family: var(--tekstas); font-weight: 400; font-size: 16px; color: #9aa0ab; letter-spacing: 0; margin-top: 12px; max-width: 44ch; }

/* ---------------- Atsiliepimai ---------------- */

.atsiliepimai { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); }
@media (max-width: 820px) { .atsiliepimai { grid-template-columns: 1fr; } }
.atsiliepimas { background: #fff; border: 1px solid var(--linija); border-radius: 3px; padding: clamp(24px, 3vw, 32px); }
.atsiliepimas p { font-size: 17.5px; }
.atsiliepimas .kas { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.atsiliepimas .kas img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.atsiliepimas .kas b { font-family: var(--sunkus); font-weight: 700; font-size: 15px; display: block; }
.atsiliepimas .kas span { font-size: 13.5px; color: var(--pilka); }

/* ---------------- Kontaktai ---------------- */

.kontaktai { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 60px); }
@media (max-width: 900px) { .kontaktai { grid-template-columns: 1fr; } }
.laukas { display: block; margin-bottom: 15px; }
.laukas span { display: block; font-family: var(--sunkus); font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--pilka); margin-bottom: 6px; }
.laukas input, .laukas textarea {
  width: 100%; font: inherit; font-size: 16px; padding: 13px 14px;
  background: #fff; border: 1px solid var(--linija); border-radius: 2px; color: var(--anglis);
}
.laukas textarea { min-height: 110px; resize: vertical; }
.laukas input:focus, .laukas textarea:focus { outline: 2px solid var(--ugnis); outline-offset: -2px; border-color: var(--ugnis); }
.zinute { margin-top: 12px; font-size: 14.5px; color: var(--pilka); }

.duomenys { list-style: none; border-top: 2px solid var(--anglis); }
.duomenys li { padding: 15px 0; border-bottom: 1px solid var(--linija); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.duomenys .et { font-family: var(--sunkus); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--pilka); }

.porastė {
  background: var(--anglis); color: #9aa0ab; font-size: 13.5px;
}
.porastė .vidus { display: flex; gap: 10px 26px; justify-content: space-between; flex-wrap: wrap; padding-block: 26px; }
.porastė a { color: var(--ugnis); }

@media (prefers-reduced-motion: reduce) { * { transition-duration: .001ms !important; } }