/* ============================================================
   Images1 — Figma alapú redesign
   Honeycomb hexagonális galéria (2-3-2 elrendezés)
   Gradiens háttér, pentagon gomb
   ============================================================ */

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

.img1-section {
    position: relative;
    padding: clamp(40px, 4.17vw, 80px) 0 clamp(60px, 9.375vw, 180px);
}

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

.img1-header {
    display: flex;
    align-items: flex-end;
    gap: clamp(16px, 1.77vw, 34px);
    margin-bottom: clamp(30px, 3.125vw, 60px);
}

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

/* Eyebrow */

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

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

.img1-eyebrow-text {
    color: #e26d1e;
    font-family: Montserrat, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}

/* Heading — font-size a Porto text-10 / text-lg-12-5 osztályból jön */

.img1-heading {
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-weight: 800;
    line-height: 1.1;
}

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

/* Leírás — a heading alatt, a galéria fölött */

.img1-description {
    color: #fff;
    font-family: Montserrat, sans-serif;
    line-height: 1.5;
    margin-top: clamp(12px, 1.25vw, 24px);
    max-width: 786px;
}

.img1-description p {
    margin-bottom: 0.5em;
}

.img1-description p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   Pentagon gomb (VISSZA — bal nyíl, azonos ref1-btn mintával)
   ============================================================ */

/* Pentagon gomb — font-size a Porto text-4-5 osztályból jön */
.img1-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 50px;
    padding: 15px 30px;
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    transition: color 0.2s ease;
}

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

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

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

.img1-btn-arrow {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 11px;
    height: 9px;
    transition: transform 0.2s ease;
    order: -1; /* nyíl a szöveg előtt = bal oldalon */
}

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

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

.img1-gallery-desktop { display: block; }
.img1-grid-tablet     { display: none; }

/* ============================================================
   Honeycomb galéria — Desktop 2-3-2 elrendezés

   Figma méretek (1920px canvas, group x=97, w=1723):
     hex szélesség : 422px = 21.98vw
     hex magasság  : 422 × (445/514) ≈ 365px = 19.01vw
     sor y-lépés   : 187px =  9.74vw
     sor átfedés   : 178px =  9.27vw  (magasság − y-lépés)
     hex gap       : 229px = 11.93vw  (azonos sor hexek közt)
     row1/3 offset : 325px = 16.93vw  (bal eltolás)
   ============================================================ */

.img1-gallery {
    --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);
    --row1-offset:  min(16.93vw, 325px);

    overflow: visible;
}

/* ============================================================
   Sorok
   ============================================================ */

.img1-row {
    display: flex;
    align-items: flex-start;
    pointer-events: none;
}

.img1-row-1,
.img1-row-3 {
    padding-left: var(--row1-offset);
    gap: var(--hex-gap);
}

.img1-row-2 {
    gap: var(--hex-gap);
    margin-top: calc(-1 * var(--row-overlap));
    position: relative;
    z-index: 1;
}

.img1-row-3 {
    margin-top: calc(-1 * var(--row-overlap));
    position: relative;
    z-index: 2;
}

/* ============================================================
   Desktop hex kártya
   ============================================================ */

.img1-hex {
    display: block;
    flex-shrink: 0;
    width: var(--hex-w);
    aspect-ratio: 514 / 445;
    text-decoration: none;
    position: relative;
    cursor: pointer;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    pointer-events: auto;
}

/* ============================================================
   Közös hex inner (desktop és tablet)
   ============================================================ */

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

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

.img1-hex:hover .img1-hex-img,
.img1-thex:hover .img1-hex-img {
    transform: scale(1.06);
}

/* ============================================================
   Tablet 2-col honeycomb rács (references1 minta)
   Figma tablet (768px canvas):
     hex szélesség  : 402px = 52.42vw
     átfedés        :  85px = 11.09vw
     sorköz         :  16px =  2.08vw
     sor-offset     : 184px = 23.94vw
   ============================================================ */

.img1-thex {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 514 / 445;
    text-decoration: none;
    cursor: pointer;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    pointer-events: auto;
}

/* ============================================================
   Fejléc törés
   ============================================================ */

@media (max-width: 860px) {
    .img1-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   Tablet (≤1100px): desktop grid elrejtése, 2-col tablet grid
   ============================================================ */

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

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

@media (max-width: 1100px) {

    .img1-gallery-desktop { display: none; }

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

    .img1-tcol {
        --w:50vw;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        width: var(--w);
        gap: 16px;
        position: relative;
        z-index: 2;
        pointer-events: none;
    }

    .img1-tcol + .img1-tcol {
        margin-left: -11vw;
        z-index: 1;
    }

    .img1-tcol-offset {
        margin-top: calc((var(--w) * 445 / 514 / 2 ) + 8px);
    }

    .img1-section {
        padding-bottom: clamp(50px, 6vw, 100px);
    }
}

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

@media (max-width: 640px) {

    .img1-grid-tablet {
        flex-wrap: wrap;
        padding-bottom: 20px;
    }

    .img1-tcol {
        flex: 1 1 100%;
        width: auto !important;
        z-index: 1 !important;
    }

    .img1-tcol + .img1-tcol {
        margin-left: 0 !important;
    }

    .img1-tcol-offset {
        margin-top: 16px !important;
    }

    .img1-section {
        padding-bottom: clamp(40px, 6vw, 80px);
    }
}

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