/* ============================================================
   Card14 — Csapat hexagon szekció, flip hover effekttel
   Figma: 1262:6922 (default), 1262:6926 (hover)
   Frame: 1920px széles

   5 hex "piramid" elrendezésben:
   - Desktop: 5 flex col, col 1 és 3 offset (lejjebb tolva)
     colMap: items[0]→col2(center), items[1]→col3(br), items[2]→col1(bl),
             items[3]→col4(tr), items[4]→col0(tl)
   - Tablet (≤1024px): 2 col staggered (References1 minta)
   - Mobile (≤575px): 1 col

   Flat-top hexagon arány: 514:445 (W:H)
   Figma méretezés (1920px frame):
     hex szélesség  : 384px = 20vw
     col pitch      : 298px = 15.52vw
     átfedés        : 86px  = 4.48vw  → margin-left: max(-4.48vw, -86px)
     col offset     : 189px = 9.84vw  → margin-top: clamp(75px, 9.84vw, 189px)
   ============================================================ */

/* ============================================================
   Section
   ============================================================ */
.card14-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: clamp(50px, 4.5vw, 86px);
    padding-bottom: clamp(50px, 5vw, 96px);
}

/* Díszítő kép (adminból feltölthető, Divider4 minta) */
.card14-dec-img {
    z-index: 1;
    pointer-events: none;
}

/* ============================================================
   Fejléc
   ============================================================ */
.card14-header {
    position: relative;
    z-index: 2;
    padding: 0 clamp(20px, 5vw, 100px) clamp(20px, 2.5vw, 48px);
}

.card14-eyebrow {
    font-family: 'Montserrat', sans-serif;
    color: #e26d1e;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}

.card14-heading {
    font-family: 'Montserrat', sans-serif;
    color: #253745;

    margin: 0;
}

.card14-heading p {
    margin: 0;
    line-height: 1;
}

/* ============================================================
   Desktop hex rács — 5 flex col (≥1025px)
   5 × 384px − 4 × 86px = 1576px nettó, centered via padding
   ============================================================ */
.card14-hex-grid {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: nowrap;
    padding: 0 clamp(16px, 2vw, 40px) clamp(40px, 4vw, 77px);
    position: relative;
    z-index: 2;
    overflow: visible;
}

.card14-col {
    flex-shrink: 0;
    width: min(20vw, 384px);
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 0.78vw, 15px);
    position: relative;
    z-index: 2;
}

/* Szomszédos oszlopok: ~20.6% overlap — ~15px rés az élek között
   W = min(20vw, 384px) → 20.6% = 4.1vw (≤1920px) vagy 79px (>1920px) */
.card14-col + .card14-col {
    margin-left: max(-4.1vw, -79px);
}

/* Offset oszlopok: H/2 — offset hex pontosan a szomszéd hex felénél kezdődik
   H = W × 0.866 → H/2 = W × 0.433 = 8.66vw (≤1920px) vagy 166px (>1920px) */
.card14-col--offset {
    margin-top: min(8.66vw, 166px);
    z-index: 1;
}

/* Tablet grid alapból rejtve */
.card14-grid-tablet { display: none; }

/* ============================================================
   Hex kártya — 3D flip wrapper
   ============================================================ */
.card14-hex-card {
    position: relative;
    width: 100%;
    aspect-ratio: 514 / 445;
    perspective: 900px;
}

/* Flip konténer */
.card14-flip {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform 0.65s ease;
    will-change: transform;
}

.card14-hex-card:hover .card14-flip {
    transform: rotateY(180deg);
}

/* Mindkét lap közös stílusai */
.card14-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Pointer-events csere flip-kor:
   backface-visibility:hidden vizuálisan rejt, de kattintást NEM blokkolja —
   a front face felülírja a hátlap linkjét flip után */
.card14-face--back { pointer-events: none; }
.card14-hex-card:hover .card14-face--front { pointer-events: none; }
.card14-hex-card:hover .card14-face--back  { pointer-events: auto; }

/* ============================================================
   Elülső lap — narancssárga keret + sötét szöveg
   ============================================================ */
.card14-face--front {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2086.6'%3E%3Cpolygon%20fill='rgba(237, 237, 237, 1)'%20stroke='rgba(226,109,30,0.9)'%20stroke-width='0.8'%20points='25,0%2075,0%20100,43.3%2075,86.6%2025,86.6%200,43.3'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

/* ============================================================
   Hátlap — fotóval kitöltött hex + sötét overlay
   ============================================================ */
.card14-face--back {
    transform: rotateY(180deg);
}

/* Hex clip-path a hátlapon (a lapra alkalmazva nem preserve-3d kompatibilis,
   ezért egy belső div kapja) */
.card14-hex-inner {
    position: absolute;
    inset: 0;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    overflow: hidden;
}

.card14-hex-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 30%;
    z-index: 0;
    transition: transform 0.4s ease;
}

.card14-hex-bg--empty {
    background-color: #253745;
}

.card14-hex-card:hover .card14-hex-bg {
    transform: scale(1.04);
}

.card14-hex-overlay {
    position: absolute;
    inset: 0;
    background: rgba(19, 27, 33, 0.3);
    z-index: 1;
}

/* ============================================================
   Tartalom — mindkét lapon közös pozicionálás
   ============================================================ */
.card14-face-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18% 22%;
    gap: 2px;
    z-index: 2;
}

/* Elülső lap szövegszínek */
.card14-name {
    font-family: 'Montserrat', sans-serif;
    color: #253745;
    line-height: 1.3;
    word-break: break-word;
}

.card14-role {
    font-family: 'Montserrat', sans-serif;
    color: #253745;
    line-height: 1.5;
}

.card14-phone,
a.card14-phone {
    font-family: 'Montserrat', sans-serif;
    color: #e26d1e;
    line-height: 1.5;
    white-space: nowrap;
    display: block;
    text-decoration: none;
}

a.card14-phone:hover,
a.card14-phone:focus {
    color: #c55c17;
    text-decoration: none;
}

/* Hátlap: szövegtartó div — position:absolute, bottom%-alapú igazítás
   (bottom % az elem magasságán alapul, így viewport-mérettől független) */
.card14-back-content {
    position: absolute;
    bottom: 10%;
    left: 0;
    right: 0;
    padding: 0 22%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 2;
}

/* Hátlap: fehér szövegszínek */
.card14-name--white { color: #ffffff; }
.card14-role--white { color: rgba(255, 255, 255, 0.88); }

.card14-phone--white,
a.card14-phone--white {
    color: #ffffff;
    text-decoration: none;
}

a.card14-phone--white:hover,
a.card14-phone--white:focus {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

/* ============================================================
   Tablet (≤1024px): desktop grid rejtve, 2-col tablet grid
   References1 minta — 52.42vw + (-11.09vw) = 93.75vw
   ============================================================ */
@media (max-width: 1024px) {

    .card14-hex-grid {
        display: none;
    }

    .card14-grid-tablet {
        display: flex;
        align-items: flex-start;
        flex-wrap: nowrap;
        padding: 0 clamp(20px, 5.2vw, 100px) clamp(50px, 23.94vw, 200px);
        overflow: visible;
        position: relative;
        z-index: 2;
    }

    .card14-grid-tablet .card14-col {
        flex-shrink: 0;
        width: 52.42vw;
        display: flex;
        flex-direction: column;
        gap: 16px;
        z-index: 2;
    }

    .card14-grid-tablet .card14-col + .card14-col {
        margin-left: -11.09vw;
        z-index: 1;
    }

    .card14-grid-tablet .card14-col--offset {
        margin-top: 23.94vw;
    }
}

/* ============================================================
   Mobile (≤575px): 1 oszlop, középre
   ============================================================ */
@media (max-width: 575px) {

    .card14-section {
        padding-top: clamp(40px, 8vw, 60px);
        padding-bottom: clamp(40px, 8vw, 60px);
    }

    .card14-grid-tablet {
        flex-wrap: wrap;
        justify-content: center;
        padding-bottom: 20px;
    }

    .card14-grid-tablet .card14-col {
        flex: 1 1 100%;
        width: auto !important;
        z-index: 1 !important;
    }

    .card14-grid-tablet .card14-col + .card14-col {
        margin-left: 0 !important;
    }

    .card14-grid-tablet .card14-col--offset {
        margin-top: 16px;
    }
}

@media (min-width: 1000px) and (max-width: 1760px) {
    .card14-eyebrow{
        font-size: 15.4px !important;
    }

    .card14-heading p {
        font-size:38.5px !important;
    }
}