@font-face {
    font-family: 'LatoL';
    src: url(betuk/Lato-Light.ttf) format('truetype');
}

@font-face {
    font-family: 'Lato';
    src: url(betuk/Lato-Regular.ttf) format('truetype');
}
@font-face {
    font-family: 'NotoSans';
    src: url(betuk/NotoSans-Thin.ttf) format('truetype');
}

@font-face {
    font-family: 'NotoSansL';
    src: url(betuk/NotoSans-Light.ttf) format('truetype');
}
/* CSS Color Variables */
:root {
    /* Text colors */
    --white: rgba(255, 255, 255, 0.95);
    --white-pure: white;
    --blue: #1f206b;
    --blue-dark: #12134e;
    --blue-transparent-light: #12134e1c;
    --blue-transparent-medium: #12134e1d;
    
    /* Background colors */
    --gallery-bg: #dfdccd;
    --modal-overlay: rgba(0, 0, 0, 0.8);
    --transparent: rgba(0, 0, 0, 0);
    
    /* Border colors */
    --border-beige: #c4bda0;
    --border-gray: #bdbdbd;

    --hatter: #edeae1;
    
    /* Button colors */
    --button-bg: #afa98e42;
    --button-bg-hover: #afa98e69;
    --button-bg-hover-mobile: #a76f14;
    
    /* Shadow colors */
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.2);
    --shadow-dark: rgba(0, 0, 0, 0.5);
    --gold-highlight: #f2d54755;
}

* {
    margin: 0;
    padding: 0;
}

/* Small disclaimer text before gallery */
.gallery-image-disclaimer {
    font-family: 'Lato', sans-serif;
    font-size: 0.65rem;
    color: var(--blue);
    background-color: var(--hatter);
    padding-top: 2vmin;
    padding-left: 2vmin;
    line-height: 1.2;
}

#galeria {
    padding-top: 8vmin;
    padding-bottom: 16vmin;
    /*background-image: url("hatter5.png");
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;*/
    background-color: var(--hatter);
}

/* New masonry-style gallery layout */
.kepek {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18vmax, 1fr));
    grid-auto-rows: 18vmax;
    grid-auto-flow: dense;
    gap: 2vmin;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 2vmin;
}

/* Different image sizes for variety */
.kpk {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px var(--shadow-light);
}

.kpk:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 16px var(--shadow-medium);
}

/* Size classes for admin-controlled sizing */
.kpk.size-large {
    grid-column: span 2;
    grid-row: span 2;
}

.kpk.size-medium-wide {
    grid-column: span 2;
}

.kpk.size-medium-tall {
    grid-row: span 2;
}

.kpk.size-small {
    grid-row: span 1;
}

/* Hide page title on gallery page (all devices) */
.page-main-title {
    display: none !important;
}

/* Responsive adjustments */


#nagyKepHatter {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--modal-overlay);
    z-index: 2000;
}
#nagyKep {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: calc(100vw - 12vmax);
    max-height: 80vh;
    box-shadow: 0 0 20px var(--shadow-dark);
    transition: opacity 0.2s ease;
}
#nagyKepHatter span {
    position: absolute;
    top: 20px;
    right: 30px;
    color: var(--white-pure);
    font-size: 30px;
    cursor: pointer;
    z-index: 2001;
}

/* Modal disclaimer at bottom-left corner */
.gallery-image-disclaimer-modal {
    font-family: 'Lato', sans-serif;
    position: absolute;
    bottom: 8px;
    left: 12px;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.2;
    max-width: 85%;
}


@media screen and (min-width: 768px)
{
    :root {
        --section-height: clamp(400px, 50vw, 900px);
    }
    
    /* Main image and nav buttons centered in space below thumbnail strip */
    #nagyKep {
        top: calc(31px + 50vh);
        left: 50%;
        transform: translate(-50%, -50%);
        max-height: calc(100vh - 95px);
        object-fit: contain;
    }
    
    #nagyKepBal, #nagyKepJobb {
        position: absolute;
        width: 15vmax;
        height: 15vmax;
        top: calc(31px + 50vh);
        transform: translateY(-50%);
        background-color: var(--transparent);
        color: var(--white-pure);
        border: none;
        cursor: pointer;
        display: none;
        border-radius: 100%;
        background-repeat: no-repeat;
        background-size: 2.5vmax;
        background-position-y: center;
        transition: background-color 0.3s ease;
    }
    
    #nagyKepBal {
        left: 5vmax;
        background-image: url(icons/arrowicon2.svg);
        background-position-x: 35%;
        z-index: 2001;
    }
    
    #nagyKepJobb {
        right: 5vmax;
        background-image: url(icons/arrowicon1.svg);
        background-position-x: 65%;
    }
    
    #nagyKepBal:hover, #nagyKepJobb:hover {
        background-color: var(--transparent);
    }

    #modal-thumbnails {
        position: absolute;
        top: 0;
        left: 48px;
        right: 48px;
        display: flex;
        justify-content: flex-start;
        gap: 0.5vmax;
        overflow-x: auto;
        padding: 1vmax 0;
        max-width: 90vmax;
        width: calc(100vw - 96px);
        min-height: 41px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    #modal-thumbnails::-webkit-scrollbar {
        display: none;
    }
    #modal-thumbnails .modal-thumb {
        width: 3.2vmax;
        height: 3.2vmax;
        min-width: 3.2vmax;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 0.5vmax;
        cursor: pointer;
        opacity: 0.7;
        border: 0.2vmax solid transparent;
        transition: border 0.2s, opacity 0.2s;
    }
    #modal-thumbnails .modal-thumb.active {
        opacity: 1;
        border: 0.2vmax solid var(--white-pure);
        box-shadow: 0 0 8px var(--gold-highlight);
    }
    /* Legacy support for img tags if any */
    #modal-thumbnails img {
        width: 3.2vmax;
        height: 3.2vmax;
        object-fit: cover;
        border-radius: 0.5vmax;
        cursor: pointer;
        opacity: 0.7;
        border: 0.2vmax solid transparent;
        transition: border 0.2s, opacity 0.2s;
    }
    #modal-thumbnails img.active {
        opacity: 1;
        border: 0.2vmax solid var(--white-pure);
        box-shadow: 0 0 8px var(--gold-highlight);
    }

    #gallery-filter-bar {
        position: relative;
        text-align: center;
        background: var(--hatter);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0;
    }
    .gallery-filter-btn {
        margin-top: 14vmax;
        padding: 0.6vmax 2vmax 0.6vmax 2vmax;
        border: none;
        background: transparent;
        cursor: pointer;
        font-size: 1.1vmax;
        font-family: "Lato";
        position: relative;
        transition: background 0.4s, color 0.2s;
        color: var(--blue);
        outline: none;
    }
    .gallery-filter-btn:hover {
        background-color: var(--blue-transparent-light);
    }
    .gallery-filter-btn:not(:last-child) {
        border-right: 0.1vmax solid var(--border-gray);
    }
    .gallery-filter-btn.active {
        background: var(--blue-transparent-medium);
        color: var(--blue-dark);
        border-bottom: 0.15vmax solid var(--blue-dark);
        z-index: 1;
    }
    
    /* Rooms dropdown styling */
    .gallery-filter-dropdown {
        position: relative;
        display: inline-block;
    }
    .gallery-filter-dropdown .gallery-filter-parent {
        border-right: none;
    }
    .gallery-filter-submenu {
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: var(--hatter);
        min-width: 200px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        border-radius: 0 0 8px 8px;
        z-index: 100;
        flex-direction: column;
    }
    .gallery-filter-dropdown:hover .gallery-filter-submenu,
    .gallery-filter-dropdown.active .gallery-filter-submenu {
        display: flex;
    }
    .gallery-filter-submenu .gallery-filter-sub {
        margin-top: 0;
        padding: 0.8vmax 1.5vmax;
        text-align: left;
        border-right: none;
        border-bottom: 1px solid var(--border-gray);
        white-space: nowrap;
    }
    .gallery-filter-submenu .gallery-filter-sub:last-child {
        border-bottom: none;
        border-radius: 0 0 8px 8px;
    }
    .gallery-filter-submenu .gallery-filter-sub:hover {
        background-color: var(--blue-transparent-light);
    }
    .gallery-filter-submenu .gallery-filter-sub.active {
        background: var(--blue-transparent-medium);
        color: var(--blue-dark);
    }
    
    #ajanlat {
        width: 100%;
        min-height: var(--section-height);
        background-image: url("./kintikepestesotet.avif");
        background-size: cover;
        background-position: center center;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
        overflow: hidden;
     }
   
     .ajanlat-tartalom {
        text-align: center;
        width: 100%;
        /*max-width: 1400px;*/
        padding: clamp(1rem, 3vw, 2rem);
     }
   
     .text-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: clamp(0.8rem, 1.5vw, 2rem);
        flex-wrap: wrap;
     }
   
     .flip-text {
        color: var(--white-pure);
        font-family: "NotoSans";
        font-size: clamp(1.8rem, 3vw, 5rem);
        letter-spacing: clamp(0.05rem, 0.08vw, 0.1rem);
        text-transform: uppercase;
        opacity: 0;
        transform: rotateX(30deg);
        transform-origin: bottom;
        margin: 0;
     }
   
     .flip-text.animate {
        animation: flipIn 0.5s forwards;
     }
   
     .flip-text.delayed {
        animation-delay: 0.5s;
     }
   
     @keyframes flipIn {
        0% {
           opacity: 0;
           transform: rotateX(30deg);
        }
        100% {
           opacity: 1;
           transform: rotateX(0deg);
        }
     }
   
     #agomb {
        border: solid clamp(0.05rem, 0.12vw, 0.2rem) #c4bda0;
        background-color: var(--button-bg);
        color: var(--white-pure);
        text-decoration: none;
        padding: clamp(1rem, 1.1vw, 1.5rem) clamp(1.5rem, 1.2vw, 2.5rem);
        border-radius: clamp(0.4rem, 0.6vw, 0.8rem);
        font-family: "NotoSansL";
        font-size: clamp(1rem, 1vw, 1.3rem);
        text-transform: uppercase;
        transition: all 0.6s ease;
        opacity: 0;
        display: inline-block;
        margin-top: clamp(1.5rem, 8vw, 8.5rem);
     }
   
     #agomb.show {
        animation: fadeIn 0.5s forwards;
        animation-delay: 1.5s;
     }
   
     @keyframes fadeIn {
        0% {
           opacity: 0;
        }
        100% {
           opacity: 1;
        }
     }
   
     #agomb:hover {
        background-color: var(--button-bg-hover);
        transform: translateY(-2px);
     }
}

/* Three breakpoint categories for modal: Desktop (1024px+), Tablet (768–1023px), Mobile (≤767px).
   Tablet has a bigger thumbnail strip than desktop; tablet and mobile center the main image in the space below. */
/* Tablet: thumbnail gallery bigger than desktop; main image and nav buttons centered in space below strip */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .gallery-image-disclaimer {
        font-size: 0.55rem;
    }
    #modal-thumbnails {
        left: 16px;
        right: 16px;
        width: min(750px, calc(100vw - 32px));
        height: 64px;
        min-height: 64px;
        padding: 2vmax 0;
    }
    #modal-thumbnails .modal-thumb {
        width: 5.5vmax;
        height: 5.5vmax;
        min-width: 5.5vmax;
    }
    #modal-thumbnails img {
        width: 5.5vmax;
        height: 5.5vmax;
        min-width: 5.5vmax;
    }
    /* Center main image in the space below thumbnail strip (no overlap, works for portrait and landscape) */
    #nagyKep {
        top: calc(32px + 50vh);
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 85vw;
        max-height: calc(100vh - 100px);
        object-fit: contain;
    }
    /* Center nav buttons in the space below thumbnail strip, closer to screen edges */
    #nagyKepBal,
    #nagyKepJobb {
        top: calc(32px + 50vh);
        transform: translateY(-50%);
    }
    #nagyKepBal {
        left: 6px;
    }
    #nagyKepJobb {
        right: 6px;
    }
}

@media screen and (max-width: 767px)
{
    .gallery-image-disclaimer {
        font-size: 0.5rem;
    }
    .page-main-title {
        font-size: clamp(1rem, 4vmin, 1.5rem);
        padding: 0 0.5rem;
    }
    /* Center main image in the space below thumbnail strip (no overlap, works for portrait and landscape) */
    #nagyKep {
        top: calc(55px + 50vh);
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: calc(100vw - 4vmin);
        max-height: calc(100vh - 130px);
        object-fit: contain;
    }
    /* Center nav buttons in the space below thumbnail strip */
    #nagyKepBal, #nagyKepJobb {
        position: absolute;
        width: 25vmin;
        height: 25vmin;
        top: calc(55px + 50vh);
        transform: translateY(-50%);
        background-color: var(--transparent);
        color: var(--white-pure);
        border: none;
        cursor: pointer;
        display: none;
        border-radius: 100%;
        background-repeat: no-repeat;
        background-size: 2.5vmax;
        background-position-y: center;
        transition: background-color 0.3s ease;
    }
    
    #nagyKepBal {
        left: 6px;
        background-image: url(icons/arrowicon2.svg);
        background-position-x: 35%;
        z-index: 2001;
    }

    #modal-thumbnails {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 1.25vmin;
        position: absolute;
        top: 56px;
        left: 3vmin;
        right: 3vmin;
        margin-top: 0;
        overflow-x: auto;
        padding: 1.25vmin 0;
        max-width: calc(100vw - 6vmin);
        min-height: 46px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    #modal-thumbnails::-webkit-scrollbar {
        display: none;
    }
    #modal-thumbnails .modal-thumb {
        width: 8.5vmin;
        height: 8.5vmin;
        min-width: 8.5vmin;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 4px;
        cursor: pointer;
        opacity: 0.7;
        border: 2px solid transparent;
        transition: border 0.2s, opacity 0.2s;
    }
    #modal-thumbnails .modal-thumb.active {
        opacity: 1;
        border: 2px solid var(--white-pure);
        box-shadow: 0 0 8px var(--gold-highlight);
    }
    /* Legacy support for img tags if any */
    #modal-thumbnails img {
        width: 8.5vmin;
        height: 8.5vmin;
        object-fit: cover;
        border-radius: 4px;
        cursor: pointer;
        opacity: 0.7;
        border: 2px solid transparent;
        transition: border 0.2s, opacity 0.2s;
    }
    #modal-thumbnails img.active {
        opacity: 1;
        border: 2px solid var(--white-pure);
        box-shadow: 0 0 8px var(--gold-highlight);
    }
    
    #nagyKepJobb {
        right: 6px;
        background-image: url(icons/arrowicon1.svg);
        background-position-x: 65%;
    }
    
    #nagyKepBal:hover, #nagyKepJobb:hover {
        background-color: var(--transparent);
    }
    #gallery-filter-bar {
        position: relative;
        text-align: center;
        background: var(--hatter);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0;
    }
    .gallery-filter-btn {
        margin-top: 12vmin;
        padding: 1vmin 2.4vmin 1vmin 2.4vmin;
        border: none;
        background: transparent;
        cursor: pointer;
        font-size: 2.6vmin;
        font-family: "Lato";
        position: relative;
        transition: background 0.4s, color 0.2s;
        color: var(--blue);
        outline: none;
    }
    .gallery-filter-btn:hover {
        background-color: var(--blue-transparent-light);
    }
    .gallery-filter-btn:not(:last-child) {
        border-right: 0.1vmin solid var(--border-gray);
    }
    .gallery-filter-btn.active {
        background: var(--blue-transparent-medium);
        color: var(--blue-dark);
        border-bottom: 0.15vmin solid var(--blue-dark);
        z-index: 1;
    }
    
    /* Rooms dropdown styling - mobile */
    .gallery-filter-dropdown {
        position: relative;
        display: inline-block;
    }
    .gallery-filter-dropdown .gallery-filter-parent {
        border-right: none;
    }
    .gallery-filter-submenu {
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: var(--hatter);
        min-width: 180px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        border-radius: 0 0 8px 8px;
        z-index: 100;
        flex-direction: column;
    }
    .gallery-filter-dropdown:hover .gallery-filter-submenu,
    .gallery-filter-dropdown.active .gallery-filter-submenu {
        display: flex;
    }
    .gallery-filter-submenu .gallery-filter-sub {
        margin-top: 0;
        padding: 2vmin 3vmin;
        text-align: left;
        border-right: none;
        border-bottom: 1px solid var(--border-gray);
        font-size: 2.4vmin;
    }
    .gallery-filter-submenu .gallery-filter-sub:last-child {
        border-bottom: none;
        border-radius: 0 0 8px 8px;
    }
    .gallery-filter-submenu .gallery-filter-sub.active {
        background: var(--blue-transparent-medium);
        color: var(--blue-dark);
    }
    
    .kepek {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 30vmin;
        gap: 2vmin;
        max-width: 100%;
        margin: 0 auto;
        padding: 0 2vmin;
    }
    #ajanlat {
        width: 100%;
        height: auto;
        min-height: clamp(400px, 90vh, 650px);
        background-image: url("./kintikepestesotet.avif");
        background-size: cover;
        background-position: center center;
        background-attachment: scroll;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
        overflow: hidden;
        padding: clamp(3rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
    }

   .ajanlat-tartalom {
        text-align: center;
        width: 100%;
        max-width: 90%;
        padding: clamp(1rem, 3vw, 2rem);
      }

   .flip-container {
        margin-bottom: clamp(2rem, 5vw, 4rem);
     }

   .text-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(1rem, 3vw, 2rem);
        margin-bottom: clamp(5rem, 5vw, 3rem);
      }

   .flip-text {
        color: var(--white-pure);
        font-family: "NotoSans";
        font-size: clamp(1.5rem, 6vmin, 2rem);
        text-transform: uppercase;
        margin: 0;
        opacity: 0;
        transform: rotateX(90deg);
        transform-origin: bottom;
        width: 100%;
        line-height: 1.3;
      }

   .flip-text.animate {
        animation: flipIn 0.5s forwards;
      }

   .flip-text.delayed {
        animation-delay: 0.5s;
      }

   @keyframes flipIn {
        0% {
           opacity: 0;
           transform: rotateX(90deg);
        }
        100% {
           opacity: 1;
           transform: rotateX(0deg);
        }
      }  

   #agomb {
        border: solid clamp(0.05rem, 0.1vmin, 0.1rem) #c4bda0;
        background-color: var(--button-bg);
        color: var(--white-pure);
        text-decoration: none;
        padding: clamp(0.8rem, 2vw, 1.5rem) clamp(1rem, 4vw, 2rem);
        border-radius: clamp(0.4rem, 0.8vw, 0.8rem);
        font-family: "NotoSansL";
        font-size: clamp(0.7rem, 2vmin, 1.1rem);
        text-transform: uppercase;
        transition: all 0.6s ease;
        opacity: 0;
        display: inline-block;
      }

   #agomb.show {
        animation: fadeIn 0.5s forwards;
        animation-delay: 1.5s;
      }  

   @keyframes fadeIn {
        0% {
           opacity: 0;
        }
        100% {
           opacity: 1;
        }
      }

   #agomb:hover {
        background-color: var(--button-bg);
        transform: translateY(-2px);
      }
}

/* Extra small viewports - gallery */
@media screen and (max-width: 360px) {
    .gallery-image-disclaimer {
        font-size: 0.45rem;
    }
    #modal-thumbnails {
        left: 2vmin;
        right: 2vmin;
        min-height: 42px;
    }
    #modal-thumbnails .modal-thumb,
    #modal-thumbnails img {
        width: 7.5vmin;
        height: 7.5vmin;
        min-width: 7.5vmin;
    }
    .gallery-filter-btn {
        font-size: 2.2vmin;
        padding: 0.8vmin 1.8vmin;
    }
    .kepek {
        gap: 1.5vmin;
        padding: 0 1vmin;
    }
}

@media screen and (max-width: 320px) {
    .gallery-image-disclaimer {
        font-size: 0.4rem;
    }
    #modal-thumbnails .modal-thumb,
    #modal-thumbnails img {
        width: 7vmin;
        height: 7vmin;
        min-width: 7vmin;
    }
}