@charset "utf-8";
p {
	font-weight: 400 !important;
	text-align: justify
}

.gallery .image {
    position: relative; /* needed for the button positioning */
}

.overlay-button {
    position: absolute;
    bottom: 10px; /* distance from bottom */
    left: 50%;
    transform: translateX(-50%); /* center horizontally */
    z-index: 10;
    cursor: pointer;
    background-color: #000; /* black background */
    color: #fff;           /* white text */
    padding: 0.5em 1em;
    border-radius: 4px;    /* optional rounded corners */
    font-size: 0.9rem;
    text-align: center;
    text-decoration: none; /* remove underline if any */
    transition: background 0.3s ease;
}

.overlay-button:hover {
    background-color: #222; /* slightly lighter/darker on hover */
}

.grid-icons li .label {
    display: block !important;
    text-align: center !important;
    margin-top: 5px !important;
}

/* Center grid-icons on mobile */
@media screen and (max-width: 768px) {
    .grid-icons {
        float: none !important;       /* remove float */
        text-align: center;            /* center inline-block children */
        display: block !important;     /* reset display */
        margin: 0 auto;                /* center the whole ul */
    }

    .grid-icons li {
        display: inline-block;         /* show icons side by side */
        float: none !important;        /* remove float */
        text-align: center;            /* center labels */
        margin: 10px 5px;              /* spacing between icons */
    }
	
	/* Remove connecting lines between grid-icons */
/* Remove connecting lines between grid-icons on all screens */
/* Remove connecting lines on grid-icons (desktop + mobile) */
.grid-icons.connected li::before,
.grid-icons.connected li::after {
    content: none !important;       /* remove pseudo content */
    border: none !important;        /* remove any border line */
    background: none !important;    /* remove any background color used for the line */
    width: 0 !important;            /* collapse width */
    height: 0 !important;           /* collapse height */
	}
}

/* FORCE desktop image to show by default */
.desktop-image {
    display: block !important;
    width: 100%;
    height: auto;
}

/* Hide mobile image by default */
.mobile-image {
    display: none !important;
}

/* Mobile image swap */
@media screen and (max-width: 768px) {
    .desktop-image {
        display: none !important;
    }

    .mobile-image {
        display: block !important;
        width: 100%;
        height: auto;
    }
}

@media screen and (max-width: 768px) {

    /* Reset Ethereal image container */
    .panel.banner .image {
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
    }

    /* Center mobile image properly */
    .panel.banner .image img.mobile-image {
        display: block !important;
        width: 100%;
        height: auto;
        margin: 0 auto !important;
        object-fit: contain;
        position: relative !important;
        left: 0 !important;
        transform: none !important;
    }
}




    /* Dark underlay for text content on mobile */
    
@media screen and (max-width: 768px) {

    .mobile-dark {
        background: rgba(0, 0, 0, 0.30);
        padding: 2rem 1.5rem;
    }

    .mobile-dark h2,
    .mobile-dark p {
        color: #ffffff;
    }

    .mobile-dark p {
        opacity: 0.95;
    }
}

/* Desktop: vertical solid white lines including left and right edges */
.gallery-separated {
    border-left: 2px solid #ffffff;  /* left edge */
    border-right: 2px solid #ffffff; /* right edge */
    display: flex;                    /* keep images in a row */
}

.gallery-separated a {
    border-right: 2px solid #ffffff; /* line between images */
    padding: 0 1rem;                 /* space from line */
}

.gallery-separated a:last-child {
    border-right: none; /* already handled by container border */
}

/* Mobile: horizontal solid white lines including top and bottom edges */
@media screen and (max-width: 768px) {
    .gallery-separated {
        border-left: none;
        border-right: none;
        border-top: 4px solid #ffffff;  /* top edge of gallery */
        border-bottom: 4px solid #ffffff; /* bottom edge of gallery */
        display: block;                  /* stack images vertically */
    }

    .gallery-separated a {
        border-right: none; 
        border-bottom: none; /* remove default bottom */
        padding: 0.5rem 0;   /* vertical spacing between lines */
    }

    /* Add horizontal line between items except first one */
    .gallery-separated a + a {
        border-top: 4px solid #ffffff; /* line between stacked images */
    }
}