/* Stacked Media Block Styles */

.wp-block-lakesuperior-stacked-media {
    position: relative;
    display: block;
}

.wp-block-lakesuperior-stacked-media .stacked-media-container {
    position: relative;
    display: grid;
    grid-template-areas: 
    "top bottom"
    "arrow bottom";
    grid-template-columns: 2fr 3fr;
}

.wp-block-lakesuperior-stacked-media .stacked-media-container::before {
    content: "";
    display: block;
    width: 90%;
    height: 150%;
    background: url(../svgs/plus.svg) repeat top left;
    background-size: 2.7rem 3.3rem;
    position: absolute;
    top: -25%;
    left: 5%;
    aspect-ratio: 1 / 1;
    
}

.wp-block-lakesuperior-stacked-media .stacked-media-image {
    position: relative;
    overflow: hidden;
}

.wp-block-lakesuperior-stacked-media .stacked-media-image.top-image {
    grid-area: top;
    position: relative;
    z-index: 2;
}

.wp-block-lakesuperior-stacked-media .stacked-media-image.arrow-image {
    grid-area: arrow;
    position: relative;
    z-index: 2;
    align-self: center;
    justify-self: center;
}

.wp-block-lakesuperior-stacked-media .stacked-media-image.arrow-image svg {
    width: 60px;
    height: 60px;
}

.wp-block-lakesuperior-stacked-media .stacked-media-image.bottom-image {
    grid-area: bottom;
    margin-top: 6rem;
    margin-left: -3rem;
    z-index: 1;
}

.wp-block-lakesuperior-stacked-media .stacked-media-image.arrow-image {
    grid-area: arrow;
}

.wp-block-lakesuperior-stacked-media .stacked-media-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

/* Hover effects when linked */
.wp-block-lakesuperior-stacked-media a:hover .stacked-media-image img {
    transform: scale(1.02);
}

.wp-block-lakesuperior-stacked-media a {
    text-decoration: none;
    display: block;
}

/* Editor-specific styles */
.editor-styles-wrapper .wp-block-lakesuperior-stacked-media {
    position: relative;
    display: block;
}

.editor-styles-wrapper .wp-block-lakesuperior-stacked-media

.editor-styles-wrapper .wp-block-lakesuperior-stacked-media .stacked-media-image {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.editor-styles-wrapper .wp-block-lakesuperior-stacked-media .stacked-media-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

/* Hover effects when linked in editor */
.editor-styles-wrapper .wp-block-lakesuperior-stacked-media a:hover .stacked-media-image img {
    transform: scale(1.02);
}

.editor-styles-wrapper .wp-block-lakesuperior-stacked-media a {
    text-decoration: none;
    display: block;
    cursor: default;
    pointer-events: none;
}

/* Re-enable pointer events for the container to allow block selection */
.editor-styles-wrapper .wp-block-lakesuperior-stacked-media .stacked-media-container {
    pointer-events: auto;
}

/* Placeholder styles */
.editor-styles-wrapper .stacked-media-placeholder {
    margin: 20px 0;
}

/* Focus styles for accessibility in editor */
.editor-styles-wrapper .wp-block-lakesuperior-stacked-media a:focus {
    outline: none;
}

/* Upload button styles */
.wp-block-lakesuperior-stacked-media .button.button-large {
    cursor: pointer;
    color: #666;
    font-size: 14px;
}

.wp-block-lakesuperior-stacked-media .button.button-large:hover {
    background-color: #f0f0f0 !important;
    border-color: #999 !important;
}

.wp-block-lakesuperior-stacked-media .dashicon {
    font-size: 24px;
    margin-bottom: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .wp-block-lakesuperior-stacked-media .stacked-media-container {
        gap: 8px;
    }
}

/* Alignment support */
.wp-block-lakesuperior-stacked-media.alignleft {
    float: left;
    margin-right: 2em;
    margin-bottom: 1em;
    max-width: 300px;
}

.wp-block-lakesuperior-stacked-media.alignright {
    float: right;
    margin-left: 2em;
    margin-bottom: 1em;
    max-width: 300px;
}

.wp-block-lakesuperior-stacked-media.aligncenter {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.wp-block-lakesuperior-stacked-media.alignwide {
    max-width: var(--wp--style--global--wide-size, 1280px);
}

.wp-block-lakesuperior-stacked-media.alignfull {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Focus styles for accessibility */
.wp-block-lakesuperior-stacked-media a:focus {
    outline: none;
}

/* Loading state */
.wp-block-lakesuperior-stacked-media .stacked-media-image.loading {
    background: #f0f0f0;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wp-block-lakesuperior-stacked-media .stacked-media-image.loading::before {
    content: "Loading...";
    color: #666;
    font-style: italic;
}