/* ==========================================================================
   Mano Mac — Design tokens
   Vienintelė vieta, kurioje gyvena „skaičiai“. style.css naudoja tik šiuos
   kintamuosius — komponentuose magic numbers nėra.

   Sluoksniai:
     1. Primityvai  — paletė, tarpai, radiusai (--clr-*, --space-*, ...)
     2. Rolės       — semantiniai tokenai (--text-h2, --clr-accent, ...)
     3. Komponentai — konkrečių komponentų matmenys (--hero-min-height, ...)

   Responsive: rolių reikšmės perrašomos @media blokuose šio failo gale,
   kad komponentų CSS neturėtų dydžių perrašymų.

   Breakpoint'ai (CSS custom properties negali būti @media sąlygoje, todėl
   reikšmės kartojamos media užklausose su komentaru):
     --bp-xl: 1200px   ≤ 1200  mažas desktop / planšetė landscape
     --bp-lg: 1024px   ≤ 1024  planšetė (mobilus meniu)
     --bp-md: 767px    ≤ 767   telefonas
   ========================================================================== */

:root {
  /* Breakpoint'ai — tik dokumentacijai ir JS (žr. main.js) */
  --bp-xl: 1200px;
  --bp-lg: 1024px;
  --bp-md: 767px;

  /* ----------------------------------------------------------------------
     SPALVOS
     ---------------------------------------------------------------------- */
  --clr-white: #ffffff;
  --clr-dark: #0e101b;               /* antraštės, tamsus tekstas, tamsūs fonai (footer, banner, kortelė); ne #0a0c16 – per agresyviai juoda */
  --clr-text: #646465;               /* body tekstas, ištraukos, kainų sąrašo ir footer'io linijos */
  --clr-muted: #b6b6b6;              /* datos, footer nuorodos, copyright, įrašo meta linija */
  --clr-light: #f6f6f6;              /* šviesus sekcijų fonas, dropdown hover fonas */
  --clr-accent: #4966ef;             /* mygtukai, juosta, badge, nuorodos */
  --clr-accent-2: #e95b4f;           /* antras akcentas (raudona): žingsnių numeriai, išskirtiniai ženklai; naudoti taupiai, ne CTA */
  --clr-overlay: rgba(0, 0, 0, .5);  /* kortelių pritemdymas */

  --gradient-header: linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, transparent 100%); /* header'is virš hero */
  --gradient-hero: linear-gradient(90deg, rgba(0, 0, 0, .8) 15%, rgba(0, 0, 0, .3) 85%); /* hero nuotraukos pritemdymas */

  /* Hover – ne atskira spalva: color-mix(in srgb, var(--clr-accent), var(--clr-dark) var(--hover-mix)),
     žr. --hover-mix skiltyje JUDESYS. Vienetinės, ne temos spalvos (hero žvaigždutės)
     rašomos tiesiai komponente su komentaru. */

  /* ----------------------------------------------------------------------
     TIPOGRAFIJA
     ---------------------------------------------------------------------- */
  --font-primary: 'Poppins', sans-serif;

  /* Teksto dydžiai — viena skalė, be primityvų.
     Tokenas = vizualinis dydis, HTML tag'as = struktūra; sutampa tik pagal
     nutylėjimą (pvz. services intro yra <h2>, bet naudoja --text-h3).
     CMS: visi, išskyrus --text-nav, registruojami kaip WP font-size preset'ai
     tais pačiais slug'ais (display, h1…h6, lead, base, sm, caption).
     Responsive reikšmės — failo gale. */
  --text-display: 80px;              /* hero h1 */
  --text-h1: 64px;                   /* vidinių puslapių h1 (pagrindiniame nenaudojamas) */
  --text-h2: 48px;                   /* sekcijų antraštės */
  --text-h3: 40px;                   /* banner antraštės */
  --text-h4: 32px;                   /* services intro, remonto sekimo juostos antraštė */
  --text-h5: 24px;                   /* žingsnių numeriai (kurjerio paslauga) */
  --text-h6: 20px;                   /* kortelių ir įrašų antraštės */
  --text-lead: 18px;                 /* mygtukai, kainų sąrašas, banner pastraipos */
  --text-base: 16px;                 /* body, pastraipos (išskyrus banner), etiketės, footer, paslaugų kortelės pill, įrašų „skaityti daugiau“ */
  --text-nav: 15px;                  /* meniu (tik CSS, į CMS neregistruojamas) */
  --text-sm: 13px;                   /* topbar, įrašų datos, copyright */
  --text-caption: 12px;              /* pastabos, badge */

  --font-weight-medium: 500;         /* kainų sąrašas */
  --font-weight-semibold: 600;       /* antraštės, etiketės, badge */
  --font-weight-bold: 700;           /* hero h1 */

  --line-height-tight: 1.1;          /* display, h2 */
  --line-height-snug: 1.2;           /* mygtukai, banner antraštės, kainos */
  --line-height-normal: 1.4;         /* kortelių antraštės, etiketės */
  --line-height-relaxed: 1.5;        /* body */

  --letter-spacing-tight: -0.0125em; /* display */
  --letter-spacing-snug: -0.01em;    /* mygtukai, navigacija */
  --letter-spacing-subtle: -0.005em; /* antraštės, etiketės */
  --letter-spacing-normal: 0;

  /* ----------------------------------------------------------------------
     TARPAI — 4px tinklelis (--space-N = N × 4px)
     ---------------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ----------------------------------------------------------------------
     FORMOS — radiusai, rėmeliai, šešėliai
     ---------------------------------------------------------------------- */
  --radius-sm: 8px;                  /* dropdown */
  --radius-md: 16px;                 /* vidutinis suapvalinimas (šiuo metu tik styleguide demo) */
  --radius-lg: 24px;                 /* paslaugų / įrašų kortelės, banner'iai */
  --radius-xl: 32px;                 /* „apie mus“ nuotraukos */
  --radius-pill: 999px;              /* mygtukai, badge, kortelės rodyklė; kvadratui duoda apskritimą (slider rodyklės) */

  --border-width: 1px;

  --shadow-md: 0 0 12px rgba(0, 0, 0, .15);    /* įrašų kortelės */
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .1);  /* dropdown, mobilus meniu */

  /* ----------------------------------------------------------------------
     JUDESYS
     ---------------------------------------------------------------------- */
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --ease-default: ease;

  --transition-fast: var(--duration-fast) var(--ease-default);   /* dropdown */
  --transition-base: var(--duration-base) var(--ease-default);   /* spalvos, hover */
  --transition-slow: var(--duration-slow) var(--ease-default);   /* nuotraukų zoom */
  --transition-header: var(--duration-base) var(--ease-default); /* header susitraukimas scrollinant */
  --scale-zoom: 1.1;                                             /* paslaugų kortelės fonas */
  --hover-mix: 15%;                                              /* kiek --clr-dark įmaišoma į spalvą hover metu (color-mix) */

  /* ----------------------------------------------------------------------
     SLUOKSNIAI
     ---------------------------------------------------------------------- */
  --z-back: -2;                      /* kortelės fonas (isolation kontekste) */
  --z-behind: -1;                    /* kortelės overlay */
  --z-header: 100;                   /* fiksuotas header'is */

  /* ----------------------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------------------- */
  --container: 1280px;
  --gutter: var(--space-8);

  --grid-1: 1fr;
  --grid-2: repeat(2, 1fr);
  --grid-3: repeat(3, 1fr);          /* footer nuorodų stulpeliai */
  --grid-4: repeat(4, 1fr);
  --grid-strip: 4fr 6fr 3fr;         /* banner: antraštė | tekstas | mygtukas */
  --grid-tracking: auto 1fr auto;    /* remonto sekimo juosta: antraštė ir mygtukas natūralaus pločio, tekstui – visa likusi erdvė */
  --grid-strip-tablet: 2fr 3fr;      /* juosta planšetėje: mygtukas eina į naują eilutę */
  --grid-footer: 1fr 2fr;            /* brand | stulpeliai */

  --bleed-right: calc((100% - 100vw) / 2); /* neigiamas margin-right: elementas iš konteinerio ištęsiamas iki lango dešinio krašto (patarimų bėgis) */

  --measure-xs: 360px;               /* footer aprašymas */
  --measure-sm: 540px;               /* hero turinys, patarimų intro */
  --measure-md: 660px;               /* kainos pavadinimas */
  --measure-lg: 840px;               /* kainų sąrašas */

  --aspect-landscape: 3 / 2;         /* įrašų miniatiūros */
  --aspect-portrait: 9 / 16;         /* „apie mus“ nuotraukos */

  /* ----------------------------------------------------------------------
     DYDŽIAI
     ---------------------------------------------------------------------- */
  --size-icon-xs: 12px;              /* caret, checkmark */
  --size-icon-sm: 16px;              /* social, footer, verified, žvaigždutės */
  --size-icon-md: 20px;              /* Google ikona, rodyklių svg */
  --size-icon-lg: 24px;              /* meniu toggle */
  --size-icon-xl: 32px;              /* „apie mus“ feature ikonos */
  --size-control: 48px;              /* apskriti valdymo mygtukai (slider rodyklės) */
  --size-dot: 8px;                   /* maži taškai (šiuo metu tik styleguide demo) */
  --size-logo: 150px;                /* logo header'yje (viršuje) ir footer'yje */
  --size-logo-sm: 100px;             /* logo susitraukusiame header'yje (po scroll) */

  /* ----------------------------------------------------------------------
     KOMPONENTAI
     ---------------------------------------------------------------------- */
  --header-scroll-threshold: var(--space-16); /* po kiek px header'is susitraukia ir tampa tamsus (JS) */
  --dropdown-min-width: 256px;
  --hero-min-height: 720px;
  --service-card-height: 464px;
  --services-bleed: max(0px, min(var(--gutter), (100vw - var(--container)) / 2)); /* kiek paslaugų tinklelis išeina už konteinerio į abi puses:
                                                                                    iki gutter'io, bet ne daugiau nei laisvos vietos už konteinerio (siauresniuose languose savaime 0) */
  --button-min-width: 208px;         /* „Visos kainos“ */

  /* Patarimų slider: kortelės telpa po 3 į konteinerį, iš kurio atimtas
     --posts-offset, todėl ketvirta visada kyšo (kaip Elementor „offset sides:
     right“). Bėgis dar ištęsiamas iki lango krašto (--bleed-right).
     cqw matuojamas nuo .posts .container (container-type: inline-size). */
  --posts-gap: var(--space-8);       /* tarpas tarp kortelių */
  --posts-offset: var(--space-20);   /* kiek kortelės siauresnės nei lygios trečdalio dalys → kyšančios kortelės dalis konteinerio viduje */
  --posts-track-pad: var(--space-4); /* scroll konteinerio vidinis tarpas, kad nenukirstų --shadow-md */
  --post-card-width: calc((100cqw - var(--posts-offset) - 2 * var(--posts-gap)) / 3);
}

/* ==========================================================================
   RESPONSIVE ROLĖS
   ========================================================================== */

/* ≤ --bp-xl (1200px) */
@media (max-width: 1200px) {
  :root {
    --text-display: 64px;
  }
}

/* ≤ --bp-lg (1024px) */
@media (max-width: 1024px) {
  :root {
    --text-display: 56px;

    --post-card-width: calc((100cqw - var(--posts-offset) - var(--posts-gap)) / 2); /* 2 kortelės + kyšanti */
  }
}

/* ≤ --bp-md (767px) */
@media (max-width: 767px) {
  :root {
    --text-display: 48px;              /* hero h1 telefone – aiškiai didesnis už vidinių puslapių h1 (40) */
    --text-h1: 40px;
    --text-h2: 32px;
    --text-h3: 32px;
    --text-h4: 28px;
    --text-lead: 16px;

    --gutter: var(--space-5);           /* telefone – platesnis turinys (buvo 32 px; 16 px – per mažai) */
    --hero-min-height: 640px;
    --service-card-height: 420px;

    --posts-gap: var(--space-5);
    --posts-offset: var(--space-12);
    --post-card-width: calc(100cqw - var(--posts-offset)); /* 1 kortelė + kyšanti */
  }
}