/* ==========================================================================
   NEXUS INFORMATIKA
   Fájl.............: cards.css
   Feladata.........: Egységes kártyakomponensek
   Verzió...........: 1.0
========================================================================== */

/* ==========================================================
   ALAP KÁRTYA
========================================================== */

.card {

    position: relative;

    display: flex;

    flex-direction: column;

    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: 20px;

    padding: 32px;

    overflow: hidden;

    color: var(--color-text);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

    box-shadow: var(--shadow-md);

}

/* ==========================================================
   HOVER
========================================================== */

.card:hover {

    transform: translateY(-8px);

    border-color: var(--color-primary);

    box-shadow:
        0 18px 45px rgba(0,0,0,.16);

}

/* ==========================================================
   CARD ICON
========================================================== */

.card-icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 24px;

    border-radius:50%;

    background:linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-primary-dark)
	);

    color:#fff;

    font-size:30px;

    box-shadow:0 10px 25px rgba(0,0,0,.18);

    transition:all .3s ease;

}

.card:hover .card-icon{

    transform:scale(1.08) rotate(-5deg);

}

/* ==========================================================
   CÍM
========================================================== */

.card-title{

    margin-bottom:14px;

    text-align:center;

    font-size:1.45rem;

    font-weight:700;

    color:var(--color-text);

}

/* ==========================================================
   SZÖVEG
========================================================== */

.card-text{

    text-align:center;

    color:var(--color-text);

    line-height:1.8;

}

/* ==========================================================
   ELVÁLASZTÓ
========================================================== */

.card-divider {

    height: 1px;

    background: rgba(0,0,0,.08);

    margin: 24px 0;

}

/* ==========================================================
   ALSÓ RÉSZ
========================================================== */

.card-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}
/* ==========================================================================
   PRICING CARD
========================================================================== */

.pricing-card {

    height: 100%;

}

.pricing-card .card-title {

    color: var(--color-primary);

}

.pricing-card .price {

    margin-top: 20px;

    font-size: 2rem;

    font-weight: 700;

    color: var(--color-primary);

}

.pricing-card .price-note {

    margin-top: 8px;

    font-size: .95rem;

    opacity: .75;

}

.pricing-card ul {

    margin: 24px 0;

    padding: 0;

    list-style: none;

}

.pricing-card li {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 12px;

}

.pricing-card li::before {

    content: "✔";

    color: var(--color-primary);

    font-weight: bold;

}
/* ==========================================================================
   CARD GRID
========================================================================== */

.card-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    margin-top: 50px;

}

@media (max-width: 992px) {

    .card-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media (max-width: 768px) {

    .card-grid {

        grid-template-columns: 1fr;

    }

}
.price{

    font-size:2rem;

    font-weight:700;

    color:var(--color-primary);

    line-height:1;

}

.price-note{

    margin-top:8px;

    color:var(--color-text);

    opacity:.75;

}
/* ==========================================================
   PRICING CARD JAVÍTÁS
========================================================== */

.pricing-card{

    background:#111C2F;

    border:1px solid rgba(255,255,255,.06);

    color:#ffffff;

}

.pricing-card .card-text{

    color:#A6B6CC;

}

.pricing-card .card-divider{

    background:rgba(255,255,255,.08);

}

.pricing-card ul{

    margin:24px 0;

}

.pricing-card li{

    color:#E8EEF7;

}

.pricing-card .price{

    color:#00D2FF;

}

.pricing-card .price-note{

    color:#8FA6C4;

}

.card-footer{

    justify-content:center;

    text-align:center;

}