/* ==========================================================================
   About - лендинг: Hero, Хронология, Ценности, Удобства, Галерея.
   ========================================================================== */

/* --- Hero --- */
.about-plain-header {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: calc(var(--header-height) + 4rem) var(--container-padding) 3rem;
}
.about-plain-header h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin: 0 0 1rem; max-width: 20ch; }
.about-plain-subtitle { font-size: 1.2rem; max-width: 55ch; margin: 0 0 1rem; color: #555; }
.about-plain-intro { font-size: 1rem; max-width: 55ch; margin: 0 0 2rem; color: #777; }

/* --- Хронология --- */
.about-timeline {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 3rem var(--container-padding) 3rem;
    scroll-margin-top: var(--header-height);
}
.about-timeline-track { position: relative; max-width: 700px; }
.about-timeline-track::before {
    content: '';
    position: absolute;
    left: 6px; top: 4px; bottom: 4px;
    width: 1px;
    background: var(--color-stone-line);
}
.about-timeline-row {
    position: relative;
    display: flex;
    gap: 1rem;
    margin-bottom: 3.5rem;
}
.about-timeline-row:last-child { margin-bottom: 0; }
.about-timeline-marker { position: relative; flex: 0 0 14px; }
.about-timeline-dot {
    position: absolute; top: 4px; left: 0;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--color-teal);
}
.about-timeline-content { flex: 1; min-width: 0; }
.about-timeline-photo {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16/9;
    max-width: 480px;
    margin-bottom: 1.2rem;
}

.about-timeline-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-timeline-period {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--color-teal);
    margin-bottom: 0.6rem;
}
.about-timeline-content p { font-size: 1.15rem; line-height: 1.65; margin: 0; max-width: 60ch; color: var(--color-text); }

/* --- Ценности --- */
.about-values {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 3rem var(--container-padding);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}
.about-values-card { border-top: 1px solid var(--color-stone-line); padding-top: 1.2rem; }
.about-values-card h3 { font-size: 1.2rem; margin: 0 0 0.5rem; color: var(--color-brown); }
.about-values-card p { font-size: 0.98rem; line-height: 1.6; color: #555; margin: 0; }

/* --- Удобства --- */
.about-facilities {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 3rem var(--container-padding);
}
.about-facilities-inner { background: var(--color-stone); border-radius: var(--radius); padding: 3rem; }
.about-facilities-inner h2 { margin: 0 0 1rem; font-size: clamp(1.8rem, 3.5vw, 2.4rem); }
.about-facilities-text { max-width: 65ch; margin: 0 0 3rem; font-size: 1.05rem; line-height: 1.7; color: #555; }
.about-facilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.5rem;
}
.about-facility-item {
    display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
    text-align: center;
    padding: 1.5rem 1rem;
    background: #fff;
    border-radius: var(--radius);
}
.about-facility-item svg { width: 28px; height: 28px; color: var(--color-teal); }
.about-facility-item span { font-size: 0.9rem; color: var(--color-text); }

/* --- Отдых и удобства (с фото) - бассейн/детская/велосипеды/парк --- */
.about-amenities {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 3rem var(--container-padding) 3rem;
}
.about-amenities-heading { max-width: 65ch; margin: 0 0 2rem; }
.about-amenities-heading h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); margin: 0 0 0.75rem; }
.about-amenities-heading p { font-size: 1.05rem; line-height: 1.7; color: #555; margin: 0; }
.about-amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}
.about-amenity-card {
    border: 1px solid var(--color-stone-line);
    border-radius: var(--radius);
    overflow: hidden;
}
.about-amenity-photo { aspect-ratio: 4/3; overflow: hidden; }
.about-amenity-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-amenity-body { padding: 1.25rem 1.4rem; }
.about-amenity-card h3 { font-size: 1.1rem; margin: 0 0 0.4rem; }
.about-amenity-card p { font-size: 0.92rem; line-height: 1.55; color: #555; margin: 0; }

/* --- Галерея: слайдшоу без модалки (компонент room-slideshow со страницы
   Номера, переиспользован как есть - JS уже общий, слушает [data-room-slideshow]
   и на этой странице другого экземпляра нет, конфликтов не будет). --- */
.about-gallery {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 3rem var(--container-padding) 5rem;
}
.room-slideshow.about-gallery-slideshow {
    width: 100%;
    aspect-ratio: 16/9;
}
@media (max-width: 640px) {
    .room-slideshow.about-gallery-slideshow { aspect-ratio: 4/3; }
}

@media (max-width: 700px) {
    .about-plain-header { padding-top: calc(var(--header-height) + 2rem); }
}