/* Non-critical responsive styles - loaded without blocking render. */

.section { padding: 72px 0; }
.section-muted { background: rgba(0, 0, 0, 0.035); }
.section-title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin: 0 0 36px; text-align: center; color: var(--primary); }
h2 { color: var(--primary); }

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.narrow { max-width: 720px; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.card {
    background: var(--bg);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}

.card h3 { margin-top: 0; color: var(--primary); }
.card img { width: 100%; height: auto; border-radius: 10px; display: block; margin-bottom: 16px; }
.card-icon { font-size: 1.8rem; color: var(--accent); margin-bottom: 10px; }
.card.featured { border-color: var(--accent); border-width: 2px; }
.pricing .price { font-weight: 700; color: var(--secondary); }

.rounded-media { width: 100%; height: auto; border-radius: 16px; display: block; }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }

.amenity-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    list-style: none;
    padding: 0;
}
.amenity-list li {
    background: var(--bg);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 14px 18px;
}

.table-wrap { overflow-x: auto; }
.schedule { width: 100%; border-collapse: collapse; min-width: 480px; }
.schedule th, .schedule td { padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,0.1); text-align: left; }
.schedule th { background: var(--primary); color: #fff; }

details { background: var(--bg); border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; padding: 16px 20px; margin-bottom: 12px; }
summary { cursor: pointer; font-weight: 600; color: var(--primary); }

blockquote.card { margin: 0; }
blockquote cite { display: block; margin-top: 12px; font-style: normal; font-weight: 600; color: var(--secondary); }

.lead-form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; }
.field input, .field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    font: inherit;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.field .error { color: #c0392b; font-size: 0.85rem; min-height: 1em; }
.field.invalid input, .field.invalid textarea { border-color: #c0392b; }
.form-success { color: #1e7e34; font-weight: 600; }

.contact-line { margin: 8px 0; }
.social { margin-top: 14px; display: flex; gap: 16px; }
.map { width: 100%; min-height: 320px; border: 0; border-radius: 14px; }
.note { text-align: center; margin-top: 24px; }

.site-footer { background: var(--primary); color: #fff; padding: 32px 0; text-align: center; }
.site-footer a { color: #fff; }
.preview-note { opacity: 0.8; font-size: 0.85rem; }

@media (max-width: 768px) {
    .two-col { grid-template-columns: 1fr; }
    .section { padding: 52px 0; }
}