/* ============================================================
   References1 — szekció stílusok
   Figma frame: 1920 × 931px
   Bal panel: x=0–984px (51.25%), jobb panel: x=984–1920px (48.75%)
   Jobb panel fotók: pozíciók a Figma mask koordinátákból számítva
   ============================================================ */

.references1-section {
    position: relative;
    overflow: hidden;
}

/* Full-width grid, nincs max-width — Figma is full-width layout */
.references1-inner {
    display: grid;
    grid-template-columns: 51.25fr 48.75fr; /* Figma: 984px : 936px */
    position: relative;
    z-index: 1;
}

/* ============================================================
   Bal oszlop — szöveg
   ============================================================ */

.references1-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* padding-left: ~100px at 1920px (5.2vw) — Figma szöveg x=100px */
    padding: clamp(40px, 4.17vw, 80px)
             clamp(20px, 2.5vw, 48px)
             clamp(40px, 4.17vw, 80px)
             clamp(40px, 5.2vw, 100px);
}

.references1-eyebrow {
    color: #e26d1e;
    font-family: Montserrat, sans-serif;
    font-weight: 800;
    font-size: clamp(12px, 0.875vw, 17px);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
}

.references1-heading {
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-weight: 800;
    font-size: clamp(28px, 2.72vw, 52px);
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

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

.references1-body {
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: clamp(13px, 0.875vw, 17px);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.references1-body p {
    margin-bottom: 0.6em;
}

.references1-body p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   CTA gomb — pentagon alakzat
   ============================================================ */

.references1-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: clamp(38px, 2.6vw, 50px);
    padding: 0 clamp(18px, 1.5vw, 28px) 0 clamp(30px, 2.1vw, 40px);
    color: #fff;
    text-decoration: none;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: clamp(13px, 0.985vw, 19px);
    white-space: nowrap;
    transition: color 0.2s ease;
    margin-top: 8px;
    align-self: flex-start;
}

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

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

.references1-cta-text { position: relative; z-index: 1; }

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

.references1-cta:hover .references1-cta-arrow { transform: translateX(3px); }

/* ============================================================
   Jobb oszlop — hexagonális fotómozaik

   KULCS: aspect-ratio adja a definiált magasságot, így a
   belső abszolút elemek %-os height értéke működik.

   Figma right panel: 936 × 931px → aspect-ratio: 936 / 931
   ============================================================ */

.references1-right {
    position: relative;
    aspect-ratio: 936 / 931;
    overflow: visible;
}

.references1-photo {
    position: absolute;
    overflow: hidden;
}

.references1-photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/*
   MINDEN fotó flat-top hexagon (Figma mask arány: 441×382 ≈ 2:√3)
   polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)
*/
.references1-photo-1,
.references1-photo-2,
.references1-photo-3,
.references1-photo-4,
.references1-photo-5,
.references1-photo-6 {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/*
   Pozíciók a Figma mask koordinátákból (nem container, hanem a látható hex):
   Referencia: right panel bal-felső sarka = section x=984px, y=0px

   Foto 1: mask 441×382px @ section (1035.23, 99.57)  → panel (51.23, 99.57)
   Foto 2: mask 441×383px @ section (1378.58, 298.29) → panel (394.58, 298.29)
   Foto 3: mask 441×382px @ section (1035.23, 495.63) → panel (51.23, 495.63)
   Foto 4: mask 198×172px @ section (1438.65, 111.51) → panel (454.65, 111.51)
   Foto 5: mask 150×130px @ section (984.96,  424.66) → panel (0.96,  424.66)
   Foto 6: mask 152×131px @ section (1447.24, 692.06) → panel (463.24, 692.06)
*/

.references1-photo-1 {
    left:   5.47%;   /* 51.23  / 936 */
    top:    10.70%;  /* 99.57  / 931 */
    width:  47.11%;  /* 441    / 936 */
    height: 41.03%;  /* 382    / 931 */
    z-index: 1;
}

.references1-photo-2 {
    left:   42.16%;  /* 394.58 / 936 */
    top:    32.04%;  /* 298.29 / 931 */
    width:  47.11%;  /* 441    / 936 */
    height: 41.14%;  /* 383    / 931 */
    z-index: 2;      /* photo-2 a többi felett */
}

.references1-photo-3 {
    left:   5.47%;   /* 51.23  / 936 */
    top:    53.24%;  /* 495.63 / 931 */
    width:  47.11%;  /* 441    / 936 */
    height: 41.03%;  /* 382    / 931 */
    z-index: 1;
}

.references1-photo-4 {
    left:   48.57%;  /* 454.65 / 936 */
    top:    11.98%;  /* 111.51 / 931 */
    width:  21.15%;  /* 198    / 936 */
    height: 18.47%;  /* 172    / 931 */
    z-index: 1;
}

.references1-photo-5 {
    left:    0.10%;  /* 0.96   / 936 */
    top:    45.61%;  /* 424.66 / 931 */
    width:  16.03%;  /* 150    / 936 */
    height: 13.96%;  /* 130    / 931 */
    z-index: 3;
}

.references1-photo-6 {
    left:   49.49%;  /* 463.24 / 936 */
    top:    74.33%;  /* 692.06 / 931 */
    width:  16.24%;  /* 152    / 936 */
    height: 14.07%;  /* 131    / 931 */
    z-index: 3;
}

/* ============================================================
   Díszítő hexagon outline-ok
   Pozíciók: section 1920×931px %-ában
   ============================================================ */

.references1-deco {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    display: block;
    line-height: 0;
}

.references1-deco svg {
    display: block;
    width: 100%;
    height: 100%;
}

.references1-deco-lg {
    width: clamp(60px, 7.55vw, 145px);
    height: clamp(52px, 6.56vw, 126px);
}

.references1-deco-sm {
    width: clamp(20px, 2.34vw, 45px);
    height: clamp(18px, 2.03vw, 39px);
}

/* Pozíciók — Figma Group1470/1474 elemek koordinátái 1920×931px-ben */
.references1-deco-1 { left: 80.99%; top: 21.27%; }
.references1-deco-2 { left: 85.68%; top: 64.34%; }
.references1-deco-3 { left: 50.99%; top: 65.41%; }
.references1-deco-4 { left: 52.19%; top: 10.53%; }
.references1-deco-5 { left: 56.15%; top:  5.69%; }
.references1-deco-6 { left: 87.14%; top: 19.33%; }
.references1-deco-7 { left: 50.99%; top: 40.28%; }
.references1-deco-8 { left: 54.48%; top: 80.99%; }
.references1-deco-9 { left: 91.88%; top: 62.30%; }

/* ============================================================
   Reszponzív
   ============================================================ */

@media (max-width: 991px) {
    .references1-inner {
        grid-template-columns: 1fr;
    }

    .references1-left {
        padding: clamp(40px, 6vw, 60px) clamp(20px, 5vw, 40px);
    }

    /* Mobilon: aspect-ratio elengedése, 2 oszlopos grid a fotóknak */
    .references1-right {
        aspect-ratio: unset;
        overflow: hidden;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 20px clamp(20px, 5vw, 40px) 40px;
    }

    .references1-photo {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        /* aspect-ratio helyett padding-bottom trick a flat-top hexagonhoz (86.6% = √3/2) */
        height: 0 !important;
        padding-bottom: 86.6%;
        z-index: 1 !important;
    }

    .references1-deco {
        display: none;
    }
}

@media (max-width: 576px) {
    .references1-right {
        gap: 8px;
    }
}