/**

 * Hero Media Grid - Template Block

 * 65% Gallery + 35% Map/Video stacked layout

 */



/* ==================== GRID CONTAINER ==================== */



.hero-media-grid {

    width: 100%;

    margin-bottom: 2rem;

}



.hero-media-grid .hero-media-grid__container {

    display: grid !important;

    grid-template-columns: 65% 35% !important;

    gap: 12px;

}



@media (max-width: 1024px) {

    .hero-media-grid .hero-media-grid__container {

        grid-template-columns: 1fr !important;

        gap: 12px;

    }

}



/* ==================== MAIN GALLERY (65%) ==================== */



.hero-media-grid__main {

    position: relative;

    width: 100%;

    background: #212121;

    border-radius: 12px;

    overflow: hidden;

}



.hero-gallery {

    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: 12px;

}



.hero-gallery__carousel {

    width: 100%;

    height: 400px;

}



@media (min-width: 768px) {

    .hero-gallery__carousel {

        height: 500px;

    }

}



@media (min-width: 1024px) {

    .hero-gallery__carousel {

        height: 545px;

    }

}



/* Swiper Wrapper & Slides */

.hero-gallery__carousel .swiper-wrapper {

    width: 100%;

    height: 100%;

}



.hero-gallery__carousel .swiper-slide {

    width: 100%;

    height: 100%;

}



.hero-gallery__carousel .swiper-slide img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.hero-gallery__lightbox-link {

    display: block;

    width: 100%;

    height: 100%;

    cursor: default;

    pointer-events: none;

}



.hero-gallery__lightbox-link img {

    pointer-events: none;

}



/* Discount Badge */

.hero-gallery__discount-badge {

    position: absolute;

    top: 2rem;

    left: -3rem;

    z-index: 10;

    background: var(--wp--preset--color--secondary);

    color: white;

    padding: 0.5rem 4rem;

    font-weight: 700;

    font-size: 0.875rem;

    text-transform: capitalize;

    letter-spacing: 0.05em;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

    transform: rotate(-45deg);

    transform-origin: center;

}



.discount-percentage {

    display: block;

}



.discount-text {

    display: block;

    font-size: 0.75rem;

    opacity: 0.9;

}



/* View All Photos Button */

.hero-gallery__view-button {

    position: absolute;

    bottom: 1.5rem;

    right: 1.5rem;

    z-index: 20;

    background: var(--wp--preset--color--secondary);

    color: white;

    border: none;

    padding: 0.75rem 1.5rem;

    border-radius: 2rem;

    font-size: 0.875rem;

    font-weight: 600;

    cursor: pointer;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    white-space: nowrap;

}



.hero-gallery__view-button:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);

    background: #d97b75;

}



.hero-gallery__view-button:active {

    transform: translateY(0);

}



.hero-gallery__view-button:focus-visible {

    outline: 2px solid white;

    outline-offset: 2px;

}



/* Activity Level Indicator */

.gallery-hero__activity-indicator {

    position: absolute;

    bottom: 1.5rem;

    left: 1.5rem;

    z-index: 20;

    display: inline-flex;

    align-items: end;

    gap: 0.75rem;

    padding: 0.625rem 1rem;

    border-radius: 2rem;

    background: rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(4px);

}



.activity-indicator__icon {

    display: flex;

    align-items: center;

    width: 56px;

    height: 32px;

}



.activity-indicator__icon svg {

    width: 100%;

    height: 100%;

}



.activity-indicator__label {

    color: white;

    font-size: 0.875rem;

    font-weight: 600;

    white-space: nowrap;

}



.activity-indicator__dots {

    display: flex;

    align-items: center;

    gap: 0.375rem;

}



.activity-dot {

    width: 14px;

    height: 14px;

    border-radius: 50%;

    background: white;

    transition: background 0.3s ease;

}



.activity-dot.active {

    background: var(--wp--preset--color--secondary);

}



/* Placeholder */

.hero-gallery__placeholder {

    display: flex;

    align-items: center;

    justify-content: center;

    height: 400px;

    background: #f5f5f5;

    color: #757575;

}



/* ==================== SIDEBAR (35%) ==================== */



.hero-media-grid .hero-media-grid__sidebar {

    display: grid !important;

    grid-template-rows: 1fr 1fr !important;

    gap: 12px;

}



@media (min-width: 1024px) {

    .hero-media-grid .hero-media-grid__sidebar {

        height: 545px;

    }

}



@media (max-width: 1024px) {

    .hero-media-grid .hero-media-grid__sidebar {

        grid-template-rows: auto !important;

        grid-template-columns: 1fr 1fr !important;

        gap: 12px;

    }

}



@media (max-width: 768px) {

    .hero-media-grid .hero-media-grid__sidebar {

        grid-template-columns: 1fr !important;

        gap: 12px;

    }

}



/* Map */

.hero-media-grid__map {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

    background: #f5f5f5;

    border-radius: 12px;

}



.hero-media-grid__map-link {

    display: block;

    width: 100%;

    height: 100%;

    position: relative;

    cursor: pointer;

}



.hero-media-grid__map img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.hero-media-grid__map-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background: rgba(0, 0, 0, 0.3);

    opacity: 0;

    transition: opacity 0.3s ease;

    color: white;

    font-weight: 600;

    gap: 0.5rem;

    pointer-events: none;

}



.hero-media-grid__map:hover .hero-media-grid__map-overlay,

.hero-media-grid__map-link:hover .hero-media-grid__map-overlay {

    opacity: 1;

}



/* Video */

.hero-media-grid__video {

    position: relative;

    width: 100%;

    height: 100%;

    background: #000;

    border-radius: 12px;

    overflow: hidden;

}



.hero-media-grid__video iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    border: none;

}



.hero-media-grid__video-placeholder {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    height: 100%;

    color: rgba(255, 255, 255, 0.5);

    gap: 1rem;

}



/* ==================== RESPONSIVE ==================== */



@media (max-width: 768px) {

    .hero-gallery__view-button {

        padding: 0.625rem 1.25rem;

        font-size: 0.8125rem;

        bottom: 1rem;

        right: 1rem;

    }



    .hero-gallery__discount-badge {

        font-size: 0.75rem;

        padding: 0.375rem 3rem;

        top: 1.5rem;

        left: -2.5rem;

    }



    .gallery-hero__activity-indicator {

        padding: 0.5rem 0.75rem;

        gap: 0.5rem;

        bottom: 1rem;

        left: 1rem;

    }



    .activity-indicator__icon {

        width: 26px;

        height: 16px;

    }



    .activity-indicator__label {

        font-size: 0.75rem;

    }



    .activity-indicator__dots {

        gap: 0.25rem;

    }



    .activity-dot {

        width: 8px;

        height: 8px;

    }

}



/* ==================== EDITOR PREVIEW ==================== */



.editor-styles-wrapper .hero-media-grid {

    border: 1px solid #e0e0e0;

    border-radius: 4px;

    overflow: hidden;

}