/*========================================================
  PORTFOLIO.CSS – styly voices stránky portfolio.html
--------------------------------------------------------
  Sdílí stejné třídy (.cs-*) jako ostatní case studies,
  takže navazuje na barvy, stíny a rozestupy zbytku webu
  (variables.css, work.css, projects.css).

  POŘADÍ SEKCÍ ODPOVÍDÁ portfolio.html:
    0)  Společný blok sekce (.cs-section, .cs-head)
    1)  HERO PROJEKTU            .cs-hero
    2)  O PROJEKTU               .cs-about-grid
    3)  TIMELINE / shrnutí       .cs-timeline / .cs-timeline-summary
    4)  WORKFLOW (kroky)         .cs-flow
    5)  POUŽITÉ NÁSTROJE         .cs-tools-grid / .cs-tool-card
    6)  DESIGN + 8) NAUČILA      .cs-learn-grid / .cs-learn-card
    7)  VÝSLEDEK (odkazy)        .cs-social-grid / .cs-social-card
    9)  GALERIE                  .cs-gallery-grid
        (VIDEA – styly navíc, v HTML zatím nejsou)  .cs-videos-grid
    11) DALŠÍ PROJEKT            .cs-next
        PLACEHOLDER (.cs-ph) – prázdná místa pro média
        LIGHTBOX (.cs-lightbox) – zvětšení po kliknutí
        RESPONZIVITA (@media tablet + mobil)
========================================================*/


/*========================================================
  0) SPOLEČNÝ BLOK SEKCE
--------------------------------------------------------
  Jednotné odsazení shora/zdola pro všechny části case
  study a společná hlavička textu (label + nadpis + popis).
========================================================*/


/* odsazení každé sekce */

.page-portfolio .cs-section {
    padding: 5rem 0;
    position: relative;
}

/* menší mezera, když jdou dvě sekce těsně za sebou */

.page-portfolio .cs-section.cs-tight {
    padding-top: 2rem;
}

/* horní blok textu sekce (label + nadpis + popis) */

.page-portfolio .cs-head {
    max-width: 720px;
    margin-bottom: 3rem;
}

.page-portfolio .cs-head p {
    color: var(--text-muted);
    font-size: 1.05rem;
    font-weight: 300;
    line-height: 1.9;
    margin-top: 1rem;
}

/* nadpis sekce uvnitř case study (navazuje na .section-title) */

.page-portfolio .cs-section .section-title {
    font-size: 2rem;
}

/*========================================================
  1) HERO PROJEKTU
--------------------------------------------------------
  Text vlevo, hlavní vizuál (globus) vpravo na pozadí.
  Fialová záře v pozadí stejně jako u .about::before.
========================================================*/


/* výška a zarovnání celé hero sekce */

.page-portfolio .cs-hero {
    position: relative;
    overflow: hidden;
    min-height: 660px;
    display: flex;
    align-items: center;
}

/* OBRÁZEK NA POZADÍ – obal s pevnou šířkou
   Pevná šířka = obrázek se zvětšuje nezávisle na containeru.
   width/height = velikost, top/right = poloha, opacity = síla.
   Maska rozpouští kraje do ztracena. */

.page-portfolio .cs-hero-bg-wrap {
    position: absolute;
    top: -200px;                                    /* ← svisle */
    right: calc((100% - 2500px) / 2 - 10px);      /* ← vodorovně (zrcadlově jako služby) */

    width: 1500px;
    height: auto;

    opacity: .9;

   /* rozpuštění VŠECH krajů do ztracena – closest-side, střed zůstává jasný */
    -webkit-mask-image: radial-gradient(ellipse closest-side, #000 50%, transparent 100%);
    mask-image: radial-gradient(ellipse closest-side, #000 50%, transparent 100%);
   
    z-index: 0;
    pointer-events: none;
}

/* obrázek uvnitř obalu – jen ho vyplní, drží poměr stran */

.page-portfolio .cs-hero-bg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* jemná fialová záře v pozadí hero */

.page-portfolio .cs-hero::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    top: -220px;
    left: -160px;
    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(124, 58, 237, .20),
        transparent 70%
    );

    filter: blur(80px);
    z-index: 0;
}

/* obsah hero nad září/obrázkem (stejné odsazení jako .container) */

.page-portfolio .cs-hero-container {
    position: relative;
    z-index: 2;

    /* přesně jako .container na webu – stejné odsazení jako ostatní sekce */
    width: min(90%, var(--container-width));
    margin-inline: auto;
}

/* textový sloupec drží šířku, ať neběží přes celý obrázek */

.page-portfolio .cs-hero-content {
    max-width: 720px;
}

/* zpětný odkaz „← Zpět na projekty“ nad nadpisem */

.page-portfolio .cs-back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;

    color: var(--text-muted);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;

    margin-bottom: 1.5rem;
    transition: color var(--transition), transform var(--transition);
}

.page-portfolio .cs-back:hover {
    color: var(--accent-color);
    transform: translateX(-4px);
}

/* štítek s obdobím projektu pod popisem */

.page-portfolio .cs-period {
    display: inline-flex;
    align-items: center;
    gap: .6rem;

    margin-top: 1.8rem;
    padding: .55rem 1.1rem;

    border: 1px solid var(--border-color);
    border-radius: 999px;

    color: var(--text-color);
    font-size: .9rem;
    font-weight: 600;

    background: rgba(255, 255, 255, .03);
}

.page-portfolio .cs-period::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 12px var(--accent-color);
}

/* úvodní odstavec (lead) pod nadpisem */

.page-portfolio .cs-hero-content p.cs-lead {
    color: var(--text-muted);
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.9;
    max-width: 560px;
    margin-top: .5rem;
}

/* mezera nad tlačítky v hero */

.page-portfolio .cs-hero-content .hero-buttons {
    margin-top: 2.2rem;
}

/*========================================================
  2) O PROJEKTU
--------------------------------------------------------
  Dva sloupce textu vedle sebe (na mobilu pod sebou).
========================================================*/


/* mřížka dvou sloupců */

.page-portfolio .cs-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.page-portfolio .cs-about-grid p {
    color: var(--text-muted);
    font-size: 1.05rem;
    font-weight: 300;
    line-height: 2;
    margin-bottom: 1rem;
}

.page-portfolio .cs-about-grid strong {
    color: var(--text-color);
    font-weight: 600;
}

/* menší spodní mezera u sekce O projektu */

.page-portfolio .cs-about-section {
    padding-bottom: 1rem;
}

/*========================================================
  3) TIMELINE / SHRNUTÍ PROCESU
--------------------------------------------------------
  V portfolio.html se používá shrnující věta (.cs-timeline-summary).
  Styly svislé osy (.cs-timeline*) jsou připravené, kdyby ses
  rozhodla místo věty vypsat jednotlivé milníky.
========================================================*/


/* — shrnující věta (to, co je teď v HTML) — */

.page-portfolio .cs-timeline-summary {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;

    color: var(--text-muted);
    font-size: 1.15rem;
    font-weight: 300;
    line-height: 1.9;
}

/* — svislá časová osa (připraveno do zásoby) —
   Číslování nepoužíváme – jde o čas, ne o pořadí kroků. */

.page-portfolio .cs-timeline {
    position: relative;
    max-width: 760px;
    margin-inline: auto;
    padding-left: 2.4rem;
}

/* svislá linka osy */

.page-portfolio .cs-timeline::before {
    content: "";
    position: absolute;
    left: 7px;
    top: .4rem;
    bottom: .4rem;
    width: 2px;
    background: linear-gradient(
        to bottom,
        var(--primary-color),
        var(--accent-color)
    );
}

.page-portfolio .cs-timeline-item {
    position: relative;
    padding-bottom: 2.2rem;
}

.page-portfolio .cs-timeline-item:last-child {
    padding-bottom: 0;
}

/* kolečko na ose */

.page-portfolio .cs-timeline-item::before {
    content: "";
    position: absolute;
    left: -2.4rem;
    top: .3rem;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-color);
    border: 3px solid var(--primary-light);
    box-shadow: 0 0 14px rgba(168, 85, 247, .5);
}

/* zvýrazněné body (start/konec) */

.page-portfolio .cs-timeline-item.cs-milestone::before {
    background: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: 0 0 16px var(--accent-color);
}

.page-portfolio .cs-timeline-item .cs-date {
    display: block;
    color: var(--accent-color);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: .3rem;
}

.page-portfolio .cs-timeline-item h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: .3rem;
}

.page-portfolio .cs-timeline-item p {
    color: var(--text-muted);
    font-size: .98rem;
    font-weight: 300;
    line-height: 1.7;
}

/*========================================================
  4) WORKFLOW (kroky se šipkami)
--------------------------------------------------------
  Vodorovné „čipy“ kroků, mezi nimi šipka. Zalomí se do
  dalšího řádku podle šířky; na mobilu jdou pod sebe.
========================================================*/


/* kontejner kroků */

.page-portfolio .cs-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem;
}

/* jeden krok */

.page-portfolio .cs-flow-step {
    display: inline-flex;
    align-items: center;
    gap: .6rem;

    padding: .8rem 1.2rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--surface-color);

    font-size: .95rem;
    font-weight: 600;

    transition: transform var(--transition), border-color var(--transition);
}

.page-portfolio .cs-flow-step:hover {
    transform: translateY(-4px);
    border-color: var(--primary-light);
}

/* pořadové číslo kroku (workflow JE sekvence) */

.page-portfolio .cs-flow-step .cs-flow-num {
    color: var(--accent-color);
    font-size: .8rem;
    font-weight: 700;
}

/* šipka mezi kroky */

.page-portfolio .cs-flow-arrow {
    color: var(--primary-light);
    font-size: 1.1rem;
    font-weight: 700;
}

/*========================================================
  5) POUŽITÉ NÁSTROJE (karty)
--------------------------------------------------------
  Mřížka karet – stejný vzhled jako .work-card / service-card
  (surface, border-radius, hover zvednutí).
========================================================*/


/* mřížka karet */

.page-portfolio .cs-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}

/* jedna karta nástroje */

.page-portfolio .cs-tool-card {
    padding: 1.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--surface-color);

    transition: transform var(--transition), border-color var(--transition);
}

.page-portfolio .cs-tool-card:hover {
    transform: translateY(-6px);
    border-color: var(--primary-light);
}

.page-portfolio .cs-tool-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

/* malý štítek role nástroje (Stavba, AI parťáci…) */

.page-portfolio .cs-tool-card .cs-tool-role {
    display: inline-block;
    margin-bottom: .8rem;
    color: var(--accent-color);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.page-portfolio .cs-tool-card p {
    color: var(--text-muted);
    font-size: .95rem;
    font-weight: 300;
    line-height: 1.7;
}

/*========================================================
  6) DESIGN + 8) CO JSEM SE NAUČILA (bloky)
--------------------------------------------------------
  Obě sekce v HTML používají stejné třídy .cs-learn-*:
  mřížka bloků, každý blok má nadpis a odrážky s ✦.
========================================================*/


/* mřížka bloků */

.page-portfolio .cs-learn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

/* jeden blok */

.page-portfolio .cs-learn-card {
    padding: 1.8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--surface-color);
    position: relative;
    overflow: hidden;
}

/* jemná fialová linka nahoře */

.page-portfolio .cs-learn-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        to right,
        var(--primary-color),
        var(--accent-color)
    );
}

.page-portfolio .cs-learn-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.page-portfolio .cs-learn-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.page-portfolio .cs-learn-card li {
    position: relative;
    padding-left: 1.4rem;
    color: var(--text-muted);
    font-size: .95rem;
    font-weight: 300;
    line-height: 1.6;
}

/* odrážka ✦ */

.page-portfolio .cs-learn-card li::before {
    content: "✦";
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-size: .8rem;
    top: .15rem;
}

/*========================================================
  7) VÝSLEDEK + ODKAZY (karty)
--------------------------------------------------------
  Sekce „Živé portfolio“ – karty s odkazy (Web, Projekty,
  Kontakt). Třídy .cs-social-* = stejný princip jako nástroje.
========================================================*/


/* mřížka karet */

.page-portfolio .cs-social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

/* jedna karta – flex sloupec, aby šel odkaz přišpendlit dolů */

.page-portfolio .cs-social-card {
    padding: 1.8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--surface-color);


     display: flex;              /* ← přidej */
    flex-direction: column;     /* ← přidej */

    transition: transform var(--transition), border-color var(--transition);
}

/* odkaz v kartě – margin-top:auto ho drží u spodní hrany */

.page-portfolio .cs-social-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;

    margin-top: auto;           /* ← tohle ho přišpendlí dolů */
    padding-top: 1.2rem;        /* ← mezera nad odkazem */

    color: var(--accent-color);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;

    transition: color var(--transition);
}

.page-portfolio .cs-social-link:hover {
    color: var(--primary-light);
    transform: translateX(15px);      /* posune se celý text i se šipkou */
}

.page-portfolio .cs-social-card:hover {
    transform: translateY(-6px);
    border-color: var(--primary-light);
}

.page-portfolio .cs-social-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: .9rem;
}

.page-portfolio .cs-social-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.page-portfolio .cs-social-card li {
    padding: .35rem .8rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 500;
}

/*========================================================
  9) GALERIE / SCREENSHOTY
--------------------------------------------------------
  Responzivní mřížka. Každá dlaždice drží čtvercový poměr.
  Přidání obrázku = zkopíruj jednu .cs-gallery-item v HTML.
========================================================*/


/* mozaika – mřížka různě velkých bloků, obrázky vyplní celý tvar */

.page-portfolio .cs-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);   /* 4 sloupce */
    grid-auto-rows: 180px;                    /* výška řádku */
    grid-auto-flow: dense;                    /* zaplní i díry */
    gap: 12px;
}

.page-portfolio .cs-gallery-item {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35),
                0 0 10px rgba(124, 58, 237, .40);
    aspect-ratio: auto !important;   /* přebije čtverec z voices.css */
    height: auto !important;

    /* jemný světelný rámeček, ať dlaždice nesplývají */
    border: 1px solid rgba(255, 255, 255, .12);
    transition: border-color .35s ease, box-shadow .35s ease;
}

/* při najetí rámeček zesvětlá a přidá se jemná záře v barvě akcentu */
.page-portfolio .cs-gallery-item:hover {
    border-color: var(--accent-color);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35),
                0 0 18px rgba(124, 58, 237, .45);
}

/* obrázek vyplní celou dlaždici (klidně s oříznutím) */
.page-portfolio .cs-gallery-item img {
    width: 100%;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    transition: transform .5s ease;
}

.page-portfolio .cs-gallery-item:hover img {
    transform: scale(1.05);
}

/* --- které dlaždice jsou velké (dělá tu nepravidelnost) ---
   Číslo = pořadí obrázku v HTML (1 = první atd.). Klidně přehazuj. */
.page-portfolio .cs-gallery-item:nth-child(1) {   /* velký blok 2×2 */
    grid-column: span 2;
    grid-row: span 2;
}
.page-portfolio .cs-gallery-item:nth-child(4) {   /* široký 2 sloupce */
    grid-column: span 2;
}
.page-portfolio .cs-gallery-item:nth-child(6) {   /* vysoký 2 řádky */
    grid-row: span 2;
}
.page-portfolio .cs-gallery-item:nth-child(7) {   /* velký blok 2×2 */
    grid-column: span 2;
    grid-row: span 2;
}

/*========================================================
  UKÁZKY VIDEÍ (styly do zásoby)
--------------------------------------------------------
  V portfolio.html zatím nejsou, ale styly necháváme –
  reels 9:16, ikonka přehrávání a ovládací tlačítka.
========================================================*/


/* mřížka videí */

.page-portfolio .cs-videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));   /* bylo 300px */
    gap: 1.5rem;
}

/* jeden rámeček videa (9:16) */

.page-portfolio .cs-video-item {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    aspect-ratio: 9 / 16;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .45),
        0 0 40px rgba(124, 58, 237, .12);
}

.page-portfolio .cs-video-item video,
.page-portfolio .cs-video-item iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}

/* ikonka přehrávání přes video */

.page-portfolio .cs-video-item .cs-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 11, 20, .55);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    font-size: 1.4rem;
    pointer-events: none;
}

/* ovládací ikonky videa (zvuk + zvětšení) */

.page-portfolio .cs-video-controls {
    position: absolute;
    bottom: .8rem;
    right: .8rem;
    z-index: 3;

    display: flex;
    gap: .5rem;
}

.page-portfolio .cs-vbtn {
    width: 40px;
    height: 40px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(11, 11, 20, .65);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    font-size: 1.05rem;

    cursor: pointer;
    transition: transform var(--transition), background var(--transition), border-color var(--transition);
}

.page-portfolio .cs-vbtn:hover {
    transform: translateY(-3px);
    border-color: var(--primary-light);
    background: rgba(11, 11, 20, .85);
}

/*========================================================
  11) DALŠÍ PROJEKT
--------------------------------------------------------
  Uzavírací blok s odkazem na další projekt (Voices).
========================================================*/


.page-portfolio .cs-next {
    padding: 5rem 0 6rem;
}

.page-portfolio .cs-next-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;

    padding: 3rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--surface-color);
    position: relative;
    overflow: hidden;
}

/* fialová záře v rohu karty */

.page-portfolio .cs-next-card::before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    top: -200px;
    right: -100px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(124, 58, 237, .25),
        transparent 70%
    );
    filter: blur(60px);
    z-index: 0;
}

.page-portfolio .cs-next-card > * {
    position: relative;
    z-index: 2;
}

.page-portfolio .cs-next-card .cs-next-label {
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: .5rem;
}

.page-portfolio .cs-next-card h3 {
    font-size: 1.8rem;
    font-weight: 800;
}

/*========================================================
  PLACEHOLDER (prázdná místa pro média)
--------------------------------------------------------
  Společný vzhled míst, kam teprve přijde obrázek/video.
  Fialovo-modrý přechod + jemný popisek uprostřed.
========================================================*/


.page-portfolio .cs-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    width: 100%;
    height: 100%;
    min-height: 180px;

    color: var(--text-muted);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: 1px;

    background:
        linear-gradient(
            135deg,
            rgba(124, 58, 237, .28),
            rgba(0, 212, 255, .14)
        );
}

.page-portfolio .cs-ph span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    border: 1px dashed rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: rgba(11, 11, 20, .35);
}

/*========================================================
  LIGHTBOX (zvětšení po kliknutí)
--------------------------------------------------------
  Překryv přes celou obrazovku. Skrytý, dokud JavaScript
  nepřidá třídu .open. Funguje pro obrázek i video.
========================================================*/


/* galerijní obrázky ukazují, že se dá kliknout */

.page-portfolio .cs-gallery-item img {
    cursor: pointer;
}

/* překryv přes celou obrazovku (defaultně skrytý) */

.page-portfolio .cs-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: none;                 /* skrytý, dokud se neklikne */
    align-items: center;
    justify-content: center;

    background: rgba(5, 5, 12, .92);
    padding: 2rem;
    cursor: zoom-out;
}

/* třída .open ho zobrazí (přidá ji JavaScript) */

.page-portfolio .cs-lightbox.open {
    display: flex;
}

/* zvětšený obrázek */

.page-portfolio .cs-lightbox-img {
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--border-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}

/* křížek pro zavření */

.page-portfolio .cs-lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    font-size: 2.5rem;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    transition: color var(--transition);
}

.page-portfolio .cs-lightbox-close:hover {
    color: var(--accent-color);
}

/* video uvnitř lightboxu */

.page-portfolio .cs-lightbox-video {
    max-width: 90%;
    max-height: 90vh;
    border-radius: var(--border-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
    display: none;                 /* skryté, dokud se neotevře video */
}

/* náznak, že video v mřížce jde rozkliknout */

.page-portfolio .cs-video-item video {
    cursor: zoom-in;
}

/*========================================================
  RESPONZIVITA (tablet + mobil)
--------------------------------------------------------
  Nadpisy mají silný selektor (h1/h2.section-title), aby
  přebily globální mobile.css a tablet.css bez ohledu na
  pořadí importů. Bloky ponechány beze změny.
========================================================*/


/* — TABLET (max-width: 1024px) — */

@media (max-width: 1024px) {
 
    .page-portfolio .cs-section {
        padding: 3.5rem 0;
    }
 
    /* nadpisy – tablet stupeň */
    .page-portfolio .cs-hero h1.section-title {
        font-size: 2.2rem;
    }
 
    .page-portfolio .cs-section h2.section-title {
        font-size: 1.7rem;
    }
 
    .page-portfolio .cs-hero-container,
    .page-portfolio .cs-about-grid {
        gap: 2.5rem;
    }
 
    /* na tabletu okno je užší než container – calc nahradíme pevnou polohou */
    .page-portfolio .cs-hero {
        height: 560px;
        min-height: 560px;
    }
 
    /* text o něco užší, ať se obrázek vejde vpravo */
    .page-portfolio .cs-hero-content {
        max-width: 440px;
    }
 
    /* obrázek – mezikrok mezi desktopem (1000px) a mobilem (360px) */
    .page-portfolio .cs-hero-bg-wrap {
        top: 50px;
        right: -60px;
        width: 420px;
        opacity: .85;
    }
 
   /* galerie – na tabletu pevné 3 sloupce, čtvercové dlaždice */
    .page-portfolio .cs-gallery .cs-gallery-grid,
    .page-portfolio .cs-section .cs-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: auto;           /* výšku určí poměr 1:1 */
    }
    /* zruší všechny velké bloky – na tabletu jsou všechny stejné */
    .page-portfolio .cs-gallery-item {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
        aspect-ratio: 1 / 1 !important; /* čtverec */
    }
 
    /* videa – na tabletu 3 vedle sebe (reels jsou úzké) */
    .page-portfolio .cs-section .cs-videos-grid {
        grid-template-columns: repeat(3, 1fr);
    }
 
    /* behind the process – 2 vedle sebe */
    .page-portfolio .cs-behind-grid {
        grid-template-columns: repeat(2, 1fr);
    }
 
}

/* — MOBIL (max-width: 640px) — */

@media (max-width: 640px) {

    .page-portfolio .cs-hero {
        padding: 3rem 0 2rem;
        height: auto;
        min-height: 520px;
    }

    /* galerie na mobilu pevné 2 sloupce, čtvercové dlaždice */
    .page-portfolio .cs-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
    }
    /* velké bloky se ruší už v tabletovém bloku výše (span 1 + čtverec) */

    /* ZMENŠENÍ TEXTU na mobilu – silné selektory přebijí vše */
    .page-portfolio .cs-hero-content p.cs-lead {
        font-size: .95rem;
        line-height: 1.7;
    }

    .page-portfolio .cs-about-grid p,
    .page-portfolio .cs-tool-card p,
    .page-portfolio .cs-social-card p,
    .page-portfolio .cs-social-card li,
    .page-portfolio .cs-learn-card li,
    .page-portfolio .cs-takeaway p,
    .page-portfolio .cs-head p,
    .page-portfolio .cs-timeline-summary,
    .page-portfolio .cs-section p {
        font-size: .95rem;
        line-height: 1.7;
    }

    /* nadpisy – mobilní stupeň (silné selektory přebijí vše) */
    .page-portfolio .cs-hero h1.section-title {
        font-size: 1.8rem;
    }

    .page-portfolio .cs-section h2.section-title {
        font-size: 1.5rem;
    }

    .page-portfolio .cs-about-grid {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    /* na mobilu obrázek menší, vpravo za hranou */
    /* na mobilu obrázek menší, vpravo za hranou */
    .page-portfolio .cs-hero-bg-wrap {
        right: -100px;
        width: 300px;
        opacity: .9;
        top: -5px;

        /* rozpuštění doleva (k textu) i dolů */
        -webkit-mask-image:
            linear-gradient(to left, #000 30%, transparent 95%),
            linear-gradient(to bottom, #000 60%, transparent 100%);
        mask-image:
            linear-gradient(to left, #000 30%, transparent 95%),
            linear-gradient(to bottom, #000 60%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-composite: intersect;
    }

    /* text užší, ať se obrázek vejde vpravo */
    .page-portfolio .cs-hero-content {
        max-width: 250px;
    }

    /* workflow kroky pod sebe, šipka se otočí dolů */
    .page-portfolio .cs-flow {
        flex-direction: column;
        align-items: stretch;
    }

    .page-portfolio .cs-flow-step {
        justify-content: center;
    }

    .page-portfolio .cs-flow-arrow {
        transform: rotate(90deg);
        align-self: center;
    }

    /* behind the process pod sebe */
    .page-portfolio .cs-behind-grid {
        grid-template-columns: 1fr;
    }

    .page-portfolio .cs-next-card {
        padding: 2rem;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    /* menší štítek s obdobím na mobilu */
    .page-portfolio .cs-period {
        font-size: .78rem;
        padding: .4rem .9rem;
    }

    /* menší tlačítka na mobilu */
    .page-portfolio .cs-hero-content .hero-buttons .btn {
        font-size: .82rem;
        padding: 15px 25px;
        white-space: nowrap;
    }

    /* videa 2 vedle sebe na mobilu (galerie zůstává 1 sloupec – viz výše) */
    .page-portfolio .cs-videos-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}