/* TravelCollageGrid — bağımsız, ek kütüphane gerektirmeyen responsive mozaik */
.espa-travel-collage {
    --tc-gap: 25px;
    --tc-top: 170px;
    --tc-bottom: 218px;
    width: 100%;
    max-width: 1100px;
    margin: 32px auto 45px;
}
.espa-travel-collage__header { margin-bottom: 25px; text-align: center; }
.espa-travel-collage__header h2 {
    color: var(--espa-heading, #183147);
    font-family: var(--font-family-heading, inherit);
    font-weight: 800;
    font-size: clamp(24px, 2.7vw, 36px);
    letter-spacing: -.03em;
    margin: 0;
}
.espa-travel-collage__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: var(--tc-top) var(--tc-top) var(--tc-bottom) var(--tc-bottom);
    gap: var(--tc-gap);
    isolation: isolate;
}
.espa-travel-collage__item { position: relative; min-width: 0; min-height: 0; z-index: 1; }
.espa-travel-collage__card {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 24px;
    background: #e5e9ed;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 11px 22px rgba(8, 25, 45, .15);
    transform: translateZ(0);
    transition: transform .24s ease, box-shadow .24s ease;
}
.espa-travel-collage__card:is(:hover,:focus-visible) {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 18px 32px rgba(8, 25, 45, .23);
}
.espa-travel-collage__card:focus-visible { outline: 3px solid var(--espa-primary, #f22632); outline-offset: 3px; }
.espa-travel-collage__photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .35s ease;
}
.espa-travel-collage__card:hover .espa-travel-collage__photo { transform: scale(1.045); }
.espa-travel-collage__shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 48%, rgba(2,18,29,.13) 64%, rgba(2,18,29,.63) 100%);
}
.espa-travel-collage__caption {
    position: absolute;
    z-index: 1;
    bottom: 19px;
    left: 10px;
    right: 10px;
    display: block;
    color: #fff;
    font-size: clamp(12px, 1.18vw, 16px);
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0,0,0,.48);
    overflow-wrap: anywhere;
}
/* Masaüstü: 4 küçük sol, ortada 1 büyük + 2 uzun, sağda 2 küçük + 1/2 alt. */
.espa-travel-collage__item--left-top { grid-column: 1; grid-row: 1; }
.espa-travel-collage__item--left-mid { grid-column: 1; grid-row: 2; }
.espa-travel-collage__item--left-lower { grid-column: 1; grid-row: 3; }
.espa-travel-collage__item--left-bottom { grid-column: 1; grid-row: 4; }
.espa-travel-collage__item--hero { grid-column: 2 / 4; grid-row: 1 / 3; }
.espa-travel-collage__item--lower-center-left { grid-column: 2; grid-row: 3 / 5; }
.espa-travel-collage__item--lower-center-right { grid-column: 3; grid-row: 3 / 5; }
.espa-travel-collage__item--right-top { grid-column: 4; grid-row: 1; }
.espa-travel-collage__item--right-mid { grid-column: 4; grid-row: 2; }
.espa-travel-collage__item--right-lower { grid-column: 4; grid-row: 3 / 5; }
.espa-travel-collage--twelve .espa-travel-collage__item--right-lower { grid-row: 3; }
.espa-travel-collage__item--right-bottom { grid-column: 4; grid-row: 4; }
.espa-travel-collage__item--center-focus {
    box-sizing: border-box;
    grid-column: 2 / 4;
    grid-row: 2 / 4;
    z-index: 3;
    justify-self: center;
    align-self: center;
    width: clamp(230px, 29vw, 340px);
    height: clamp(230px, 29vw, 340px);
    border: 25px solid #fff;
    border-radius: 50%;
    filter: drop-shadow(0 14px 16px rgba(10, 30, 50, .13));
}
.espa-travel-collage__card--center { border-radius: 50%; box-shadow: none; }
.espa-travel-collage__card--center .espa-travel-collage__shade {
    background: linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.47));
}
.espa-travel-collage__card--center .espa-travel-collage__caption {
    top: 50%; bottom: auto; transform: translateY(-50%);
    left: 14px; right: 14px;
    font-size: clamp(22px, 2.6vw, 34px);
    line-height: 1.17;
    letter-spacing: -.015em;
}
@media (min-width: 768px) and (max-width: 1100px) {
    .espa-travel-collage { --tc-gap: 17px; --tc-top: 145px; --tc-bottom: 196px; }
    .espa-travel-collage__item--center-focus { width: clamp(210px, 28vw, 295px); height: clamp(210px, 28vw, 295px); border-width: 20px; }
}
/* Referanstaki mobil 2 sütun dizilimi: küçükler, hero, 2 uzun, kalan küçükler. */
@media (max-width: 767.98px) {
    .espa-travel-collage { --tc-gap: 13px; margin: 20px auto 28px; }
    .espa-travel-collage__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: 105px 105px 215px 237px 114px 114px;
    }
    .espa-travel-collage__card { border-radius: 19px; }
    .espa-travel-collage__caption { bottom: 12px; left: 8px; right: 8px; font-size: clamp(10px, 2.8vw, 13px); line-height: 1.25; }
    .espa-travel-collage__item--left-top { grid-column: 1; grid-row: 1; }
    .espa-travel-collage__item--left-mid { grid-column: 2; grid-row: 1; }
    .espa-travel-collage__item--right-top { grid-column: 1; grid-row: 2; }
    .espa-travel-collage__item--right-mid { grid-column: 2; grid-row: 2; }
    .espa-travel-collage__item--hero { grid-column: 1 / 3; grid-row: 3; }
    .espa-travel-collage__item--lower-center-left { grid-column: 1; grid-row: 4; }
    .espa-travel-collage__item--lower-center-right { grid-column: 2; grid-row: 4; }
    .espa-travel-collage__item--left-lower { grid-column: 1; grid-row: 5; }
    .espa-travel-collage__item--left-bottom { grid-column: 1; grid-row: 6; }
    .espa-travel-collage__item--right-lower { grid-column: 2; grid-row: 5 / 7; }
    .espa-travel-collage--twelve .espa-travel-collage__item--right-lower { grid-row: 5; }
    .espa-travel-collage__item--right-bottom { grid-column: 2; grid-row: 6; }
    .espa-travel-collage__item--center-focus {
        grid-column: 1 / 3; grid-row: 3 / 5;
        width: clamp(186px, 56vw, 245px);
        height: clamp(186px, 56vw, 245px);
        border-width: 17px;
    }
    .espa-travel-collage__card--center { border-radius: 50%; }
    .espa-travel-collage__card--center .espa-travel-collage__caption { font-size: clamp(18px, 5.1vw, 26px); left: 5px; right: 5px; }
}
@media (max-width: 360px) {
    .espa-travel-collage { --tc-gap: 10px; }
    .espa-travel-collage__grid { grid-template-rows: 92px 92px 195px 216px 106px 106px; }
    .espa-travel-collage__item--center-focus { width: 190px; height: 190px; border-width: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .espa-travel-collage__card, .espa-travel-collage__photo { transition: none; }
}

/* Üst ortadaki büyük görselin başlığını üstte göster */
.espa-travel-collage__item--hero .espa-travel-collage__card {
    position: relative;
}

.espa-travel-collage__item--hero .espa-travel-collage__caption {
    position: absolute;
    top: 20px;
    bottom: auto;
    left: 50%;
    right: auto;

    transform: translateX(-50%);

    z-index: 10;
    display: block;
    opacity: 1;
    visibility: visible;

    width: max-content;
    max-width: calc(100% - 32px);

    padding: 10px 18px;
    border-radius: 12px;

  /*  background: rgba(10, 28, 47, 0.58);*/
    backdrop-filter: blur(6px);

    color: #fff;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Mobil */
@media (max-width: 767.98px) {
    .espa-travel-collage__item--hero .espa-travel-collage__caption {
        top: 12px;
        padding: 7px 12px;
        max-width: calc(100% - 20px);
        font-size: 15px;
    }
}