/* =====================================================
   STYLE-ABSOLVENTI.CSS
   Samostatný stylesheet pro stránku "Naši absolventi".
   Obsahuje i potřebné styly převzaté ze style-onas.css,
   takže na téhle stránce stačí načítat pouze tento soubor.
   ===================================================== */


/* --- HEADER: .header-title a breadcrumb jsou v kritickem CSS v includes/header.php --- */


.header-absolventi {
    background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3)),
    url("/img/uspesni-absolventi.jpg") center no-repeat;
    background-size: 100%, 100%;
    height: 323px;
}

@media (max-width: 480px) {
    .header-absolventi {
        background-size: auto 323px;
    }
}

/* ----------------- OBSAH STRANKY (převzato ze style-onas.css) ------------------*/

.stranky-content {
    padding-top: 4%;
    margin-bottom: 0;
    padding-bottom: 2%;
}
.stranky-content h1 {
    padding-bottom: 4%;
}


.stranky-content .nadnadpis {
    font-family: 'Allura', 'Lucida Handwriting', cursive;
    font-weight: 100;
    font-size: 2.125em; 
    text-align: center;
    margin-bottom: 0px;
    padding-bottom: 0px;
    color: var(--color1);

}
@media (max-width: 700px) {
    .stranky-content {
        padding-top: 8%;
        padding-bottom: 11%;
    }
}

/* ----------------- PATIČKOVÝ TEXTOVÝ BLOK (převzato ze style-onas.css) ------------------*/

.nas-tym-text {
    height: auto;
    padding: 3em;
    text-align: center;
}
.nas-tym-text p {
    margin-top: 2em;
    margin-bottom: 2em;
    line-height: 1.6em;
}

/* ----------------- ÚVODNÍ TEXT ------------------*/

.absolventi-uvod {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.absolventi-uvod p {
    line-height: 1.6em;
    margin-bottom: 1.5em;
}

/* ----------------- MŘÍŽKA KARET ------------------*/

/*
   Vlastní obalová třída "absolventi-container" (NE sdílené "container")
   - schválně nepoužíváme obecnou třídu .container, protože se může
     přebíjet s pravidly z hlavního style.css webu a způsobovat
     nevyzpytatelné chování gridu (např. karty mimo řadu).
*/
/* .absolventi-grid uz se nepouziva - odsazeni prevzal .absolventi-container. */


.absolventi-container {
    box-sizing: border-box;
    max-width: 1140px;
    margin: 2em auto 3em;
    padding: 0 20px;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5em;
    align-items: start;
}

.absolvent-karta {
    box-sizing: border-box;
    min-width: 0;
    display: block;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 2em 1.5em;
    text-align: center;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Karta uz neni odkaz (kvuli SEO a pristupnosti), efekt nadzvednuti
   se ale spousti i pri zamereni libovolneho odkazu uvnitr. */
.absolvent-karta:hover,
.absolvent-karta:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/*
   Modry ramecek se zobrazi POUZE pri ovladani klavesnici (tabulator).
   Pri kliknuti mysi ho prohlizec diky :focus-visible nevykresli.
   Nemazat cely - bez nej by uzivatel ovladajici web klavesnici nevedel,
   kde se prave nachazi.
*/
.absolvent-karta:has(:focus-visible) {
    outline: 2px solid rgb(15, 59, 137);
    outline-offset: 3px;
}

/* Zaloha pro starsi prohlizece bez podpory :has() - ramecek se pak
   vykresli jen kolem konkretniho odkazu misto kolem cele karty. */
.absolvent-karta a:focus-visible {
    outline: 2px solid rgb(15, 59, 137);
    outline-offset: 3px;
}

.absolvent-karta:has(:focus-visible) a:focus-visible {
    outline: none;
}

/* Fotka je obalena odkazem na web absolventa.
   inline-block + line-height:0 zajisti, ze klikatelna plocha
   presne kopiruje kolecko fotky a neroztahne se na celou sirku radku. */
.absolvent-foto {
    display: inline-block;
    line-height: 0;
    border-radius: 50%;
    text-decoration: none;
}

.absolvent-karta img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border: 6px solid white;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 1em;
}

.absolvent-karta h3 {
    font-weight: 500;
    font-size: 1.3em;
    margin-bottom: 0.3em;
}

.absolvent-karta h3 a {
    color: inherit;
    text-decoration: none;
}

.absolvent-karta h3 a:hover,
.absolvent-karta h3 a:focus-visible {
    color: rgb(15, 59, 137);
    text-decoration: none;
}

.absolvent-specializace {
    color: rgb(15, 59, 137);
    font-size: 0.9em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 1em;
}

.absolvent-popis {
    font-size: 0.95em;
    line-height: 1.6em;
    color: #333;
    margin-bottom: 1.3em;
}

.absolvent-kontakt {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #eee;
    padding-top: 1em;
}

.absolvent-kontakt li {
    font-size: 0.9em;
    margin-bottom: 0.6em;
    overflow-wrap: break-word;
    word-break: break-word;
}

.absolvent-adresa,
.absolvent-ico,
.absolvent-telefon {
    color: #555;
}

/* Popisek "tel.:" je jen vizualni - do textu odkazu nepatri,
   aby zustalo cistelne cislo pro kliknuti i pro vyhledavace. */
.absolvent-telefon::before {
    content: "tel.: ";
}

.absolvent-telefon a {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.absolvent-telefon a:hover,
.absolvent-telefon a:focus-visible {
    color: rgb(15, 59, 137);
    text-decoration: none;
}

.absolvent-web {
    color: rgb(15, 59, 137);
    font-weight: 600;
}

.absolvent-web a {
    color: inherit;
    text-decoration: none;
}

/* Zadne odkazy v karte se pri najeti mysi nepodtrhavaji.
   Deklarace nize prebiji pripadne globalni "a:hover" z hlavniho style.css. */
.absolvent-karta a:hover,
.absolvent-karta a:focus-visible,
.absolvent-karta a:active {
    text-decoration: none;
}

.absolvent-web::after {
    content: " →";
    display: inline-block;
    transition: transform 0.2s ease;
}

.absolvent-karta:hover .absolvent-web::after,
.absolvent-karta:focus-within .absolvent-web::after {
    transform: translateX(3px);
}

/* ----------------- RESPONZIVITA ------------------*/
/*
   Díky repeat(auto-fit, minmax(300px, 1fr)) se počet sloupců
   (3 / 2 / 1) přizpůsobuje automaticky podle šířky obrazovky
   a karty se nikdy nezalomí "napůl" ani nevystřelí mimo řadu.
   Media query níže jen doladí okraje na malých displejích.
*/

@media (max-width: 480px) {
    .absolventi-container {
        padding: 0 5%;
        gap: 1.8em;
    }
}

/* -----------------------------------------------------
   VOLITELNE: klikatelna cela plocha karty
   Odkomentujte, pokud chcete, aby se na web absolventa
   dalo prejit kliknutim kamkoli do karty (nejen na fotku,
   jmeno a adresu webu).
   Pozor: pres prekryv nejde v karte oznacovat text mysi.
   -----------------------------------------------------

.absolvent-karta {
    position: relative;
    cursor: pointer;
}

.absolvent-karta h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
}

.absolvent-kontakt a {
    position: relative;
    z-index: 1;
}

*/


/* -----------------------------------------------------
   FOTOGALERIE - obal
   -----------------------------------------------------
   .galerie-sekce ma zamerne PRESNE stejnou geometrii jako
   .absolventi-container (max-width 1140px, padding 0 20px,
   na 480 px 0 5%), takze fotky licuji s kartami maseru.

   Nepouzivame sdilenou tridu .container - ta ma jine hodnoty
   (1200px / 15px) a galerie by byla o kousek sirsi.

   Galerie zamerne NENI uvnitr .absolventi-container: ten je grid
   a galerie je na mobilu vodorovny posuvnik, coz by se tlouklo.
   ----------------------------------------------------- */

.galerie-sekce {
    box-sizing: border-box;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px 0;
}

@media (max-width: 480px) {
    .galerie-sekce {
        padding-left: 5%;
        padding-right: 5%;
    }
}

.absolventi-container {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

@media (max-width: 380px) {
    .absolventi-container { grid-template-columns: 1fr; }
}