/* Custom CSS */

/*MediaQuery*/
@media only screen and (max-width: 600px) {
    .card-column{
        width: 400px;
    }
    .reference-icon{
        max-height: 20vw !important;
        max-width: 25vw !important;
    }
    /*TODO: responsivity*/
    /*.project-row{*/
    /*    height: 1903px;*/
    /*}*/
    /*.project-row .project-card-holder .project-card .card-body{*/
    /*    height: 618px;*/
    /*}*/
}
@media only screen and (min-width: 600px) {
    .card-column{
        width: 400px;
    }
    .reference-icon{
        max-height: 20vw !important;
        max-width: 20vw !important;
    }
    .project-row{
        height: 1285px;
    }
    .project-row .project-card-holder .project-card .card-body{
        height: 412px;
    }
}
@media only screen and (min-width: 768px) {
    .card-column{
        width: 300px;
    }
    .reference-icon{
        max-height: 8vw !important;
        max-width: 10vw !important;
    }
    .project-row{
        height: 1207px;
    }
    .project-row .project-card-holder .project-card .card-body{
        height: 386px;
    }
}
@media only screen and (min-width: 769px) {
    .card-column{
        width: 300px;
    }
    .reference-icon{
        max-height: 8vw !important;
        max-width: 10vw !important;
    }
    .project-row{
        height: 890px;
    }
    .project-row .project-card-holder .project-card .card-body{
        height: 280px;
    }
}
@media only screen and (min-width: 992px) {
    .card-column{
        width: 400px;
    }
    .reference-icon{
        max-height: 8vw !important;
        max-width: 10vw !important;
    }
    .project-row{
        height: auto;
    }
    .project-row .project-card-holder .project-card .card-body{
        height: 495px;
    }
}
@media only screen and (min-width: 1200px) {
    .card-column{
        width: 380px;
    }
    .reference-icon{
        max-height: 3.5vw !important;
        max-width: 10vw !important;
    }
    .project-row .project-card-holder .project-card .card-body{
        height: 410px;
    }
}
@media only screen and (min-width: 1600px) {
    .card-column{
        width: 380px;
    }
    .reference-icon{
        max-height: 3.5vw !important;
        max-width: 10vw !important;
    }
    .project-row .project-card-holder .project-card .card-body{
        height: 510px;
    }
}


/*Referenciak*/

.card-column{
    padding-right: 15px;
    padding-left: 15px;
}

.custom-card {
    /*perspective: 1000px;*/
    /*height: 100%;*/
    width: 100%;
    height: 220px !important;
    border-radius: .5rem !important;
}

.custom-card-inner{
    /*position: absolute;*/
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #f4f4f4;
}

.logos-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 8px;
    flex: 1;
    width: 100%;
    padding-bottom: 5px;
    margin-top: 5px;
}

/*.nagyvallalatok-grid{*/
/*    height: 100%;*/
/*    display: grid;*/
/*    grid-template-columns: repeat(2, 1fr);*/
/*    grid-template-rows: repeat(2, 1fr);*/
/*    grid-column-gap: 5px;*/
/*    grid-row-gap: 5px;*/
/*    justify-content: center;*/
/*    !*align-items: center;*!*/
/*    align-content: center;*/
/*    !*gap: 8px;*!*/
/*    !*flex: 1;*!*/
/*    !*width: 100%;*!*/
/*    !*padding-bottom: 5px;*!*/
/*    !*margin-top: 5px;*!*/
/*}*/
/*.logos-wrapper {*/
/*    display: grid;*/
/*    !* Ez a varázslat: 2 oszlop, mindkettő egyenlő (1fr) *!*/
/*    grid-template-columns: repeat(2, 1fr);*/
/*    !* Ugyanez sorokra: fixen 2 sor, egyenlő eloszlással *!*/
/*    grid-template-rows: repeat(2, 1fr);*/

/*    gap: 10px;*/
/*    width: 100%;*/

/*    !* Fontos: a wrapper töltse ki a rendelkezésre álló helyet *!*/
/*    flex: 1;*/
/*    min-height: 0;*/
/*}*/

.reference-icon {
    width: auto;
    height: auto;
    /*max-width: 90%;*/
    /*max-height: 50px;*/
    max-width: 90%;
    object-fit: contain;
}

/*.reference-icon {*/
/*    width: 100%;*/
/*    height: 100%;*/

/*    !* Ez a kulcs a "kiféréshez": *!*/
/*    object-fit: contain;*/

/*    !* Opcionális: Ha azt akarod, hogy a logók ne legyenek óriásiak,*/
/*       ha a cella nagy, de a logó kicsi felbontású *!*/
/*    max-width: 100%;*/
/*    max-height: 100%;*/

/*    !* Kicsi padding, hogy ne érjenek össze *!*/
/*    padding: 4px;*/
/*}*/

/*Kapcsolat*/

.mailto{
    color: #E30220;
}

.mailto:hover{
    color: #BF0000;
}

.form-panel{
    background-color: #202020;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #303030;
}

.form-panel input, .form-panel textarea{
    border: 1px solid #606060;
    color: #eeeeee !important;
}

/*DropIn animation*/
/* 1. Alapállapot: elrejtve és feljebb tolva */
.anim-item {
    opacity: 0;
    transform: translateY(-50px); /* 50px-el feljebb van */
    transition: all 0.8s ease-out; /* Finom érkezés */
}

/* 2. Aktív állapot: látható és a helyén van */
.anim-item.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* 3. Késleltetések (Delay) a sorrendhez */
/* A sorrend: 1, 3, 2, 4 */

/* 1. elem: azonnal (0s) */
.delay-0 { transition-delay: 0s; }

/* 3. elem (ez lesz a 2. kártya a kódban, de a 3. időben): 0.4s */
.delay-400 { transition-delay: 0.4s; }

/* 2. elem (ez lesz a 3. kártya a kódban, de a 2. időben): 0.2s */
.delay-200 { transition-delay: 0.2s; }

/* 4. elem: 0.6s */
.delay-600 { transition-delay: 0.6s; }


/*Projektek*/

/* --- PROJEKT KÁRTYÁK --- */
.project-card {
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Szép árnyék */
    transition: transform 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px); /* Kicsit megemelkedik, ha ráviszed az egeret */
}

/* Technológia címkék (Badges) */
.tech-stack .badge {
    font-size: 0.85rem;
    padding: 0.4em 0.6em;
    margin-right: 4px;
    margin-bottom: 4px;
    font-weight: normal;
}

/* --- CAROUSEL VEZÉRLŐK (NYILAK) JAVÍTÁSA --- */

/* Mivel fehér a háttér, a nyilakat sötétre (feketére) színezzük */
.custom-control .carousel-control-prev-icon,
.custom-control .carousel-control-next-icon {
    filter: invert(1); /* Ez csinál feketét a fehér nyílból */
    width: 30px;
    height: 30px;
}

/* A nyilakat kicsit kijjebb toljuk, hogy ne takarják ki a szélső kártyákat */
.carousel-control-prev.custom-control {
    left: -50px; /* Szélességtől függően állíthatod */
    width: 5%;
}

.carousel-control-next.custom-control {
    right: -50px;
    width: 5%;
}

/* Mobilon visszahúzzuk a nyilakat, hogy ne lógjanak le a képernyőről */
@media (max-width: 768px) {
    .carousel-control-prev.custom-control { left: 0; }
    .carousel-control-next.custom-control { right: 0; }

    /* Mobilon a nyilak hátteret kapnak, hogy látszódjanak a szövegen is */
    /*.custom-control .carousel-control-prev-icon,*/
    /*.custom-control .carousel-control-next-icon {*/
    /*    background-color: rgba(0,0,0,0.3);*/
    /*    border-radius: 50%;*/
    /*    filter: none; !* Mobilon maradhat fehér, sötét háttérrel *!*/
    /*    background-size: 50%;*/
    /*}*/
    .custom-control .carousel-control-prev-icon,
    .custom-control .carousel-control-next-icon {
        background-color: rgba(0, 0, 0, 0.5); /* Félig átlátszó fekete háttér */
        border-radius: 50%; /* Kerek legyen a háttér */
        padding: 20px;      /* Legyen hely a nyíl körül */
        width: 40px;        /* Kicsit nagyobb érintési felület */
        height: 40px;
        filter: none;       /* Mobilon a nyíl maradjon fehér (a sötét háttér miatt) */
        background-size: 50%; /* A nyíl ikon mérete a körön belül */
    }

    /* ITT A LÉNYEG - A JAVÍTÁS */
    .project-card-holder {
        display: flex;       /* 1. Ez hiányzott! Ez teszi flexboxszá */
        justify-content: center; /* 2. Ez így már középre húzza a tartalmát */
        width: 100%;        /* Biztonsági játék, hogy kitöltse a szülőt */
    }

    .project-card-holder .project-card {
        width: 80%;         /* Maradhat a 80%, így lesz hely a gomboknak */
        max-width: 350px;   /* Opcionális: ne legyen túl széles tableten */
    }

    .carousel-item {
        padding: 0 10px; /* Vagy akár kicsit több is lehet */
    }
}

/* Indikátorok (pöttyök) színe */
.project-indicators li {
    background-color: #ccc;
}
.project-indicators .active {
    background-color: #333;
}
.project-indicators {
    bottom: -40px; /* Lejjebb toljuk a kártyák alá */
}