/* Cabañas pages (/cabanas and /cabanas/<slug>) — page layout only. Every color, size, radius and shadow comes from
   the Refugio Azul Santa Rosa design system (tokens.css + components.css).
   The ri- rules are copied from inicio.css (shared chrome: skip link, menu, sections, cards, facts, footer);
   rc- rules are this page's own. */

.ri-page { position: relative; min-height: 100%; font-family: var(--font-body); color: var(--ink); background: var(--cream-50); }
.ra-icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.ri-skip { position: absolute; left: var(--space-4); top: -80px; z-index: 100; display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--paper); color: var(--ink); font-weight: 600; }
.ri-skip:focus { top: var(--space-2); }

/* ---------- menu bar on the hero ---------- */
.ri-lang-pair { display: none; }
.ri-menu-panel { position: relative; z-index: 3; margin: var(--space-3) var(--space-3) 0; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); background: var(--forest-900); }
.ri-menu-panel ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ri-menu-panel a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--forest-950); color: var(--on-forest); font-size: 18px; line-height: 28px; font-weight: 600; text-decoration: none; }
.ri-menu-panel li:last-child a { border-bottom: 0; }
@media (min-width: 768px) {
  .ri-lang-pair { display: inline-flex; }
  .ri-lang-one { display: none; }
  .ri-menu-panel { margin: var(--space-4) var(--gutter-desktop) 0; }
}
@media (min-width: 1200px) { .ri-menu-btn, .ri-menu-panel { display: none; } }

/* ---------- sections ---------- */
.ri-inner { max-width: calc(var(--content-max) + 2 * var(--gutter-mobile)); margin: 0 auto; padding-left: var(--gutter-mobile); padding-right: var(--gutter-mobile); }
.ri-section { padding-top: var(--space-8); }
.ri-section > .ri-inner { padding-bottom: var(--space-8); }
.ri-section--alt { background: var(--cream-200); }
.ri-head .ra-stagger { margin: 0; }
.ri-head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.ri-head p { margin: 0; max-width: 40em; font-size: 18px; line-height: 28px; }
@media (min-width: 768px) {
  .ri-inner { max-width: calc(var(--content-max) + 2 * var(--gutter-desktop)); padding-left: var(--gutter-desktop); padding-right: var(--gutter-desktop); }
  .ri-section { padding-top: var(--space-16); }
  .ri-section > .ri-inner { padding-bottom: var(--space-16); }
}

/* ---------- hero (rounded panel, same spacing as Inicio) ---------- */
.rc-hero .ra-hero__content { max-width: calc(var(--content-max) + 2 * var(--gutter-desktop)); padding-top: var(--space-12); }
.rc-hero .ra-eyebrow { color: var(--on-forest); }

/* ---------- search / filters (copied from Inicio) ---------- */
.ri-search-wrap { position: relative; z-index: 2; max-width: calc(var(--content-max) + 2 * var(--gutter-mobile)); margin: 0 auto; padding: var(--space-6) var(--gutter-mobile) 0; }
.ri-search-wrap .ra-search { max-width: none; }
.rc-search-wrap { padding-top: var(--space-6); }
.rc-pets { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); font-weight: 600; cursor: pointer; }
.rc-pets input { width: 24px; height: 24px; margin: 0; accent-color: var(--purple); }
@media (min-width: 768px) { .rc-search-wrap .ra-search { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } .rc-search-wrap .ra-search > [type="submit"] { grid-column: 1 / -1; } }
@media (min-width: 1200px) { .rc-search-wrap .ra-search { grid-template-columns: 1fr 1fr auto auto auto; } .rc-search-wrap .ra-search > [type="submit"] { grid-column: auto; } }

/* ---------- cabin cards ---------- */
.ri-cabins { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8) var(--space-6); padding: var(--space-2) var(--space-2) 0; }
.ri-cabins .ra-cabin { max-width: none; }
.ri-cabins .ra-cabin__body { flex: 1; }
.ri-cabins .ra-cabin__body .ra-btn { margin-top: auto; }
.ri-badges { position: absolute; top: var(--space-3); left: var(--space-3); right: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ri-badges .ra-badge { position: static; box-shadow: var(--shadow-card); }
.ri-price p { margin: 0; }
.ri-price__note { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.ri-pending { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--cream-200); }
@media (min-width: 768px) { .ri-cabins { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ri-cabins { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.rc-avail { margin: 0; font-weight: 600; }
.rc-avail--ok { color: var(--success-ink); }
.rc-avail--no { color: var(--danger-ink); }
.rc-results-note { margin: 0 0 var(--space-6); color: var(--ink-muted); }

/* ---------- useful facts ---------- */
.ri-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin: 0; }
.ri-fact { padding: var(--space-4); border-radius: var(--radius-md); background: var(--paper); box-shadow: var(--shadow-card); }
.ri-fact { transition: transform .25s ease, box-shadow .25s ease; }
.ri-fact:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .ri-fact { transition: none; } .ri-fact:hover { transform: none; } }
.ri-fact dt { font: 600 14px/20px var(--font-body); letter-spacing: .01em; color: var(--ink-muted); }
.ri-fact dd { margin: var(--space-1) 0 0; font: 400 16px/24px var(--font-body); color: var(--ink); }
.ri-fact dd.ri-fact__big { font: 700 20px/28px var(--font-body); }
@media (min-width: 768px) { .ri-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ri-facts { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------- cabin page sections ---------- */
.rc-text { max-width: 40em; margin: 0; font-size: 18px; line-height: 28px; white-space: pre-line; }
.rc-list { margin: 0; padding: 0 0 0 var(--space-6); font-size: 18px; line-height: 28px; }
.rc-list li + li { margin-top: var(--space-2); }
.rc-note { max-width: 40em; margin: var(--space-4) 0 0; color: var(--ink-muted); }
.rc-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
@media (min-width: 1200px) { .rc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); } }
.rc-times { margin-top: var(--space-4); }
@media (min-width: 1200px) { .ri-facts.rc-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rc-gallery { overflow-x: clip; } /* tilted photo corners must not widen the page on phones */
.rc-gallery .ra-tilt-row { padding: var(--space-4) 0; gap: var(--space-6) var(--space-4); }
.rc-gallery .ra-tilt { width: 152px; }
.rc-gallery .ra-tilt img { height: auto; } /* keep the design's 4:3 crop; the width/height attributes are only there to reserve space */
@media (min-width: 768px) { .rc-gallery .ra-tilt { width: 220px; } }
@media (min-width: 1200px) { .rc-gallery .ra-tilt { width: 260px; } }
.rc-photo-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius-sm); }
.rc-photo-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.rc-gallery__all { display: flex; justify-content: center; margin-top: var(--space-6); }
.rc-map { max-width: 560px; }

/* ---------- availability + price ---------- */
.rc-book { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
@media (min-width: 1200px) { .rc-book { grid-template-columns: minmax(0, 400px) minmax(0, 400px); gap: var(--space-12); } }
.rc-book .ra-cal, .rc-book .ra-price { max-width: none; }
.rc-panel { display: flex; flex-direction: column; gap: var(--space-4); }
.rc-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); }
.rc-row__label { font-weight: 600; }
.rc-dates { margin: 0; font-weight: 600; }
.rc-msg { margin: 0; color: var(--ink-muted); }
.rc-msg--bad { color: var(--danger-ink); font-weight: 600; }
.rc-flags { margin: 0; padding: 0; list-style: none; color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.ra-day.rc-day--past, .ra-day.rc-day--past:hover { background: transparent; color: var(--ink-muted); opacity: .5; cursor: not-allowed; }
.rc-clear { align-self: flex-start; }

/* ---------- photo viewer (Q2: not in the design system; tokens only) ---------- */
.rc-viewer { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--forest-950); color: var(--on-forest); }
.rc-viewer::backdrop { background: var(--forest-950); }
.rc-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.rc-viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--gutter-mobile); }
.rc-viewer__count { font-weight: 600; }
.rc-viewer__stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 var(--space-2); }
.rc-viewer__stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-sm); }
.rc-viewer__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.rc-viewer__nav--prev { left: var(--space-2); }
.rc-viewer__nav--next { right: var(--space-2); }
.rc-viewer__nav, .rc-viewer__close { background: var(--forest-900); }
.rc-viewer__caption { margin: 0; padding: var(--space-3) var(--gutter-mobile) var(--space-6); text-align: center; color: var(--on-forest-muted); }
@media (min-width: 768px) { .rc-viewer__bar, .rc-viewer__caption { padding-left: var(--gutter-desktop); padding-right: var(--gutter-desktop); } }

/* ---------- date picker (search bar) ---------- */
.rc-picker { width: min(440px, calc(100vw - 2 * var(--gutter-mobile))); padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; }
.rc-picker::backdrop { background: var(--scrim); }
.rc-picker .ra-cal { max-width: none; }
.rc-picker__actions { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }

/* ---------- 404: no sections, a cream gap then the torn edge into the footer ---------- */
.rc-end { padding-top: var(--space-8); }
@media (min-width: 768px) { .rc-end { padding-top: var(--space-16); } }

/* ---------- footer ---------- */
.ri-footer { padding-bottom: calc(var(--space-8) + 72px); }
.ri-footer address { font-style: normal; }
.ri-footer .ra-footer__logo { width: 176px; height: 176px; }
@media (min-width: 768px) { .ri-footer .ra-footer__grid { grid-template-columns: 224px repeat(2, minmax(0, 1fr)); } .ri-footer .ra-footer__logo { width: 224px; height: 224px; } }