/* ============================================================
   References1 — szekció stílusok
   Figma desktop node 1082:215 (1920px), tablet node 1082:534 (768px)
   Betűméretek: Porto CSS osztályok kezelik (text-4, text-5 stb.)
   ============================================================ */

/* ============================================================
   Section
   ============================================================ */

.ref1-section {
    position: relative;
    padding: clamp(32px, 2.5vw, 48px) 0 clamp(40px, 3.1vw, 60px);
}

/* ============================================================
   Fejléc sor
   ============================================================ */

.ref1-header {
    display: flex;
    align-items: flex-end;
    gap: clamp(16px, 1.77vw, 34px);
    margin-bottom: clamp(20px, 2.5vw, 48px);
}

.ref1-header-left {
    flex: 1;
    min-width: 0;
}

/* Eyebrow */

.ref1-eyebrow-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.ref1-eyebrow-line {
    display: block;
    width: 41px;
    height: 2px;
    background: #fff;
    flex-shrink: 0;
}

.ref1-eyebrow-text {
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
}

/* Heading */

.ref1-heading {
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 16px;
}

.ref1-heading p,
.ref1-heading h1,
.ref1-heading h2,
.ref1-heading h3 {
    margin: 0;
    line-height: 1.1;
    font-weight: 800;
    color: #fff;
}

/* Body */

.ref1-body {
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    line-height: 1.5;
}

.ref1-body p { margin-bottom: 0.5em; }
.ref1-body p:last-child { margin-bottom: 0; }

/* ============================================================
   Pentagon gomb
   ============================================================ */

.ref1-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 50px;
    padding: 14px 35px;
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.ref1-btn:hover {
    color: #fff;
    text-decoration: none;
}
.ref1-btn:hover .ref1-btn-shape path {
    fill: #c55d18;
}

.ref1-btn-shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ref1-btn-text { position: relative; z-index: 1; }

.ref1-btn-arrow {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 11px;
    height: 9px;
    transition: transform 0.2s ease;
}

.ref1-btn:hover .ref1-btn-arrow { transform: translateX(3px); }

/* ============================================================
   Grid láthatóság: desktop vs tablet
   ============================================================ */

.ref1-grid-desktop {
    display: block;
}

.ref1-grid-tablet {
    display: none;
}

/* ============================================================
   Desktop honeycomb rács — sor-alapú (3-2-3-2…)
   Geometria az images1 testvér komponenssel megegyező (Figma 1920px):
     hex szélesség : 422px = 21.98vw
     hex magasság  : ≈365px = 19.01vw
     sor y-lépés   : 187px =  9.74vw
     sor átfedés   : 178px =  9.27vw
     hex gap       : 229px = 11.93vw
     rövid sor eltolása: 325px = 16.93vw
   ============================================================ */

.ref1-grid {
    align-items: flex-start;
    overflow: visible;
}

.ref1-col {
    display: flex;
    flex-direction: column;
    position: relative;
}

.ref1-grid-desktop {
    padding-bottom: clamp(70px, 12.2vw, 60px);
    --hex-w:       min(21.98vw, 422px);
    --hex-h:       calc(var(--hex-w) * 445 / 514);
    --row-step:    min(9.74vw, 187px);
    --row-overlap: calc(var(--hex-h) - var(--row-step));
    --hex-gap:     min(11.93vw, 229px);
    --row-offset:  min(16.93vw, 325px);
}

.ref1-row {
    display: flex;
    align-items: flex-start;
    gap: var(--hex-gap);
    pointer-events: none;
}

.ref1-row + .ref1-row {
    margin-top: calc(-1 * var(--row-overlap));
}

.ref1-row-offset {
    padding-left: var(--row-offset);
}

.ref1-grid-desktop .ref1-hex-card {
    width: var(--hex-w);
    flex-shrink: 0;
    pointer-events: auto;
}

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

.ref1-hex-card {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 1.155;
    text-decoration: none;
    color: #fff;
}

.ref1-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;
}

.ref1-hex-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.ref1-hex-card:hover .ref1-hex-img {
    transform: scale(1.06);
}

/* Sötét gradiens overlay */
.ref1-hex-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 58%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%,rgba(0, 0, 0, 0.8) 70%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0 12% 7%;
    text-align: center;
    gap: 8px;
}

.ref1-hex-title {
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    line-height: 1.1;
    margin: 2% 10%;
}

.ref1-hex-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #e26d1e;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.1;
    transition: gap 0.2s ease;
}

.ref1-hex-card:hover .ref1-hex-link {
    gap: 8px;
}

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

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

    .ref1-hex-title {
        font-size: 16.8px !important;
    }

    .ref1-hex-link {
        font-size: 15.4px !important;
    }

    .ref1-eyebrow-text{
        font-size: 15.4px !important;
    }

    .ref1-body p{
        font-size:15.4px !important;
    }
}

/* ============================================================
   Reszponzív — Tablet (≤1100px)
   Figma tablet node 1082:534 (canvas ≈768px):
     hex szélesség  : 402.59px = 52.42vw
     átfedés        :  85.19px = 11.09vw
     sorköz         :   ~16px  =  2.08vw
     sor-offset     : 183.84px = 23.94vw
   ============================================================ */

@media (max-width: 1100px) {

    /* Fejléc: column irány, gomb a szöveg alatt */
    .ref1-header {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Grid váltás */
    .ref1-grid-desktop {
        display: none;
    }

    .ref1-grid-tablet {
        display: flex;
        align-items: flex-start;
        flex-wrap: nowrap;
        overflow: visible;
        position: relative;
        z-index: 2;
    }

    /* Tablet 2-col honeycomb */
    .ref1-grid-tablet .ref1-col {
        flex-shrink: 0;
        width: min(52.42vw, 402px);
        gap: clamp(10px, 2.08vw, 16px);
        z-index: 2;
    }

    .ref1-grid-tablet .ref1-col + .ref1-col {
        margin-left: max(-11.09vw, -85px);
        z-index: 1;
    }

    .ref1-grid-tablet .ref1-col-offset {
        margin-top: clamp(50px, 23.94vw, 184px);
    }
}

/* ============================================================
   Mobil (≤640px): 1-oszlopos, nincs átfedés
   ============================================================ */

@media (max-width: 575px) {

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

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

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

    .ref1-grid-tablet .ref1-col-offset {
        margin-top: 16px !important;
    }
}

@media (max-width: 767px) {
    .ref1-btn {
        width: 100%;
        height: 50px;
        justify-content: center;
        white-space: normal;
    }
}