:root{
    /* Standartinis nustatymas visoms naršyklėms */
    font-family: Inter, sans-serif;
  
    /* Įjungia automatines ligatūras ir simbolių pataisymus (pvz., Chrome naršyklėje) */
    font-feature-settings: 'liga' 1, 'calt' 1;
    --bg:#fff;
    --bg-darker: #F2F2F2;
    --bg-dark: #dadada;
    --text-light:#fff;
    --accent-light:#7BBE98;
    --accent:#038B45;
    --black:#0d0d18;
    --text-body:#0c0c0c;
    --txt-s-h3:1rem;
    --txt-s-h2:40px;
}

@supports (font-variation-settings: normal) {
  :root { 
    font-family: InterVariable, sans-serif; 
  }
}

html.no-scroll, body.no-scroll {
    overflow: hidden !important;
}

button {
    border: none;
    padding: 0;
    cursor: pointer;
}

button, 
input, 
select, 
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

:focus {
    outline: none;
}

body.keyboard-user :focus {
    outline: 5px solid #22e5ff;
    outline-offset: 2px;
    border-radius: 10px;
}

#imageSlider img:focus-visible,
#imageSlider2 img:focus-visible,
#imageSlider3 img:focus-visible,
#imageSlider4 img:focus-visible,
.card-image img:focus-visible {
    outline: 5px solid #22e5ff; /* Change to your brand color */
    outline-offset: -4px;          /* Forces the ring inside the image */
    border-radius: 0px;
}

.arrow-prev:focus-visible,
.arrow-next:focus-visible {
    outline: 5px solid #22e5ff; /* Change to your brand color */
    outline-offset: -4px;          /* Forces the ring inside the image */
    height:60px;
}

.img-m{
    transition: filter 0.3s ease;
}
.img-m:hover{
    filter: brightness(0.8);
}



/* ----- push notification button */

/* ── Push pranešimų mygtukas ─────────────────────────────────────────────── */

.push-btn-wrap {
    /* ✅ Hover zona fiksuota — 39px kvadratas visada,
       mygtukas plečiasi iš jo neišeidamas iš hover zonos.
       Tai pašalina mirgėjimą kai pelė yra dešiniajame krašte. */
    display: inline-flex;
    align-items: center;
    position: relative;
    width: 39px;
    height: 39px;
    flex-shrink: 0;
}

/* Bazinis mygtukas — pilkas kvadratas su ikona */
.push-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;

    /* Absoliuti pozicija — dešinysis kraštas fiksuotas prie wrap */
    position: absolute;
    right: 0;
    top: 0;

    height: 39px;
    width: 39px;
    padding: 0;

    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.5px;
    cursor: pointer;

    color: transparent;
    background: none;
    background-color: none;
    border: 2px solid var(--bg-dark);
    border-radius: 10px;
    z-index: 5;

    transition:
        width        0.35s cubic-bezier(0.4, 0, 0.2, 1),
        padding      0.35s ease,
        color        0.15s ease,
        background   0.2s ease,
        border-color 0.2s ease;
}

/* Ikona */
.push-btn .push-icon {
    display: block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    min-width: 20px;
    background-image: url("/assets/icons/bell_icon.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    transition: filter 0.2s ease;
    filter: grayscale(1) opacity(0.35);
}

/* Tekstas — paslėptas kol nesiskleidžia */
.push-btn .push-label {
    display: block;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    margin-left: 0;
    transition:
        max-width   0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity     0.15s ease,
        margin-left 0.35s ease;
}

/* ── Hover ant WRAP — stabili zona, nemirganti ───────── */
.push-btn-wrap:hover .push-btn {
    width: max-content;
    padding: 0 16px 0 10px;
    color: var(--black);
    border-color: var(--black);
    justify-content: flex-start;
    background: none;
}

.push-btn-wrap:hover .push-btn .push-icon {
    filter: grayscale(0) opacity(1);
}

.push-btn-wrap:hover .push-btn .push-label {
    max-width: 160px;
    opacity: 1;
    margin-left: 8px;
}

/* ── Aktyvus — prenumeruota ──────────────────────────── */
.push-btn.push-active {
    border-color: var(--accent);
    background: none;
}

.push-btn.push-active .push-icon {
    filter: grayscale(0) opacity(1);
}

/* Hover ant aktyvaus */
.push-btn-wrap:hover .push-btn.push-active {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
}

.push-btn-wrap:hover .push-btn.push-active .push-icon {
    filter: brightness(0) invert(1);
}

/* ── Užblokuotas ─────────────────────────────────────── */
.push-btn:disabled {
    opacity: 0.4;
    background:none;
    background-color: none;
    cursor: not-allowed;
}

.push-btn-wrap:hover .push-btn:disabled {
    width: 39px;
    padding: 0;
    background:none;
    color: transparent;
    justify-content: center;
}

/* ── Expand į DEŠINĘ (modifier klasė) ───────────────────
   Naudoti kai mygtukas yra kairėje pusėje teksto/mygtukų.
   HTML: <div class="push-btn-wrap push-btn-wrap--right" data-topic="...">
   ─────────────────────────────────────────────────────── */
.push-btn-wrap--right {
    /* Wrap vis dar 39px, bet mygtukas fiksuotas prie kairės */
    justify-content: flex-start;
}

.push-btn-wrap--right .push-btn {
    right: auto;
    left: 0;   /* plečiasi į dešinę */
}

/* song-card is position:relative already via jubiliejus.css;
   .card-image already has position:relative via pagrindinis.css  */
/* ─────────────────────────────────────────────────────────────────────── */

/* Image modal — smooth opacity crossfade when navigating the slider */
#modalImg {
    transition: opacity 0.25s ease;
}

/* ── Modal media slider (ms-*) ──────────────────────────────────────────── */
/* .ms-wrap replaces .card-image in the modal — it inherits the same height
   from whichever page CSS is active, and adds a blurred background layer
   (set via --bg-image in JS) identical to .card-image::before.            */
.ms-wrap {
    position: relative;
    width: 100%;
    min-height: 500px;
    max-height: 500px;
    /* Height is NOT set here — it comes from the page's .card-image rules
       (pagrindinis.css 280px, daugiau-naujienu.css 260px, etc.)            */
    overflow: hidden;
    border-radius: 10px;
    background: #111;
    flex-shrink: 0;
    --bg-image: none;
}

/* Blurred background — matches .card-image::before exactly */
.ms-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(20px);
    transform: scale(1.1);
    z-index: 0;
}

.ms-track {
    width: 100%;
    height: 100%;
}

.ms-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.24s ease;
    pointer-events: none;
    z-index: 1;
    overflow: hidden; /* ✅ FIX: apkarpo turinį pagal slide ribas */
}

.ms-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.ms-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    /* ✅ FIX: neleidžiame išsitempti virš slide aukščio */
    position: relative;
    z-index: 1;
}

.ms-slide iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Prev / next arrows */
.ms-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 40px;
    padding: 20px 15px;
    cursor: pointer;
    z-index: 5;
    user-select: none;
    transition: all 0.3s;
}
.ms-btn:hover { background: rgba(255, 255, 255, 0.3); }

.ms-prev { left: 8px; }
.ms-next { right: 8px; }

/* Dot indicators */
.ms-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}

.ms-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .2s, transform .2s;
}
.ms-dot.active {
    background: #fff;
    transform: scale(1.25);
}

@media (hover: none), (max-width: 768px) {
    .ms-btn {     
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 1rem;
    padding: 15px 10px;
    cursor: pointer;
    z-index: 5;
    user-select: none;
    transition: all 0.3s; }

    .push-btn-wrap {
        width: auto;
        height: 39px;
    }
    .push-btn {
        position: static;
        width: auto;
        min-width: 39px;
        padding: 0 16px 0 10px;
        justify-content: flex-start;
        color: var(--bg-dark);
        border-color: var(--bg-dark);
    }
    .push-btn .push-icon {
        filter: grayscale(1) opacity(0.4);
    }
    .push-btn .push-label {
        max-width: 180px;
        opacity: 1;
        margin-left: 8px;
    }
    .push-btn.push-active {
        border-color: var(--accent);
        background: var(--accent);
    }
    
    .push-btn.push-active .push-label {
        color:var(--bg);
    }

    .push-btn.push-active .push-icon {
        filter: brightness(0) invert(1);
    }
}
/* ─────────────────────────────────────────────────────────────────────────── */

/* Image modal — smooth opacity crossfade when navigating the slider */
#modalImg {
    transition: opacity 0.25s ease;
}

/* nav links*/

/* ------ Header ----- */

header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    background:var(--bg);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    height:120px;
    min-height:120px; /* ✅ FIX: užkerta kelią Chrome FOUC šokčiojimui */
    padding:40px 30px;
    z-index: 7;
    transition: ease-in-out 0.3s all;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    /* ✅ FIX: rezervuojame vietą šriftams kad nebūtų layout shift */
    contain: layout style;
}

header.header-scrolled {
    height: 70px;
    min-height: 70px;
    padding: 0px 30px;
}

nav{
    transition: all 0.3s ease;
}

.modal button{
    border:none;  
}

.modal .modal-close{
    background: none;
}

nav button{
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 0;
    font: inherit;           /* VERY IMPORTANT */
    color: inherit;          /* match link color */
    display: inline;
    vertical-align: baseline;
    appearance: none;
    -webkit-appearance: none;
}

nav a,
nav button{
    position:relative;
    transition: 0.3s;
    text-decoration:none;
    color:var(--text-body);
    font-family: InterVariable, Sans-Serif;
    padding-bottom: 5px;
    font-size:1rem;
    letter-spacing: 1px;
    font-weight: 600;
}

nav a:hover,
nav button:hover{
    color:var(--accent);
}
.main-nav li a::after,
.main-nav li button::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--accent-light); /* Change this to your brand color */
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.main-nav li a.active::after,
.main-nav li a:hover::after,
.main-nav li button.active::after,
.main-nav li button:hover::after {
    transform: scaleX(0.7); /* Adjust the scale and translation for the underline */
}

ul {
    list-style: none;
    display: flex;
    flex-wrap: nowrap; /* Forces items to stay on one line */
    white-space: nowrap; /* Prevents text inside links from breaking */
    padding:0;
}

nav li:after {
    content: "|";
    color:var(--accent);
    font-size: 1rem;
    font-weight: 300;
    margin: 7px;
}
nav li:last-child:after {
    content: '';
}



/* FIXED: Centered main navigation on large screen */
.main-nav{
position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.main-nav .t-jub, .t-ist {
    color: #808080;
}

/* Groups the „Jaunystė“ and KTU logos so KTU sits immediately to the
   right of „Jaunystė“, instead of the old opposite-corners layout. */
.header-logos{
    display: flex;
    align-items: center;
    gap: 14px;
}

.jaun-logo{
    height:60px;
    transition: all 0.3s ease-in-out;
}
.jaun-logo-zoomed{
    height:45px;
    /* No horizontal shift anymore — both logos live in one flex group now,
       so sliding just this one would visibly separate it from KTU's logo
       instead of keeping them together while the header shrinks. */
}

.text-logo-header{
    top:50%;

}

.ktu-logo-h {
    height:60px;
    /* KTU brand guidance: green version isn't supported, use black */
    filter: brightness(0);
    transition: all 0.3s ease-in-out;
}
.ktu-logo-h-zoomed {
    height:45px;
}

.openReg-btn-h, .openForm-btn{
    cursor: pointer;
}

/* -------- Mobile hamburger toggle (hidden on desktop) -------- */

.nav-toggle{
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 4px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 8;
}

/* Groups the 3 bars so they keep stacking into the hamburger icon even
   though .nav-toggle itself is now a row (icon + "Meniu" label). */
.nav-toggle-icon{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 26px;
    flex-shrink: 0;
}

.nav-toggle-bar{
    display: block;
    width: 26px;
    height: 2px;
    background-color: var(--text-body);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle-label{
    display: none; /* shown only at the ≤950px breakpoint where the button itself appears */
    font-size: 0.85rem;
    padding-right:10px;
    font-weight: 600;
    color: var(--text-body);
    white-space: nowrap;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){
    transform: translateY(8px) rotate(45deg);
    height:3px;
    z-index: 10;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){
    opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){
    transform: translateY(-9px) rotate(-45deg);
    height:3px;
    z-index: 10;
}

.nav-backdrop{
    display: none;
}

/* ------------- FOOTER ---------------------------------*/

footer{
    position:relative;
    z-index:0;
    background-color:var(--bg);
    display:flex;
    padding:0;
    /* "Kontaktai" grew a lot (2 emails + 4 named phone numbers) — 250px no
       longer fits it, since .f-info is centered via absolute positioning
       and doesn't push footer's own (fixed) height out on its own. */
    height:480px;
    box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.10);
}

.ktu-inspired-f{
    align-content: center;
    align-items: center;
    padding-left:60px;
}

.ktu-inspired-f img{
    height:53px;
}

.ktu-inspired-f-phones{
    visibility: hidden;
}

.prisijunk{
    display:flex;
    flex-direction:column;
    align-items: left;
    gap:5px;
}


.f-info{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-45%, -50%);
    padding-bottom: 20px;
    padding-top:20px;
    display:flex;
    flex-direction:row;
    align-items: top;
    white-space: nowrap;
    gap:100px;
}
/* These footer column titles are visually styled like headings but sit
   outside any H2, so they're plain text (not h3) — no heading here would
   semantically belong to the page's H1/H2 outline. */
.f-info-title{
    font-weight:bold;
    font-size:1.17em;
    margin:0;
}

footer p{
    margin:0;
}

.kontaktai{
    display:flex;
    flex-direction:column;
    align-items: left;
    gap:5px;
    /* Without an explicit width, this flex row item was free to shrink
       below what its (now properly wrappable — see .rep-list) contact
       list actually needs, squeezing names like "Choro soc. tinklų
       atstovė Miglė M." onto extra lines instead of fitting the modal's
       one-per-line look. */
    min-width: 320px;
}

.kontaktai a{
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.kontaktai a:hover{
    color:var(--accent);
}

.btn-1{
    display: inline-flex;
    align-items: center;
    position: relative;
    height:39px;
    width: fit-content;
    padding:7px 0px;
    padding-left:28px;
    padding-right:40px;
    font-weight: 600;
    text-transform: none;
    line-height: 1;
    color: var(--bg);
    background-color: var(--accent);
    border: 2px solid var(--accent);
    border-radius: 10px;
    transition: all 0.3s ease;
    text-decoration: none;
}
.btn-1::after{
    content: "»";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
}
.btn-1:hover{
    cursor: pointer;
    color: var(--black);
    background-color: var(--bg);
    border: 2px solid var(--black);
}

.btn-2{
    display: inline-flex;
    align-items: center;
    position: relative;
    margin-top:10px;
    height:39px;
    width: fit-content;
    /* Was padding:9px (symmetric). Shifted 1px from top to bottom so the
       text — centered within the padded content box, not the border box —
       sits 1px higher, matching .btn-1's apparent vertical centering.
       Sum stays 18px, so the border/box itself doesn't move. */
    padding-top:8px;
    padding-bottom:10px;
    padding-left:28px;
    padding-right:40px;
    font-weight: 600;
    text-transform: none;
    line-height: 1;
    color: var(--black);
    background-color: var(--bg);
    border: 2px solid var(--black);
    border-radius: 10px;
    transition: all 0.3s ease;
    text-decoration: none;
}
.btn-2::after{
    content: "»";
    position: absolute;
    right: 20px;
    top: calc(50% - 1px); /* follows the same 1px lift as the text (see .btn-2 padding) */
    transform: translateY(-50%);
    font-weight: 700;
}

.btn-2:hover{
    cursor: pointer;
    color: var(--text-light);
    background-color: var(--accent);
    border: 2px solid var(--accent);
}

/* Footer's .btn-2 ("Susisiekime!", "Prisijunk!") were already correctly
   centered as-is — the 1px lift above overcorrects them there. Restore
   the original symmetric padding/arrow position for just this context. */
footer .btn-2{
    padding-top: 9px;
    padding-bottom: 9px;
}
footer .btn-2::after{
    top: 50%;
}

/* Down-pointing arrow variant — for CTAs that scroll to the next section
   (e.g. the hero's "Pažink mus!") instead of navigating to another page,
   where the default "»" reads better. Bounces to read as "point down /
   scroll here" instead of a static glyph.
   The keyframes keep the base rule's translateY(-50%) vertical centering
   and add the bounce as a delta on top via calc() — an animation replaces
   the whole `transform` value while it's running, so re-declaring just an
   offset would otherwise knock the arrow off-center. */
@keyframes arrowDownBounce {
    0%, 100% { transform: translateY(-58%); }
    50%       { transform: translateY(calc(-58% + 4px)); }
}

.btn-1.arrow-down::after,
.btn-2.arrow-down::after {
    content: "↓";
    font-weight: 400;
    animation: arrowDownBounce 1.4s ease-in-out infinite;
}

.btn-2-f{
    height:39px;
    width:39px;
    background-color: var(--bg);
    border: 2px solid var(--black);
    border-radius: 10px;
    cursor: pointer;
    background-image: url("/assets/icons/face-dark.svg");
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-2-f:hover{
    color: var(--text-light);
    background-color: var(--accent);
    border: 2px solid var(--accent);
    background-image: url("/assets/icons/face-white.svg");
}

.btn-2-i{
    height:39px;
    width:39px;
    background-color: var(--bg);
    border: 2px solid var(--black);
    border-radius: 10px;
    cursor: pointer;
    background-image: url("/assets/icons/insta-dark.svg");
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-2-i:hover{
    color: var(--text-light);
    background-color: var(--accent);
    border: 2px solid var(--accent);
    background-image: url("/assets/icons/insta-white.svg");
}

.privatumas,
.sek{
    display:flex;
    flex-direction:column;
    align-items:left;
    gap:5px;
}

.privacy-link{
    color: var(--black);
    text-decoration: underline;
    font-weight: 500;
    width: fit-content;
}

.privacy-link:hover{
    color: var(--accent);
}

.copyright a:hover{
    color: var(--accent);
}

.socials{
    display:flex;
    text-decoration:none;
    flex-direction:row;
    font-size: 8pt;
    align-items:center;
    margin-top:7px;
    color:#fff;
    gap:20px;
}

.socials img{
    height:50px;
}

.fb{
    display:flex;
    flex-direction:column;
    align-items: center;
}
.fb img{
    box-shadow: 0px 4px 4px rgba(0,0,0,0.25);
    border-radius: 10px;
    transition: 0.3s;
}
.fb img:hover{
    box-shadow: 0 0 25px 10px var(--main-darker);
}

.insta{
    display:flex;
    flex-direction:column;
    align-items: center;
}
.insta img{
    box-shadow: 0px 4px 4px rgba(0,0,0,0.25);
    border-radius: 10px;
    transition: 0.3s;
}

.insta img:hover{
    box-shadow: 0 0 25px 10px var(--main-darker);
}

.socials a{
    color:var(--text-light);
    text-decoration: underline;
}

.copyright{
    position:absolute;
    display:flex;
    align-items:flex-end;
    flex-direction: column;
    text-align: right;
    right:20px;
    bottom: 20px;
    font-size: 11px;
}

.copyright a{
    color:inherit;
}

/* ============================================
   UNIFIED MODAL SYSTEM
   ============================================ */

/* Base modal styles - all modals share this */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    /* Same mobile-Safari-toolbar issue as .hero-banner (pagrindinis.css) —
       100vh doesn't track the actual visible viewport. dvh does; vh kept
       first as a fallback for browsers without dvh support. */
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(10px);
    z-index: 1000; /* Higher than header */
    
    /* Hidden state */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
}

/* Visible state - works for ALL modals */
.modal.is-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease, visibility 0s 0s;
}

/* Specific modal tweaks */
#eventModal {
    overflow-y: auto;
    overflow-x: hidden;
    align-items: flex-start; /* Event modal scrolls from top */
    padding: 40px 20px;
}

.scroll-arrow {
    /* ✅ FIX: left:0 right:0 kad būtų visame modalio plotyje, ne 98% */
    position: fixed;
    bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px));
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.scroll-arrow button {
    background: var(--accent);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: bounce 2s infinite;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    font-size: 1rem;
    border: none; /* it's a <button> now */
    cursor: pointer;
}

.scroll-arrow button:hover {
    filter: brightness(1.1);
}

.scroll-arrow.visible {
    opacity: 1;
    /* Only clickable while actually shown — stays out of the way of
       whatever's underneath it otherwise. */
    pointer-events: auto;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    40%       { transform: translateY(-8px); }
    60%       { transform: translateY(-4px); }
}

/* Image modal darker background */
.img-modal {
    background-color: rgba(0, 0, 0, 0.85);
}

/* Modal content containers */
.modal-content {
    background-color: var(--bg-darker);
    /* Wide enough for the 2-column phone list (Kontaktai) to not overlap —
       520px was too tight once "Choro soc. tinklų atstovė Miglė M." etc.
       had to fit two per row. */
    width: 610px;
    max-width: 90vw;
    max-height: 90vh; /* Prevent overflow */
    overflow-y: auto; /* Scroll if content too long */
    border-radius: 10px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    margin:auto;
}

.reg-modal-content {
    background-color: var(--bg-darker);
    width: 650px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    margin: auto;
}

/* Modal Header */
.modal-header {
    background-color: var(--bg);
    color: var(--black);
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    margin: 0;
    font-size: 24px;
}

/* Close button */
.modal-close {
    font-size: 3rem;
    cursor: pointer;
    transition: 0.3s;
    line-height: 0.8;
    padding: 0 6px 8px 6px;
}

#regModal .modal-close,
#contactModal .modal-close{
    color: var(--bg);
    position: absolute;
    top: 10px;
    right: 20px;
    color: var(--bg);
    z-index: 10;
}

#regModal .modal-close:hover,
#contactModal .modal-close:hover{
    background: rgba(255, 255, 255, 0.3);
}

.modal-close:hover {
    color: var(--accent);
}

/* Specific positioning for image/event modals */
#eventModal .modal-close {
    position: absolute;
    top: 10px;
    right: 20px;
    color: #fff;
    z-index: 10;
}

.img-modal .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    z-index: 10;
}


.img-modal .modal-close:hover,
#eventModal .modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Modal Body */
.modal-body {
    padding: 25px;
}

.modal-content .modal-body h3 {
    color: var(--accent);
    margin-bottom: 4px;
    padding:0;
    /* Contact form now sits above "Kontaktai" in this modal — needs more
       breathing room than the old 10px so the two don't read as one block. */
    margin-top:40px;
}

.modal-body a {
    color: var(--black);
    text-decoration: none;
    font-weight: 500;
}

.modal-body p{
    margin:0;
}

.modal-body a:hover {
    text-decoration: underline;
}

form {
    display: flex;
    flex-direction: column;
}

input, textarea {
    font-family: Inter, sans-serif;
    resize: vertical;
    margin: 8px 0 15px;
    padding: 12px;
    border: 1px solid var(--bg);
    border-radius: 8px;
    font-size: 14px;
}

textarea{
    min-height: 100px;
    max-height: 300px;
}

/* Custom "please fill in" validation UI — replaces the native browser
   bubble (which can't be restyled/recolored) with a consistent, site-wide
   design. See assets/js/main.js, section 15. */
.field-error {
    display: none;
    align-items: center;
    gap: 6px;
    margin: -10px 0 12px;
    font-size: 0.82rem;
    color: var(--black);
    line-height: 1.3;
}
.field-error.visible {
    display: flex;
}
.field-error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}
input.field-invalid, textarea.field-invalid {
    border-color: var(--accent);
}

.modal .btn-1{
    display: inline-flex;
    align-items: center;
    position: relative;
    height:39px;
    width: fit-content;
    padding:7px 0px;
    padding-left:28px;
    padding-right:40px;
    font-weight: 600;
    text-transform: none;
    line-height: 1;
    color: var(--bg);
    background-color: var(--accent);
    border: 2px solid var(--accent);
    border-radius: 10px;
    transition: all 0.3s ease;
    text-decoration: none;
}
.modal .btn-1::after{
    content: "»";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
}
.modal .btn-1:hover{
    cursor: pointer;
    color: var(--black);
    background-color: var(--bg);
    border: 2px solid var(--black);
}

#contactModal .btn-1{
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* Pagal nutylėjimą paslepiame reCAPTCHA ženkliuką */
.grecaptcha-badge { 
opacity: 0 !important;
    transform: translateY(20px); /* Pridedame šiek tiek judesio iš apačios */
    transition: opacity 0.5s ease, transform 0.5s ease !important;
    pointer-events: none; /* Neleidžiame spausti, kol nematomas */
    z-index: 100000;
}

/* Kai modalas yra aktyvus, parodome ženkliuką */
.captcha-visible .grecaptcha-badge { 
 opacity: 1 !important;
 transform: translateY(8px);
 pointer-events: auto; /* Leidžiame spausti */
 visibility: visible !important;
}

/*----------------------- REGISTRACIJOS LANGAS ------------------------*/
#contactModal,
#regModal {
    align-items: center !important; /* Vertical center */
    justify-content: center !important; /* Horizontal center */
    align-content: center;
    padding: 20px; /* Add some padding so modal doesn't touch edges on small screens */
    padding-top: 50px;
}

.reg-modal-content .modal-body {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping on small screens */
    gap: 20px;       /* Space between left and right sections */
    padding-bottom: 50px;
}

.body-left{
    flex: 1;         /* Gives both sides equal width */
    /* flex:1 sets flex-basis:0%, so the old "width:250px" here never
       actually did anything — a flex item's min-width defaults to auto
       (its content's min-content size), and body-right's un-wrappable
       phone-number lines are wider than body-left's, so body-right was
       winning extra space over body-left despite both being flex:1.
       min-width:0 lets them actually split the row evenly like the .btn-1
       below expects, and lets that same text wrap normally instead. */
    min-width: 0;
    padding:0 20px;
    align-items: left;
    align-content: left;
}

.modal-body h3{
    color: var(--black);
    margin-bottom: 0;
}

.modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 25px;
}

.rep-list {
    list-style-type: disc; /* This creates the solid "bubble" */
    padding-left: 20px;    /* Space for the bubbles to sit in */
    margin: 5px 0;
    /* Was only applied via ".body-left ul" (regModal-only), so the same
       .rep-list markup in contactModal (no .body-left ancestor there)
       rendered as a plain block list instead of matching "Prisijunk!"'s. */
    display: flex;
    flex-direction: column;
    /* The global "ul" rule above sets white-space:nowrap (for the nav
       menu) — .rep-list isn't that, and inheriting nowrap stopped names
       like "Choro soc. tinklų atstovė Miglė M." from wrapping at all,
       overflowing body-left/body-right on narrow (iPhone-width) modals
       instead of just breaking onto a second line. */
    white-space: normal;
}
.body-left ul {
    display: flex;
    flex-direction: column;
    padding-left: 18px;
}

/* Kontaktai modal, desktop only: split the 2 emails / 4 phone numbers into
   2 columns each so the whole "Kontaktai" section is visible without
   scrolling, instead of one long single-column list. Scoped to #contactModal
   so "Prisijunk!"'s lists (regModal) keep their existing single-column look. */
@media (min-width: 951px) {
    #contactModal .rep-list {
        display: block;
        columns: 2;
        column-gap: 24px;
    }
    #contactModal .rep-list li {
        break-inside: avoid; /* keep each name+number together, not split across columns */
    }
}

.green-text {
    color: var(--black);
    font-weight: 700;
}

.dalyvavimas-s .btn-1{
     text-decoration: none;
}

.map-container-c {
    position: relative;
    z-index: 1;
    width: 100%;        /* Take full width of .body-right */
    max-width: 400px;   /* Keep it tidy */
    height: 250px !important; /* Force the height you actually want */
    margin-top: 15px;
}

.map {
    width: 100%;
    height: 100% !important;
    border-radius: 10px;
}

.map-loader {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-darker);
    border-radius: 10px;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.map-loader.map-loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.map-loader-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #fff;
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: map-loader-spin 0.8s linear infinite;
}

@keyframes map-loader-spin {
    to { transform: rotate(360deg); }
}

/* Prevent the right column from stretching the map */
.body-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* This stops the "stretching" behavior */
    flex: 1;
    min-width: 0; /* see .body-left — keeps both columns actually equal */
    padding: 0 20px;
}

/* Mygtuko zona apačioje */
.modal-footer-cta {
    text-align: center;
    margin-top: 10px;
}

.reg-link {
    display: flex;          /* Use flexbox for easy alignment */
    justify-content: flex-start; /* Aligns items to the left */
    width: 100%;            /* Ensure it takes full width of the body-left */
    margin-top: 20px;       /* Adds space above the button */
}

.reg-link a,
.reg-link .btn-1 {
    /* Was fit-content, so it stayed only as wide as the text needed —
       now that body-left is properly as wide as body-right (see
       .body-left min-width:0), it has enough room to grow into and let
       "Registracija į kolektyvą" sit on one line instead of wrapping. */
    width: 100%;
}

/*-------------- IMAGE MODAL SPECIFIC ---------*/


.modal-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    max-width: 100%;
}

.modal-content-wrapper figure {
    display: table;          /* This is the secret: it shrinks to the width of the image */
    margin: 0 auto;          /* Centers the entire figure unit */
    max-width: 90vw;         /* Prevents the box from being wider than the screen */
}

#modalImg {
    display: block;          /* Removes extra space at the bottom of the image */
    max-height: 70vh;
    width: auto;
    max-width: 100%;         /* Keeps it responsive */
}

#modalCaption {
    display: table-caption;  /* Forces caption to respect the table's width */
    caption-side: bottom;    /* Places it below the image */
    padding-top: 10px;
    color: #f1f1f1;
    font-size: 1rem;
    text-align: left;        /* Text starts at the left edge of the image */
    word-wrap: break-word;   /* Ensures long words don't break the layout */
}

.modal-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 40px;
    padding: 20px 15px;
    cursor: pointer;
    z-index: 5;
    user-select: none;
    transition: all 0.3s;
}

.modal-arrow:hover {
    background: rgba(255, 255, 255, 0.3);
}

.modal-arrow.prev { left: 10px; }
.modal-arrow.next { right: 10px; }




/*-------------- CARD MODAL (Event Modal Content) --------------------------*/
/*---- artimiausių modalas------------------*/
#modal-body .event-card {
    /* Pakeičiame fiksuotą plotį į maksimalų, kad grid galėtų jį mažinti */
    width: 100%; 
    min-width: 500px;
    max-width: 500px; 
    border-radius: 5px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.2s;
}

#modal-body .card-image {
    min-height: 500px;
    max-height: 500px;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* Remove background properties from here */
}

#modal-body .card-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--bg-image); /* Use the custom property */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(20px);
    transform: scale(1.1); /* Slight scale to cover blur edges */
    z-index: 0;
}

#modal-body .card-image img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

#modal-body .card-content {
    padding: 0 !important;
}

#modal-body  .card-title {
font-size: 40px;
font-weight: 600;
margin: 0 0 10px 0;
color: var(--bg);
}

#modal-body .card-description,
#modal-body .card-location,
#modal-body .card-date {
color: var(--bg);
}

.card-description {
    color: var(--black);
    font-size: 1rem;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Change this number to show more/fewer lines */
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* Optional: set a min-height to keep all cards the same size */
    line-height: 1.5em;
}

.card-description.more{
    display: block; /* Disable the flex-box clamp */
    overflow: visible;
    max-height: none; /* Allow it to grow as long as the text is */
    -webkit-line-clamp: unset;
    color: white; /* Optional: adjust for your dark modal background */
}

/* Inline CTA button embedded in an event/news description via
   [[Label->URL]] (see renderEventDescription() in db_config.php) — e.g.
   the jubilee concert card linking to its registration section. Own class
   rather than .btn-1/.btn-2 so populateEventModal()'s "strip the card's
   own Plačiau button" logic (assets/js/main.js, querySelector(".btn-1"))
   can't mistake this for it. Self-contained colors so it reads the same
   whether it ends up on the card's light background or the modal's dark
   one — same visual language as .btn-1 (solid accent, arrow, hover-invert). */
.desc-cta {
    display: inline-flex;
    align-items: center;
    position: relative;
    margin: 10px 0;
    height: 39px;
    width: fit-content;
    padding: 7px 40px 7px 20px;
    font-weight: 600;
    line-height: 1;
    color: var(--bg);
    background-color: var(--accent);
    border: 2px solid var(--accent);
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.desc-cta::after{
    content: "»";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
}
.desc-cta:hover{
    color: var(--black);
    background-color: var(--bg);
    border-color: var(--black);
}

#modal-body .card-date{
    padding-bottom: 30px;
}

.event-card:hover {
    transform: translateY(-5px);
}

#eventModal .card-title{
margin: 10px 0 0px 0;
}

.e-modal-content{
    max-height: 100vh;
    background:none; 
    padding:15px; 
    color:white; 
    max-width:100vh; 
    position:relative; 
    z-index:100;
}


@media (max-width: 1870px){
    /* -------- footer -------- */
    footer{
        /* .f-info is vertically centered (position:absolute + translateY),
           so its own content height overflows past footer's edges whenever
           footer is shorter than that content — which the old 100px
           padding-bottom below made worse. Kontaktai's now-long contact
           list needs real headroom here, not just a slightly taller box. */
        height:620px;
    }

    .f-info{
        padding-bottom:40px;
        flex-direction: row;
    }

    .ktu-inspired-f{
        align-content:end;
        align-items:center;
        padding-left:40px;
        padding-bottom: 30px;
    }
}

@media (max-width: 1400px){
    /* -------- footer -------- */
    /* Row layout (see the 1870px query) only has room for the 4 columns
       down to ~1400px before text starts getting clipped — below that,
       drop to a 2-column grid instead. */
    footer{
        height: auto;
        min-height: 700px;
        padding-bottom: 80px;
        flex-direction: column;
        align-items: center;
    }
    .f-info{
        position: static;
        transform: none;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px 30px;
        white-space: normal;
        padding: 60px 30px 20px;
        width: 100%;
        max-width: 700px;
        margin: 0 auto;
    }

    .copyright{
        position:absolute;
        display:flex;
        align-items:flex-start;
        flex-direction: column;
        text-align: left;
        left:30px;
        bottom: 20px;
        font-size: 8pt;
    }
    .ktu-inspired-f-phones{
        visibility:visible;
        grid-column: 1 / -1;
        justify-self: center;
    }
    .ktu-inspired-f-phones img{
        height: 39px;
    }

    .ktu-inspired-f{
        display: none;
    }
}

@media (max-width: 950px){
    /* -------- header -------- */
    header{
        position:fixed;
        top:0;
        left:0;
        right:0;
        background:var(--bg);
        display:flex;
        flex-direction: column;
        align-items:center;
        gap:5px;
        height:100px;
        padding:15px 0px;
        z-index: 7;
        transition: all 0.3s ease-in-out;
    }

    .header-logos{
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .jaun-logo{
        height: 60px;
        transition: all 0.2s ease-in-out;
    }

    .jaun-logo-zoomed{
        height: 40px;
        /* Kept together with KTU's logo as one group — see desktop rule. */
    }

    .ktu-logo-h-zoomed{
        height: 40px;
    }


    nav a,
    nav button{
        font-family: InterVariable, Sans-Serif;
        padding: 0px 3px;
        padding-bottom: 5px;
        font-size: 0.9rem;
    }

    nav li:after {
        content: "|";
        font-size: 0.8rem;
        margin: 0px;
    }

    .main-nav{
        transform: translate(-50%, 0);
        transition: transform 0.3s ease;
    }

    .main-nav-zoomed{
        position:absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    /* -------- hamburger menu -------- */

    .nav-toggle{
        display: flex;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
    }

    .nav-toggle-label{
        display: inline-block;
        font-size:1rem;
    }

    .nav-backdrop{
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 6;
    }

    .nav-backdrop.nav-open{
        opacity: 1;
        visibility: visible;
    }

    .main-nav li a.active::after,
    .main-nav li a:hover::after,
    .main-nav li button.active::after,
    .main-nav li button:hover::after {
        transform: scaleX(1) translateX(-50%); /* Adjust the scale and translation for the underline */
    }

    /* #main-nav (ID selector) is used here instead of .main-nav so this
       always wins over the pre-existing .main-nav / .main-nav-zoomed rules
       (defined in header.php's inline critical CSS and further up this
       file) regardless of source order — those rules fought over left/top/
       transform and caused the panel to animate in diagonally instead of
       sliding in from the left whenever the page was scrolled.
       left/top never change between closed and open: only transform
       (translateX) and opacity are animated, so nothing "jumps". */
    #main-nav{
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        background: var(--bg);
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-100%);
        transition: opacity 0.25s ease, transform 0.3s ease, visibility 0.3s ease;
        z-index: 6;
    }

    #main-nav.nav-open{
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
    }

    .main-nav ul{
        flex-direction: column;
        white-space: normal;
        width: 100%;
    }

    .main-nav li{
        width: 100%;
    }

    .main-nav li:after{
        content: none;
    }

    .main-nav li a,
    .main-nav li button{
        display: block;
        width: 100%;
        box-sizing: border-box;
        min-height: 48px;
        padding: 14px 24px;
        font-size: 1.05rem;
        text-align: left;
        border-bottom: 1px solid var(--bg-darker);
    }

    .main-nav li:last-child a,
    .main-nav li:last-child button{
        border-bottom: none;
    }

}

@media (max-width: 768px){
    nav a,
    nav button{
        font-family: InterVariable, Sans-Serif;
        padding: 5px 3px;
        font-size: 0.7rem;
        letter-spacing: normal;
    }


 /*----------------------- KONTAKTU IR REGISTRACIJOS LANGAS ------------------------*/

    /* Base Modal Styles for Mobile */
    .modal {
        padding: 10px;
    }
    .modal-content, 
    .reg-modal-content {
        width: 100%;
        max-width: 340px; /* Fits within the 360px screen width */
        margin: auto;
        max-height: 85vh;
    }

    /* Header Adjustments */
    .modal-header {
        padding: 15px;
    }

    .modal-header h2 {
        font-size: 1.25rem; /* Smaller font for mobile */
    }

    /* Body: Switch from Flex-Row to Flex-Column */
    .modal-body {
        display: flex;
        flex-direction: column; /* Stack left and right parts vertically */
        padding: 15px;
        background-color: var(--bg-darker);
    }

    /* Typography & Lists */
    .modal-content .modal-body h3{
        font-size: 1.1rem;
        margin: 28px 0 0; /* same "Kontaktai"-below-form separation as desktop */
        padding:0px;
    }

    .modal-content .modal-body p{
        margin-top: 0;
    }

    .rep-list {
        padding-left: 20px;
        font-size: 1rem; /* Slightly smaller text for better wrapping */
    }

    .rep-list li {
        margin-bottom: 8px;
    }

    .green-text {
        display: block; /* Moves the time to a new line if it's too long */
        font-weight: bold;
        color: var(--accent);
    }

    .reg-link {
        display: block;
        align-items: center;
        align-content: center;
        justify-content: center;
        width: 100%;
        margin-top: 20px;
        padding-left: 0;
    }

    .reg-link .btn-1{
        font-size: 0.9rem;
        padding-left:20px;
        padding-right: 30px;
        background-position-x: 228px;
    }
    /* Button Styling */

    /* Map Container */
    .map-container-c {
        width: 100%;
        height: 150px; /* Fixed height for mobile */
        background: #f0f0f0;
        border-radius: 4px;
        overflow: hidden;
    }

    .map {
        width: 100%;
        height: 100%;
    }

    /*--- modal for images*/
    #modalImg {
        max-width: 100vw;
        max-height: 60vh;
        width: 100%;
        height: auto;
    }

    .img-modal-content {
        z-index: 7;
    }

    #modalCaption{
        padding: 0px 10px;
        font-size: 0.9rem;
    }

    /* modal for events/news*/
    #modal-body .card-image {
        max-height: 40vh;
        min-height: 40vh;
        width: 100%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .ms-wrap {
        max-height: 40vh;
        min-height: 40vh;
    }

    #modal-body .card-image img {
        height: 100%;
        width: auto;
        display: block;
        object-fit: contain;
        object-position: center; 
        display: block;
    }
    #modal-body  .card-title {
        font-size: 1.5rem;
        font-weight: 600;
        margin: 5px 0 10px 0;
        color: var(--bg);
    }

    .artimiausi-s .btn-1{
        margin-bottom: 10px;
    }

    .arrow-next, .arrow-prev {
        width: 40px;
        font-size: 2.5rem;
    }

    /* Hide arrows on very small screens to avoid clutter */
    .modal-arrow {
        padding: 10px;
        font-size: 25px;
    }

}

@media (max-width: 487px){
    /* -------- footer -------- */
    /* Below 487px the 2-column grid squeezes each column too narrow for
       its content (buttons, contact links), clipping the right side.
       One column per row avoids that. */
    .f-info{
        grid-template-columns: 1fr;
    }

    .ktu-inspired-f-phones{
        grid-column: auto;
    }
}