/* ===== Eventrend Gastro Galéria ===== */
.er-gal {
    --er-gal-ease: cubic-bezier(.22, .61, .36, 1);
}

/* Antra pill-nyelv: átlátszó háttér, áttetsző szürke keret, arany kitöltés hoverre.
   Forrás: antra/assets/css/base/elementor.css .elementor-button-default */
.er-gal__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 50px;
}
.er-gal__chip {
    appearance: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    border: 1px solid #9F9FA4A3;
    background-color: transparent;
    color: var(--e-global-color-secondary, #1C1C1D);
    border-radius: 100px;
    padding: 11px 26px;
    font-family: var(--e-global-typography-accent-font-family), sans-serif;
    font-weight: var(--e-global-typography-accent-font-weight, 500);
    letter-spacing: .4px;
    font-size: 15px;
    line-height: 1.2;
    transition: color .5s ease, border-color .5s ease;
}
/* Arany kitöltés balról jobbra – nem sima background-color váltás.
   Elhagyáskor jobbra húzódik vissza, így nem "visszafelé pörög" az animáció. */
.er-gal__chip::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--e-global-color-primary, #CAA05C);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .5s var(--er-gal-ease);
}
.er-gal__chip:hover {
    color: #fff;
    border-color: var(--e-global-color-primary, #CAA05C);
}
.er-gal__chip:hover::before {
    transform: scaleX(1);
    transform-origin: left center;
}

.er-gal__chip.is-active {
    color: #fff;
    border-color: var(--e-global-color-primary, #CAA05C);
}
.er-gal__chip.is-active::before {
    transform: scaleX(1);
    transform-origin: left center;
}

.er-gal__grid {
    --er-gal-cols: 3;/* ===== Eventrend Gastro Galéria ===== */
.er-gal {
    --er-gal-ease: cubic-bezier(.22, .61, .36, 1);
}

/* Antra pill-nyelv: átlátszó háttér, áttetsző szürke keret, arany kitöltés hoverre.
   Forrás: antra/assets/css/base/elementor.css .elementor-button-default */
.er-gal__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 50px;
}
.er-gal__chip {
    appearance: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    border: 1px solid #9F9FA4A3;
    background-color: transparent;
    color: var(--e-global-color-secondary, #1C1C1D);
    border-radius: 100px;
    padding: 11px 26px;
    font-family: var(--e-global-typography-accent-font-family), sans-serif;
    font-weight: var(--e-global-typography-accent-font-weight, 500);
    letter-spacing: .4px;
    font-size: 15px;
    line-height: 1.2;
    transition: color .5s ease, border-color .5s ease;
}
/* Arany kitöltés balról jobbra – nem sima background-color váltás.
   Elhagyáskor jobbra húzódik vissza, így nem "visszafelé pörög" az animáció. */
.er-gal__chip::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--e-global-color-primary, #CAA05C);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .5s var(--er-gal-ease);
}
.er-gal__chip:hover {
    color: #fff;
    border-color: var(--e-global-color-primary, #CAA05C);
}
.er-gal__chip:hover::before {
    transform: scaleX(1);
    transform-origin: left center;
}

.er-gal__chip.is-active {
    color: #fff;
    border-color: var(--e-global-color-primary, #CAA05C);
}
.er-gal__chip.is-active::before {
    transform: scaleX(1);
    transform-origin: left center;
}

.er-gal__grid {
    --er-gal-cols: 3;
    display: grid;
    grid-template-columns: repeat(var(--er-gal-cols), 1fr);
    gap: 50px 30px;
}

/* --- Kártya --- */
.er-gal__card {
    display: flex;
    flex-direction: column;
    animation: er-gal-in .7s var(--er-gal-ease) both;
    animation-delay: calc(var(--er-gal-i, 0) * 70ms);
}
.er-gal__card.is-hidden { display: none; }
/* Szűrés után a JS eltávolítja/visszateszi az osztályt -> újrajátszott belépő. */
.er-gal__card.is-entering {
    animation: er-gal-in .5s var(--er-gal-ease) both;
    animation-delay: calc(var(--er-gal-i, 0) * 45ms);
}

@keyframes er-gal-in {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
}

.er-gal__media {
    position: relative;
    display: block;
    aspect-ratio: 1.40625;
    overflow: hidden;
    border-radius: 20px;
    margin-bottom: 30px;
    background: var(--e-global-color-background-field, #F6F6F6);
    transition: box-shadow .5s ease;
}
/* Antra-szerű sötét fátyol, hoverre úszik be. */
.er-gal__media::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 50%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(185,183,174,0) 0%, rgba(134,132,126,0.54) 19.25%, #53524E 46.79%);
    opacity: 0;
    transition: opacity .5s ease;
}
/* Abszolút kitöltés – a téma img{height:auto} szabálya ellen !important-tal védve. */
.er-gal__media img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform .6s var(--er-gal-ease);
}
.er-gal__card:hover .er-gal__media img { transform: scale(1.1); }
.er-gal__card:hover .er-gal__media::before { opacity: .55; }
.er-gal__card:hover .er-gal__media { box-shadow: 0 18px 40px rgba(0, 0, 0, .12); }

/* Üres kép: szürkés placeholder kép-ikonnal */
.er-gal__media--empty { background: #e9e9ee; background-image: linear-gradient(135deg, #ededf1 0%, #e4e4ea 100%); }
.er-gal__media--empty::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 46px 46px;
    opacity: .35;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9aa3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
}

.er-gal__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.er-gal__name {
    margin: 0 0 19px;
    font-family: var(--e-global-typography-secondary-font-family, "Cal Sans"), sans-serif;
    font-size: 30px;
    line-height: 1.1333333333;
    color: var(--e-global-color-secondary, #1C1C1D);
}
.er-gal__name a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--e-global-color-primary, #CAA05C), var(--e-global-color-primary, #CAA05C));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: color .4s ease, background-size .45s var(--er-gal-ease);
}
.er-gal__card:hover .er-gal__name a { color: var(--e-global-color-primary, #CAA05C); }
.er-gal__name a:hover { background-size: 100% 1px; }

.er-gal__desc {
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    color: var(--e-global-color-text, #59585D);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.er-gal__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.er-gal__tag {
    font-size: 11.5px;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(202, 160, 92, .12);
    background: color-mix(in srgb, var(--e-global-color-primary, #CAA05C) 12%, transparent);
    color: var(--e-global-color-secondary, #1C1C1D);
    transition: background-color .3s ease, color .3s ease;
}
.er-gal__card:hover .er-gal__tag {
    background: rgba(202, 160, 92, .2);
    background: color-mix(in srgb, var(--e-global-color-primary, #CAA05C) 20%, transparent);
}

/* CTA: az Antra „elementor-button-default" pill-gombot örökli a téma
   elementor.css-éből (border, arany kör-ikon, hover-kitöltés). Itt csak a
   kártyán belüli elhelyezést állítjuk. */
.er-gal__cta { margin-top: 22px; align-self: flex-start; }
.er-gal__cta .elementor-button { display: inline-flex; }
/* A téma valódi button-widgetjén a tartalom row-reverse (ikon-kör jobbra,
   szöveg balra). A statikus markupunk ezt nem kapja meg, ezért itt állítjuk. */
.er-gal__cta .elementor-button-content-wrapper { flex-direction: row-reverse; }

/* Fókusz-láthatóság (billentyűzetes navigáció) */
.er-gal__media:focus-visible,
.er-gal__name a:focus-visible,
.er-gal__cta .elementor-button:focus-visible,
.er-gal__chip:focus-visible {
    outline: 2px solid var(--e-global-color-primary, #CAA05C);
    outline-offset: 3px;
}

/* --- Lapozás ---
   A kinézetet az Antra téma adja (.pagination .page-numbers, style.css).
   Itt csak a <button> alapstílusát nullázzuk – kisebb specificitással,
   mint a téma .current / :hover arany szabályai, hogy azok érvényre jussanak. */
.er-gal .pagination { display: flex; justify-content: center; }
.er-gal .pagination .elementor-pagination { justify-content: center; flex-wrap: wrap; }
.er-gal .pagination button.page-numbers {
    appearance: none;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    transition: color .5s ease, background-color .5s ease;
}
.er-gal .pagination .page-numbers.dots { min-width: 24px; cursor: default; }

.er-gal__empty {
    margin: 0;
    text-align: center;
    font-size: 16px;
    color: var(--e-global-color-text, #59585D);
}

@media (max-width: 1200px) {
    .er-gal__name { font-size: 26px; }
}
@media (max-width: 1024px) { .er-gal__grid { --er-gal-cols: 2; } }
@media (max-width: 767px) {
    .er-gal__name { font-size: 22px; line-height: 1.2727272727; margin-bottom: 10px; }
    .er-gal__media { margin-bottom: 10px; }
}
@media (max-width: 600px) { .er-gal__grid { --er-gal-cols: 1; } }

@media (prefers-reduced-motion: reduce) {
    .er-gal__card,
    .er-gal__card.is-entering { animation: none; }
    .er-gal *,
    .er-gal *::before,
    .er-gal *::after { transition-duration: .01ms !important; }
    .er-gal__card:hover .er-gal__media img { transform: none; }
    /* A kitöltés transformmal készül – enélkül az aktív chip elveszítené az arany hátteret. */
    .er-gal__chip:hover::before,
    .er-gal__chip.is-active::before { transform: scaleX(1); }
}

    display: grid;
    grid-template-columns: repeat(var(--er-gal-cols), 1fr);
    gap: 50px 30px;
}

/* --- Kártya --- */
.er-gal__card {
    display: flex;
    flex-direction: column;
    animation: er-gal-in .7s var(--er-gal-ease) both;
    animation-delay: calc(var(--er-gal-i, 0) * 70ms);
}
.er-gal__card.is-hidden { display: none; }
/* Szűrés után a JS eltávolítja/visszateszi az osztályt -> újrajátszott belépő. */
.er-gal__card.is-entering {
    animation: er-gal-in .5s var(--er-gal-ease) both;
    animation-delay: calc(var(--er-gal-i, 0) * 45ms);
}

@keyframes er-gal-in {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
}

.er-gal__media {
    position: relative;
    display: block;
    aspect-ratio: 1.40625;
    overflow: hidden;
    border-radius: 20px;
    margin-bottom: 30px;
    background: var(--e-global-color-background-field, #F6F6F6);
    transition: box-shadow .5s ease;
}
/* Antra-szerű sötét fátyol, hoverre úszik be. */
.er-gal__media::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 50%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(185,183,174,0) 0%, rgba(134,132,126,0.54) 19.25%, #53524E 46.79%);
    opacity: 0;
    transition: opacity .5s ease;
}
/* Abszolút kitöltés – a téma img{height:auto} szabálya ellen !important-tal védve. */
.er-gal__media img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform .6s var(--er-gal-ease);
}
.er-gal__card:hover .er-gal__media img { transform: scale(1.1); }
.er-gal__card:hover .er-gal__media::before { opacity: .55; }
.er-gal__card:hover .er-gal__media { box-shadow: 0 18px 40px rgba(0, 0, 0, .12); }

/* Üres kép: szürkés placeholder kép-ikonnal */
.er-gal__media--empty { background: #e9e9ee; background-image: linear-gradient(135deg, #ededf1 0%, #e4e4ea 100%); }
.er-gal__media--empty::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 46px 46px;
    opacity: .35;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9aa3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
}

.er-gal__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.er-gal__name {
    margin: 0 0 19px;
    font-family: var(--e-global-typography-secondary-font-family, "Cal Sans"), sans-serif;
    font-size: 30px;
    line-height: 1.1333333333;
    color: var(--e-global-color-secondary, #1C1C1D);
}
.er-gal__name a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--e-global-color-primary, #CAA05C), var(--e-global-color-primary, #CAA05C));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: color .4s ease, background-size .45s var(--er-gal-ease);
}
.er-gal__card:hover .er-gal__name a { color: var(--e-global-color-primary, #CAA05C); }
.er-gal__name a:hover { background-size: 100% 1px; }

.er-gal__desc {
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    color: var(--e-global-color-text, #59585D);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.er-gal__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.er-gal__tag {
    font-size: 11.5px;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(202, 160, 92, .12);
    background: color-mix(in srgb, var(--e-global-color-primary, #CAA05C) 12%, transparent);
    color: var(--e-global-color-secondary, #1C1C1D);
    transition: background-color .3s ease, color .3s ease;
}
.er-gal__card:hover .er-gal__tag {
    background: rgba(202, 160, 92, .2);
    background: color-mix(in srgb, var(--e-global-color-primary, #CAA05C) 20%, transparent);
}

/* CTA: az Antra „elementor-button-default" pill-gombot örökli a téma
   elementor.css-éből (border, arany kör-ikon, hover-kitöltés). Itt csak a
   kártyán belüli elhelyezést állítjuk. */
.er-gal__cta { margin-top: 22px; }
.er-gal__cta .elementor-button { align-self: flex-start; }

/* Fókusz-láthatóság (billentyűzetes navigáció) */
.er-gal__media:focus-visible,
.er-gal__name a:focus-visible,
.er-gal__cta .elementor-button:focus-visible,
.er-gal__chip:focus-visible {
    outline: 2px solid var(--e-global-color-primary, #CAA05C);
    outline-offset: 3px;
}

/* --- Lapozás ---
   A kinézetet az Antra téma adja (.pagination .page-numbers, style.css).
   Itt csak a <button> alapstílusát nullázzuk – kisebb specificitással,
   mint a téma .current / :hover arany szabályai, hogy azok érvényre jussanak. */
.er-gal .pagination { display: flex; justify-content: center; }
.er-gal .pagination .elementor-pagination { justify-content: center; flex-wrap: wrap; }
.er-gal .pagination button.page-numbers {
    appearance: none;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    transition: color .5s ease, background-color .5s ease;
}
.er-gal .pagination .page-numbers.dots { min-width: 24px; cursor: default; }

.er-gal__empty {
    margin: 0;
    text-align: center;
    font-size: 16px;
    color: var(--e-global-color-text, #59585D);
}

@media (max-width: 1200px) {
    .er-gal__name { font-size: 26px; }
}
@media (max-width: 1024px) { .er-gal__grid { --er-gal-cols: 2; } }
@media (max-width: 767px) {
    .er-gal__name { font-size: 22px; line-height: 1.2727272727; margin-bottom: 10px; }
    .er-gal__media { margin-bottom: 10px; }
}
@media (max-width: 600px) { .er-gal__grid { --er-gal-cols: 1; } }

@media (prefers-reduced-motion: reduce) {
    .er-gal__card,
    .er-gal__card.is-entering { animation: none; }
    .er-gal *,
    .er-gal *::before,
    .er-gal *::after { transition-duration: .01ms !important; }
    .er-gal__card:hover .er-gal__media img { transform: none; }
    /* A kitöltés transformmal készül – enélkül az aktív chip elveszítené az arany hátteret. */
    .er-gal__chip:hover::before,
    .er-gal__chip.is-active::before { transform: scaleX(1); }
}