/* ============================================================
   Card13 — hexagonális szolgáltatás szekció
   Figma: desktop 1220:6922 (1728px), tablet 1082:1786

   6 hex "3-2-1 piramid" mintában:
   - Desktop: 5 flex col, átfednek (~78px), páros col-ok (1,3) lejjebb tolva ~193px,
     col 2 két hexet tartalmaz (0. és 5. elem)
   - Tablet (576–1199px): flex-wrap, 2 col, páros col offset
   - Mobile (<576px): 1 col

   Flat-top hexagon arány: 514:445 (W:H) — azonos Card12-vel
   Figma méretezés (1728px frame, 0 padding):
     hex szélesség : 408px = 23.6vw
     col pitch     : 330px = 19.1vw
     átfedés       : 78px  = 4.51vw → margin-left: max(-4.51vw, -78px)
     páros offset  : 193px = 11.17vw → margin-top: clamp(80px, 11.17vw, 193px)
     col 2 gap     : 32px  = 1.85vw  → gap: clamp(15px, 1.85vw, 32px)
   ============================================================ */

/* ============================================================
   Section
   ============================================================ */
.card13-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.card13-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

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

/* ============================================================
   Dekoratív hexagonok (Figma háttér díszítők)
   ============================================================ */
.card13-deco {
    position: absolute;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2086.6'%3E%3Cpolygon%20fill='none'%20stroke='rgba(226,109,30,0.35)'%20stroke-width='1'%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;
    aspect-ratio: 100 / 86.6;
    z-index: 1;
}

/* Nagy (~11vw, Figma Group1469) */
.card13-deco--a { width: clamp(60px, 11.28vw, 195px); }

/* Közepes (~4.3vw, Figma Group1475) */
.card13-deco--b { width: clamp(30px, 4.34vw, 75px); }

/* Kis (~2.5vw, Figma Group1476) */
.card13-deco--c { width: clamp(18px, 2.49vw, 43px); }

/* Tablet/Mobile: kisebb deco hexek */
@media (max-width: 1199px) {
    .card13-deco--a { width: clamp(40px, 8vw, 100px); }
    .card13-deco--b { width: clamp(22px, 3.5vw, 50px); }
    .card13-deco--c { display: none; }
}

@media (max-width: 575px) {
    .card13-deco--a { display: none; }
    .card13-deco--b { display: none; }
}

/* ============================================================
   Desktop hex rács — 5 flex col (>= 1200px)
   5 × 408px − 4 × 78px = 1728px nettó szélesség
   ============================================================ */
.card13-hex-grid {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    padding: clamp(40px, 4.51vw, 78px) 0 clamp(60px, 5.5vw, 95px);
    position: relative;
    justify-content: center;
    z-index: 2;
    overflow: visible;
}

.card13-col {
    flex-shrink: 0;
    width: 20vw;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 2;
}

/* Szomszédos oszlopok átfednek 78px-rel (pitch = 330px < hex w = 408px) */
.card13-col + .card13-col {
    margin-left: -4vw;
}

/* Páros indexű oszlopok (1, 3) lefelé tolva — piramid minta */
.card13-col--offset {
    margin-top: calc((20vw * 445 / 514 / 2 ) + 8px);
    z-index: 1;
}

/* ============================================================
   Hex kártya
   ============================================================ */

/* Wrapper: narancssárga border SVG itt van, nincs clip-path */
.card13-hex-card {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 514 / 445;
    text-decoration: none;
    color: #fff;
}

/* Narancssárga hex border — kívül a clip-path-on, mindig látható */
.card13-hex-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2086.6'%3E%3Cpolygon%20fill='none'%20stroke='rgba(226,109,30,0.9)'%20stroke-width='0.5'%20points='25,0.1%2075,0.1%20100,43.3%2075,86.5%2025,86.5%200,43.3'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.3s ease;
}

.card13-hex-card:hover::before {
    opacity: 0.5;
}

/* Inner: clip-path ide kerül */
.card13-hex-inner {
    position: relative;
    width: 100%;
    height: 100%;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    overflow: hidden;
}

/* Háttérkép — mindig látható (nem csak hover-ra) */
.card13-hex-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 1;
    transition: transform 0.4s ease;
    z-index: 0;
}

.card13-hex-card:hover .card13-hex-bg {
    transform: scale(1.05);
}

/* Sötét overlay a tartalom olvashatóságáért */
.card13-hex-dark-overlay {
    position: absolute;
    inset: 0;
    background: rgba(19, 27, 33, 0.48);
    z-index: 1;
    transition: background 0.3s ease;
}

.card13-hex-card:hover .card13-hex-dark-overlay {
    background: rgba(19, 27, 33, 0.28);
}

/* Tartalom réteg */
.card13-hex-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22% 10% 10%;
    text-align: center;
    width: 100%;
    height: 100%;
}

.card13-hex-content-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 1;
}

/* Ikon — fehérre szűrve */
.card13-hex-icon {
    width: clamp(36px, 3.5vw, 56px);
    height: clamp(36px, 3.5vw, 56px);
    object-fit: contain;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
}

/* Cím */
.card13-hex-title {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    line-height: 1.3;
    margin: 0;
    word-break: break-word;
}

/* CTA link */
.card13-hex-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Montserrat', sans-serif;
    color: #e26d1e;
    line-height: 1.1;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: auto;
    transition: gap 0.2s ease;
}

.card13-hex-card:hover .card13-hex-cta {
    gap: 9px;
}

.card13-hex-arrow {
    width: 10px;
    height: 8px;
    flex-shrink: 0;
}

/* Tablet grid — alapból rejtve, ≤1024px-en jelenik meg */
.card13-grid-tablet { display: none; }

/* ============================================================
   1200px – 1760px: kisebb tartalom a desktop hex-gridben
   ============================================================ */
@media (min-width: 1200px) and (max-width: 1760px) {
    .card13-hex-title {
        font-size: 15.4px !important;
    }

    .card13-hex-cta {
        font-size: 15.4px !important;
    }
}

/* ============================================================
   Tablet (≤1024px): desktop grid rejtve, tablet grid látható
   References1 minta — 52.42vw + (-11.09vw) = 93.75vw kitöltés
   ============================================================ */

@media (max-width: 1024px) {

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

    .card13-grid-tablet {
        display: flex;
        align-items: flex-start;
        flex-wrap: nowrap;
        padding-top: 48px;
        overflow: visible;
        position: relative;
        z-index: 2;
    }

    .card13-grid-tablet .card13-col {
        flex-shrink: 0;
        --w:50vw;
        width: var(--w);
        display: flex;
        flex-direction: column;
        gap: 16px;
        z-index: 2;
    }

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

    .card13-grid-tablet .card13-col--offset {
        margin-top: calc((var(--w) * 445 / 514 / 2 ) + 8px);
    }
}

/* ============================================================
   Mobile (<576px): 1 oszlop, középre igazítva
   ============================================================ */

@media (max-width: 575px) {

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

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

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

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

    .card13-hex-icon {
        width: 40px;
        height: 40px;
    }
}