/* Úpravy dizajnu Regata pre WordPress: menu, podstránky, albumy, blok Galéria a baner aplikácie na učenie. */

html{scroll-padding-top:88px}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;word-wrap:normal!important}
.skip-link:focus{clip:auto;clip-path:none;height:auto;width:auto;margin:0;left:16px;top:16px;z-index:200;background:#fff;color:var(--navy);padding:12px 16px;font-weight:700;text-decoration:none}

/* lišta administrácie nad lepivou hlavičkou */
.admin-bar .top{top:32px}
@media (max-width:782px){.admin-bar .top{top:46px}}
@media (max-width:600px){.admin-bar .top{top:0}}

/* obrázky z knižnice médií majú rozmery priamo v HTML */
.poster img,.event img,.percent .photo img{height:auto}

/* menu z WordPressu */
.nav .menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px}
.nav .menu li{margin:0}
.nav .menu-cta>a{margin-left:10px;padding:12px 18px;background:var(--navy);color:#fff;border-radius:6px;font:700 15px/1 var(--body);text-transform:uppercase;letter-spacing:.06em}
.nav .menu-cta>a:hover{background:var(--blue)}
/* Výuka VMP: tlačidlo s obrysom a ikonou čiapky, vedľa tlačidla 2 % */
.nav .menu-vyuka>a{display:inline-flex;align-items:center;gap:8px;margin-left:10px;padding:10px 14px;border:2px solid var(--signal);border-radius:6px;color:var(--navy);font:700 15px/1 var(--body);text-transform:uppercase;letter-spacing:.06em}
.nav .menu-vyuka>a::before{content:"";flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11v5c0 1.5 3 3 6 3s6-1.5 6-3v-5'/%3E%3Cpath d='M22 9v6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11v5c0 1.5 3 3 6 3s6-1.5 6-3v-5'/%3E%3Cpath d='M22 9v6'/%3E%3C/svg%3E") center/contain no-repeat}
.nav .menu-vyuka>a.ext::after{margin-left:0;color:inherit}
.nav .menu-vyuka>a:hover{background:var(--signal);color:#fff}
@media (max-width:900px){
  .nav .menu{flex-direction:column;align-items:stretch;gap:4px}
  .nav .menu-vyuka>a{display:flex;margin:10px 0 0;justify-content:center;padding:13px 18px}
  .nav .menu-cta>a{margin:10px 0 0;display:flex;justify-content:center;padding:15px 18px}
}
.foot nav .menu{list-style:none;margin:0;padding:0;display:flex;gap:18px;flex-wrap:wrap}
.foot .menu-domov,.foot .menu-cta{display:none}
.foot nav a.ext::after{content:" ↗"}
.foot .copy{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
.foot .autor{color:#9aa8c9}

/* plagát: šikmý štítok s dátumom termínu cez pravý horný roh, na obrázku ľubovoľného rozmeru.
   Rozmery sú v cqw (šírka plagátu), takže štítok aj text sa zmenšujú spolu s plagátom.
   Stred štítka leží 13.8cqw od horného aj pravého okraja, takže prekryje aj pôvodný štítok starších plagátov A4. */
.plagat{position:relative;display:block;overflow:hidden;container-type:inline-size}
.plagat img{display:block;width:100%;height:auto}
.plagat-stuha{position:absolute;top:13.8cqw;right:13.8cqw;width:80cqw;height:8cqw;display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:0 .3cqw 1.2cqw rgba(11,30,69,.28);color:#ff313d;font:700 3.2cqw/1 var(--body);letter-spacing:.01em;white-space:nowrap;transform:translate(50%,-50%) rotate(45deg);pointer-events:none}
.plagat-stuha--stredne{font-size:2.7cqw}
.plagat-stuha--male{font-size:2.2cqw}

/* aplikácia na učenie: tmavý baner na konci sekcie Kurz, vpravo snímka aplikácie v okne so štítkom Novinka,
   dole okruhy otázok cez celú šírku. Zobrazí sa len s vyplnenou adresou Výuky VMP. */
.appka{position:relative;isolation:isolate;margin-top:clamp(56px,7vw,96px);color:#fff;display:grid;grid-template-columns:1.1fr 1fr;gap:24px clamp(28px,5vw,64px);align-items:center;padding:clamp(28px,5vw,60px)}
.appka::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-radial-gradient(circle at 82% 38%,rgba(255,255,255,.06) 0 1px,transparent 1px 34px),var(--navy);clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%)}
.appka .eyebrow{color:#fff;--kotva:#fff}
.appka h2{font-size:clamp(38px,4.6vw,64px);font-weight:900;margin:14px 0 16px;color:#fff}
.appka p{color:#d9e0f2;max-width:52ch}
.appka .check{margin:0 0 24px}
.appka .check li::before{background-color:var(--signal)}
.appka-pozn{display:block;margin-top:16px;font-size:14px;color:#9aa8c9}
.appka-obraz{position:relative;margin-right:calc(-1 * clamp(28px,5vw,60px) + 12px)}
.appka-novinka{position:absolute;z-index:2;top:-16px;left:-12px;margin:0;transform:rotate(-4deg)}
.okno{margin:0;border-radius:12px;background:#0e1724;box-shadow:0 40px 80px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.14);transform:rotate(2deg)}
.okno-lista{display:flex;align-items:center;height:30px;padding:0 12px;background:#1a2433;border-radius:12px 12px 0 0}
.okno-adresa{margin-inline:auto;min-width:0;height:18px;border-radius:9px;background:#0e1724;font:500 11px/18px var(--body);color:#8a97b0;padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.okno img{width:100%;height:auto;border-radius:0 0 12px 12px}
.appka-oblasti{grid-column:1/-1;display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.appka-okruhy{font:700 13px/1 var(--body);text-transform:uppercase;letter-spacing:.16em;color:#9aa8c9}
.appka .pills{margin:0}
.appka .pills li{font-size:14px;padding:9px 12px 8px}
.appka .pills li:nth-child(4){border-color:var(--s5)}
.appka .pills li:nth-child(5){border-color:var(--s4)}
@media (max-width:800px){
  .appka{grid-template-columns:1fr}
  .appka-obraz{margin:16px 0 8px}
  .okno{transform:rotate(1deg)}
}

/* úvodná stránka, keď niektorý obsah chýba */
.kurz-grid--bez-plagatu,.two--jeden{grid-template-columns:minmax(0,760px)}
.event figure{margin:0}
.event p{margin:14px 0 0}
.event-link{display:inline-block;margin-top:14px;font-weight:700}

/* podstránky */
.page-head{background:var(--navy);color:#fff;padding-block:clamp(48px,7vw,88px) clamp(36px,5vw,56px)}
.page-head .eyebrow{color:#fff;--kotva:#fff}
.page-head h1{font-size:clamp(46px,7vw,96px);font-weight:900;margin-top:14px;color:#fff}
.page-head .meta{color:#d9e0f2;margin:14px 0 0;font-weight:600}
.back{display:flex;width:max-content;max-width:100%;gap:8px;color:#d9e0f2;text-decoration:none;font-weight:600;margin-bottom:22px}
.back:hover{color:#fff}
.page-body{padding-block:clamp(40px,6vw,72px)}
.content>*{max-width:72ch}
.content>.wp-block-gallery,.content>.wp-block-image,.content>figure,.content>.alignwide,.content>.alignfull{max-width:none}
.content>:first-child{margin-top:0}
.content h2{font-size:clamp(32px,4vw,48px);color:var(--navy);margin:1.4em 0 .5em}
.content h3{font-size:28px;color:var(--navy);margin:1.2em 0 .4em}
.content img{height:auto}
.empty{color:var(--muted)}

/* galéria bez orezávania: rady s rovnakou výškou, každá fotka vo svojom pomere strán.
   Skutočné rozmery --w a --h dopĺňa PHP do atribútu style, tu je len náhradný pomer 3 : 2. */
.foto-mriezka{--vyska:200px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.foto-mriezka::after{content:"";flex-grow:999999}
.foto{--w:3;--h:2;position:relative;display:block;flex-grow:calc(var(--w) / var(--h));flex-basis:calc(var(--w) / var(--h) * var(--vyska));max-width:calc(var(--w) / var(--h) * var(--vyska) * 1.6);aspect-ratio:var(--w) / var(--h);overflow:hidden;background:var(--ground)}
.foto img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .5s ease}
.foto:hover img{transform:scale(1.03)}
/* ukážka na úvode: tri titulné fotky vždy v jednom rade */
.foto-mriezka--uvod{--vyska:300px;flex-wrap:nowrap}
.foto-mriezka--uvod::after{display:none}
.foto-mriezka--uvod .foto{max-width:none}

/* prehľad albumov */
.albumy{--vyska:260px;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:32px 20px}
.albumy::after{content:"";flex-grow:999999}
.albumy li{--w:3;--h:2;flex-grow:calc(var(--w) / var(--h));flex-basis:calc(var(--w) / var(--h) * var(--vyska));min-width:0}
.album{display:block;text-decoration:none;color:var(--ink)}
.album-foto{display:block;aspect-ratio:var(--w) / var(--h);overflow:hidden;background:var(--ground)}
.album-foto img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .5s ease}
.album:hover .album-foto img{transform:scale(1.03)}
.album b{display:block;font:800 26px/1.05 var(--display);text-transform:uppercase;color:var(--navy);margin-top:14px}
.album:hover b{color:var(--blue)}
.album small{display:block;color:var(--muted);font-weight:600;margin-top:6px}
.page-body .nav-links{display:flex;gap:18px;margin-top:40px;font-weight:700}

@media (max-width:600px){
  .foto-mriezka{--vyska:140px;gap:6px}
  .foto-mriezka--uvod{overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory;padding-bottom:6px}
  .foto-mriezka--uvod .foto{flex:0 0 auto;width:auto;height:200px;scroll-snap-align:start}
  .albumy{--vyska:170px;gap:24px 12px}
  .album b{font-size:20px}
}

/* fotka na celú obrazovku po kliknutí v albume */
.lightbox{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(6,14,33,.95);color:#fff}
.lightbox[open]{display:flex;align-items:center;justify-content:center}
.lightbox::backdrop{background:rgba(6,14,33,.95)}
.lightbox img{max-width:calc(100vw - 32px);max-height:calc(100dvh - 110px);width:auto;height:auto;object-fit:contain}
.lb-tlacidlo{position:absolute;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border:0;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font:400 34px/1 var(--body);cursor:pointer}
.lb-tlacidlo:hover{background:rgba(255,255,255,.26)}
.lb-zavriet{top:16px;right:16px}
.lb-pred{left:16px;top:50%;transform:translateY(-50%)}
.lb-dalsia{right:16px;top:50%;transform:translateY(-50%)}
.lb-pocet{position:absolute;left:0;right:0;bottom:18px;margin:0;text-align:center;color:#d9e0f2;font-weight:600}
@media (max-width:600px){.lb-pred,.lb-dalsia{top:auto;bottom:8px;transform:none}}

@media (prefers-reduced-motion:reduce){.foto img,.album-foto img{transition:none}}