/* ============================================
   APARTMENTS.CSS - Sunny Side Apartments page
   ============================================
   Reuses .glass-button, .glass-hover-card, .cards-container, .page-header
   from glass.css / layout.css. Only page-specific layout lives here.
*/

/* ============================================
   PAGE WRAPPER
   ============================================ */
.apartments-page {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
    box-sizing: border-box;
    overflow-x: hidden; /* Belt-and-braces: clip any rogue child overflow */
}

/* Defensive overflow / sizing rules. Every direct child / section of the
   apartments page is forced to respect the parent width so long unbreakable
   tokens or grids with high floors cannot blow the layout out of the viewport
   on small screens. We deliberately do NOT use a universal selector here
   because Leaflet sets explicit widths on its internal tile/pane elements
   (e.g. multi-thousand-pixel tile containers) and a universal max-width: 100%
   would break the map at low zoom levels. */
.apartments-page > *,
.apartments-page section,
.apartments-page section > *,
.apartments-page .apartments-disclaimer,
.apartments-page .apartments-disclaimer > *,
.apartments-page .apartments-quick-info,
.apartments-page .apartments-quick-info > *,
.apartments-page .apartments-features__grid,
.apartments-page .apartments-features__grid > *,
.apartments-page .apartments-distances,
.apartments-page .apartments-distances > *,
.apartments-page .apartments-gallery__grid,
.apartments-page .apartments-gallery__grid > *,
.apartments-page .apartments-cta-block,
.apartments-page .apartments-cta-block > *,
.apartments-page .apartments-map-actions,
.apartments-page .apartments-map-actions > * {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Make sure media never blows out of its cell, anywhere on the page. */
.apartments-page img,
.apartments-page video,
.apartments-page iframe {
    max-width: 100%;
    height: auto;
}

/* But keep cover-fill images intact (gallery thumbs use width/height 100%). */
.apartments-gallery__item img {
    height: 100%;
}

/* Allow long unbroken strings (e.g. info@sunnysidecycling.com) to wrap. */
.apartments-disclaimer__body,
.apartments-disclaimer__cta,
.apartments-disclaimer__cta a,
.apartments-location__address,
.apartments-location__address a,
.apartments-cta-block,
.apartments-cta-block p,
.apartments-cta-block .glass-button {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.apartments-page .page-header {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.apartments-page .page-header h1 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

.apartments-page .page-header p {
    max-width: 720px;
    margin: 0 auto;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ============================================
   DISCLAIMER BANNER (opening date / pre-booking)
   ============================================ */
.apartments-disclaimer {
    position: relative;
    margin: 0 auto 2rem;
    max-width: 1000px;
    padding: 1.25rem 1.5rem;
    border-radius: 14px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--white-25);

    background: linear-gradient(
        135deg,
        var(--accent-hover) 0%,
        var(--primary-light) 60%,
        rgba(255, 232, 176, 0.7) 100%
    );
    box-shadow:
        0 6px 22px var(--black-10),
        inset 0 1px 0 var(--white-45);
}

.apartments-disclaimer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        125deg,
        var(--white-35) 0%,
        transparent 35%,
        transparent 65%,
        var(--white-15) 100%
    );
    pointer-events: none;
    z-index: 0;
}

.apartments-disclaimer > * {
    position: relative;
    z-index: 1;
}

.apartments-disclaimer__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.5rem;
    color: var(--text-primary);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    min-width: 0;
}

.apartments-disclaimer__icon {
    font-size: 1.4rem;
    line-height: 1;
}

.apartments-disclaimer__body {
    color: var(--text-primary);
    font-size: 0.98rem;
    line-height: 1.55;
    margin: 0 0 0.85rem;
}

.apartments-disclaimer__body strong {
    color: var(--primary-dark);
}

.apartments-disclaimer__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
    color: var(--primary-dark);
    font-weight: 600;
    min-width: 0;
    max-width: 100%;
}

.apartments-disclaimer__cta a {
    color: var(--primary-dark);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.apartments-disclaimer__cta a:hover {
    color: var(--text-primary);
}

/* ============================================
   QUICK INFO PILLS (capacity / price / parking)
   ============================================ */
.apartments-quick-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin: 0 auto 2.5rem;
    max-width: 900px;
    min-width: 0;
}

.apartments-quick-info__item {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.apartments-quick-info__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);

    background: var(--bg-secondary);
    border: 1px solid var(--primary-dark-08);
    box-shadow:
        0 2px 8px var(--accent-shadow),
        inset 0 1px 0 var(--white-45);
}

.apartments-quick-info__icon {
    font-size: 1.15rem;
    line-height: 1;
}

/* ============================================
   GALLERY (hero + grid of images)
   ============================================ */
.apartments-gallery {
    margin-bottom: 3rem;
}

.apartments-gallery__heading {
    text-align: center;
    color: var(--text-primary);
    font-size: 2rem;
    margin-bottom: 1rem;
}

.apartments-gallery__intro {
    text-align: center;
    color: var(--text-secondary);
    max-width: 720px;
    margin: 0 auto 1.75rem;
    line-height: 1.6;
}

/* Mobile-first: 2 columns on phones (collapses to 1 below 540 / 380),
   3 columns on tablet+ (>= 768 px). No auto-fit / minmax(NNNpx, ...) here:
   those patterns can briefly overflow at the moment a track-count flip is
   evaluated against a viewport that includes the scrollbar gutter. */
.apartments-gallery__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

@media (min-width: 768px) {
    .apartments-gallery__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }
}

.apartments-gallery__item {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-secondary);
    box-shadow: 0 4px 14px var(--accent-shadow);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.apartments-gallery__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px var(--accent-shadow);
}

.apartments-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 350ms ease;
}

.apartments-gallery__item:hover img {
    transform: scale(1.04);
}

.apartments-gallery__caption {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-light);
    background: var(--primary-dark-70);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Lightbox */
.apartments-lightbox {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.apartments-lightbox[hidden] {
    display: none;
}

.apartments-lightbox__slide {
    max-width: min(96vw, 1400px);
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.apartments-lightbox__slide img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.apartments-lightbox__close,
.apartments-lightbox__prev,
.apartments-lightbox__next {
    position: absolute;
    background: rgba(255, 255, 255, 0.92);
    border: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.apartments-lightbox__close { top: 1rem; right: 1rem; }
.apartments-lightbox__prev  { left: 1rem; top: 50%; transform: translateY(-50%); }
.apartments-lightbox__next  { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ============================================
   360 TOUR PLACEHOLDER (Marzipano-ready)
   ============================================ */
.apartments-360 {
    margin-bottom: 3rem;
}

.apartments-360__heading {
    text-align: center;
    color: var(--text-primary);
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.apartments-360__intro {
    text-align: center;
    color: var(--text-secondary);
    max-width: 720px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
}

/* IMPORTANT: do NOT combine `aspect-ratio` with `min-height` here.
   When the element width × 9/16 falls below min-height, browsers resolve
   the conflict by computing the width back from min-height × 16/9. At
   viewports ~596 px (where the page's content area is ~568 px and
   568 × 9/16 ≈ 319.95 px, just under 320 px), this produces an element
   that is fractionally wider than its container, causing horizontal
   overflow on every child of .apartments-page. We instead use a fixed
   height on small viewports and only enable the 16:9 ratio at sizes
   where it computes a height >= 320 px. */
.apartments-360__viewer {
    position: relative;
    width: 100%;
    height: 280px;
    border-radius: 14px;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 30%, var(--primary-dark-20) 0%, transparent 60%),
        radial-gradient(circle at 70% 70%, var(--primary-light-25) 0%, transparent 55%),
        linear-gradient(135deg, #1a3a3a 0%, var(--primary-dark) 100%);
    border: 1px solid var(--white-12);
    box-shadow:
        0 8px 28px var(--black-12),
        inset 0 1px 0 var(--white-15);
    color: var(--text-light);
}

/* From ~600 px upward the 16:9 ratio gives a height of >= 337 px, so it
   is safe to switch back to a true aspect-ratio sized panel. */
@media (min-width: 600px) {
    .apartments-360__viewer {
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

.apartments-360__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    gap: 0.75rem;
}

.apartments-360__placeholder-icon {
    font-size: 3rem;
    line-height: 1;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.apartments-360__placeholder h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
}

.apartments-360__placeholder p {
    max-width: 480px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--white-85);
    margin: 0;
}

/* ============================================
   FEATURE / WHY-STAY GRID
   ============================================ */
.apartments-features {
    margin-bottom: 3rem;
}

.apartments-features__heading {
    text-align: center;
    color: var(--text-primary);
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.apartments-features__intro {
    text-align: center;
    color: var(--text-secondary);
    max-width: 720px;
    margin: 0 auto 1.75rem;
    line-height: 1.6;
}

/* Mobile-first explicit breakpoints — see note on the gallery grid above. */
.apartments-features__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 700px) {
    .apartments-features__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

@media (min-width: 1000px) {
    .apartments-features__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.apartments-feature-card {
    padding: 1.5rem 1.25rem;
    border-radius: 12px;
    background: var(--bg-secondary);
    box-shadow: 0 2px 10px var(--accent-shadow);
    border: 1px solid var(--primary-dark-08);
    text-align: center;
    transition: transform 200ms ease, box-shadow 200ms ease;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.apartments-feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px var(--accent-shadow);
}

.apartments-feature-card__icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.6rem;
}

.apartments-feature-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin: 0 0 0.4rem;
}

.apartments-feature-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* ============================================
   LOCATION / MAP SECTION
   ============================================ */
.apartments-location {
    margin-bottom: 3rem;
}

.apartments-location__heading {
    text-align: center;
    color: var(--text-primary);
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.apartments-location__intro {
    text-align: center;
    color: var(--text-secondary);
    max-width: 720px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
}

.apartments-location__address {
    text-align: center;
    margin-bottom: 1.25rem;
    color: var(--text-primary);
    font-weight: 600;
}

.apartments-location__address a {
    color: var(--primary-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.apartments-location__address a:hover {
    color: var(--accent-hover);
}

/* Distance cards — mobile-first explicit breakpoints.
   2 columns on phones / tablets, 4 columns only when viewport has enough room
   for each card to comfortably show its title + value on one or two lines. */
.apartments-distances {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    margin-bottom: 1.75rem;
}

@media (min-width: 900px) {
    .apartments-distances {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.85rem;
    }
}

.apartments-distance-card {
    padding: 1rem 1.1rem;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--primary-dark-08);
    box-shadow: 0 2px 8px var(--accent-shadow);
    text-align: left;
    cursor: pointer;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.apartments-distance-card:hover,
.apartments-distance-card.is-active {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px var(--accent-shadow);
    border-color: var(--primary-dark-15);
}

.apartments-distance-card.is-active {
    background: linear-gradient(
        135deg,
        var(--primary-light-25) 0%,
        var(--primary-light-15) 100%
    );
}

.apartments-distance-card__icon {
    display: inline-block;
    font-size: 1.4rem;
    line-height: 1;
    margin-bottom: 0.35rem;
}

.apartments-distance-card__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin: 0 0 0.15rem;
}

.apartments-distance-card__value {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* Map container */
.apartments-map-wrapper {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 24px var(--accent-shadow);
    border: 1px solid var(--primary-dark-08);
}

#apartments-map {
    width: 100%;
    height: 460px;
}

.apartments-map-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* Custom popup styling on the leaflet map */
.leaflet-popup-content-wrapper {
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
}

.leaflet-popup-content {
    margin: 0.7rem 0.85rem !important;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text-primary);
}

.leaflet-popup-content strong {
    color: var(--primary-dark);
}

/* ============================================
   FINAL CTA BLOCK
   ============================================ */
.apartments-cta-block {
    text-align: center;
    padding: 2rem 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary-dark) 0%, #1a4a48 100%);
    color: var(--text-light);
    box-shadow: 0 6px 22px var(--black-12);
}

.apartments-cta-block h2 {
    color: var(--primary-light);
    font-size: 1.75rem;
    margin: 0 0 0.5rem;
}

.apartments-cta-block p {
    color: var(--white-85);
    margin: 0 auto 1.25rem;
    max-width: 580px;
    line-height: 1.55;
}

.apartments-cta-block .glass-button {
    color: var(--text-light);
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
}

/* ============================================
   RESPONSIVE
   ============================================ */
/* Tablet — gallery already 2 cols at base, features still 1 col, distances
   still 2 cols. We only tighten typography / page padding here. */
@media (max-width: 768px) {
    .apartments-page { padding: 1rem 0.85rem 2rem; }

    .apartments-disclaimer { padding: 1rem 1.1rem; }
    .apartments-disclaimer__title { font-size: 1.05rem; }

    .apartments-gallery__heading,
    .apartments-360__heading,
    .apartments-features__heading,
    .apartments-location__heading { font-size: 1.6rem; }

    #apartments-map { height: 380px; }

    .apartments-cta-block h2 { font-size: 1.4rem; }
}

/* Phone — drop the gallery to a single column and shrink the CTA. */
@media (max-width: 540px) {
    .apartments-gallery__grid { grid-template-columns: 1fr; gap: 0.85rem; }
    .apartments-quick-info__item { font-size: 0.88rem; padding: 0.45rem 0.9rem; }
    .apartments-quick-info { gap: 0.45rem; }
    .apartments-map-actions { gap: 0.5rem; }
    #apartments-map { height: 320px; }

    .apartments-cta-block { padding: 1.5rem 1rem; }
    .apartments-cta-block .glass-button {
        font-size: 0.95rem;
        padding: 0.7em 1em;
    }
}

/* Small phone — single column distance cards. */
@media (max-width: 420px) {
    .apartments-distances { grid-template-columns: 1fr; }
}

/* Very small phone (e.g. iPhone SE 1st gen / Android mini). */
@media (max-width: 380px) {
    .apartments-page { padding: 0.85rem 0.6rem 1.75rem; }
    .apartments-feature-card { padding: 1.2rem 1rem; }
    .apartments-disclaimer { padding: 0.9rem 0.85rem; }
    .apartments-disclaimer__body { font-size: 0.92rem; }
    .apartments-disclaimer__title { font-size: 1rem; }

    .apartments-page .page-header { padding: 0; }
    .apartments-page .page-header h1 { font-size: 1.5rem; }

    .apartments-gallery__heading,
    .apartments-360__heading,
    .apartments-features__heading,
    .apartments-location__heading { font-size: 1.4rem; }

    .apartments-cta-block h2 { font-size: 1.25rem; }

    #apartments-map { height: 280px; }
}

@media (prefers-reduced-motion: reduce) {
    .apartments-feature-card,
    .apartments-distance-card,
    .apartments-gallery__item,
    .apartments-gallery__item img {
        transition: none;
    }
}