/* Cloud 9 Gozo — homepage composition. Uses tokens and components from c9-system.css. */

/* ---------- Hero: editorial opener ---------- */
.c9-hero { padding-top: clamp(28px, 4vw, 64px); padding-bottom: clamp(36px, 4.5vw, 64px); }
.c9-hero__head { display: grid; gap: 16px; margin-bottom: clamp(24px, 3vw, 40px); }
.c9-hero__place { margin-bottom: 4px; }
.c9-hero__title { max-width: 14ch; }
.c9-hero__lead { max-width: 44ch; }
.c9-hero__avail { max-width: 920px; }

@media (min-width: 1025px) {
  .c9-hero__head { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; column-gap: 64px; }
  .c9-hero__place { grid-column: 1 / -1; }
  .c9-hero__lead { padding-bottom: 10px; }
}

/* ---------- At a glance ---------- */
.c9-glance__grid { display: grid; gap: 40px; }
.c9-glance__intro { display: grid; align-content: start; justify-items: start; gap: 20px; }
.c9-glance__text { max-width: 52ch; color: var(--c9-ink-muted); }
@media (min-width: 1025px) {
  .c9-glance__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
}

.c9-plan { padding: clamp(24px, 3vw, 36px); border: 1px solid var(--c9-line); border-radius: var(--c9-radius-panel); background: var(--c9-white); }
.c9-plan__title { margin-bottom: 24px; font-size: var(--c9-fs-label); font-weight: 700; letter-spacing: .02em; color: var(--c9-ink); }
.c9-plan__floors { display: grid; gap: 24px; }
.c9-plan__floor { display: grid; align-content: start; gap: 14px; }
.c9-plan__level { padding-bottom: 10px; border-bottom: 1px solid var(--c9-line); font-family: var(--c9-font-display); font-size: 1.25rem; color: var(--c9-aegean-700); }
.c9-plan__level span { font-family: var(--c9-font-body); font-size: var(--c9-fs-caption); color: var(--c9-ink-muted); }
.c9-plan__floor ul { display: grid; gap: 12px; }
.c9-plan__floor li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--c9-fs-small); font-weight: 500; line-height: 1.35; }
.c9-plan__floor li .c9-icon { margin-top: -1px; color: var(--c9-aegean-600); }
.c9-plan__floor li span { display: grid; }
.c9-plan__floor small { font-size: var(--c9-fs-caption); font-weight: 400; color: var(--c9-ink-muted); }
.c9-plan__note { display: flex; align-items: flex-start; gap: 12px; margin-top: 24px; padding: 14px 16px; border-radius: var(--c9-radius-field); background: var(--c9-aegean-50); font-size: var(--c9-fs-small); line-height: 1.5; }
.c9-plan__note .c9-icon { margin-top: 1px; color: var(--c9-aegean-600); }
@media (min-width: 640px) { .c9-plan__floors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.c9-amenities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--c9-line); }
.c9-amenities li { display: flex; align-items: center; gap: 12px; padding: 18px 8px 18px 0; border-bottom: 1px solid var(--c9-line); font-size: var(--c9-fs-small); font-weight: 500; line-height: 1.35; }
.c9-amenities .c9-icon { color: var(--c9-aegean-600); }
@media (min-width: 768px) { .c9-amenities { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1025px) {
  .c9-amenities { grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: 1px solid var(--c9-line); }
  .c9-amenities li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px 16px 24px 0; border-bottom: 0; }
  .c9-amenities li + li { padding-left: 16px; border-left: 1px solid var(--c9-line); }
}

/* ---------- Inside: room-by-room gallery, directly below the hero ---------- */
.c9-inside { padding-block: clamp(40px, 5vw, 72px); }
.c9-inside .c9-sechead { align-items: end; }
.c9-inside .c9-sechead__actions { display: flex; align-items: center; gap: 8px; }
.c9-inside__nav { display: none; }
@media (min-width: 1025px) { .c9-inside__nav { display: inline-grid; } }
.c9-rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.c9-rail::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) { .c9-rail { cursor: grab; } }
.c9-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.c9-rail.is-dragging .c9-room { pointer-events: none; }
.c9-rail__track {
  --c9-room-w: min(78vw, 340px); --c9-room-gap: 16px;
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--c9-room-w); gap: var(--c9-room-gap);
  /* align first card with the wide container edge, keep a trailing gutter */
  padding-inline: max(var(--c9-gutter), calc((100vw - var(--c9-container-wide)) / 2));
  width: max-content;
}
.c9-rail__track li { scroll-snap-align: start; scroll-margin-inline: max(var(--c9-gutter), calc((100vw - var(--c9-container-wide)) / 2)); }
@media (min-width: 768px) { .c9-rail__track { --c9-room-w: 300px; --c9-room-gap: 20px; } }
@media (min-width: 1025px) { .c9-rail__track { --c9-room-w: 312px; --c9-room-gap: 24px; } }
.c9-room { display: grid; gap: 6px; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: zoom-in; }
/* Every card shares one photo height; the house front opens the gallery at 1.5x width, a 1.2:1 frame
   that matches the photo, so the whole house shows */
.c9-room__img { display: block; height: calc(var(--c9-room-w) * 1.25); margin-bottom: 10px; }
.c9-rail__feature .c9-room__img img { object-position: 62% 50%; }
@media (min-width: 768px) {
  .c9-rail__track { grid-template-columns: calc(var(--c9-room-w) * 1.5); }
  .c9-rail__feature .c9-room__img img { object-position: 50% 50%; }
}
.c9-room__name { font-family: var(--c9-font-display); font-size: 1.375rem; line-height: 1.2; color: var(--c9-aegean-700); }
.c9-room__meta { font-size: var(--c9-fs-small); line-height: 1.45; color: var(--c9-ink-muted); }
.c9-room:focus-visible { outline-offset: 6px; border-radius: var(--c9-radius-card); }

/* ---------- Reviews ---------- */
.c9-reviews__grid { display: grid; gap: 40px; }
.c9-reviews__side { display: grid; align-content: start; gap: 24px; }
.c9-reviews__scores { display: grid; gap: 16px; }
@media (min-width: 640px) and (max-width: 1024px) { .c9-reviews__scores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) {
  .c9-reviews__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 96px; }
  .c9-reviews__side { position: sticky; top: calc(var(--c9-header-h) + 32px); }
}
.c9-reviews__list { display: grid; }
.c9-reviews__list .c9-review__text { font-family: var(--c9-font-display); font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); line-height: 1.4; color: var(--c9-ink); }
.c9-reviews__more { display: flex; flex-wrap: wrap; gap: 12px 28px; padding-top: 28px; border-top: 1px solid var(--c9-line); }

/* ---------- Where (dark) ---------- */
.c9-where__grid { display: grid; gap: 40px; align-items: center; }
.c9-where__text { display: grid; gap: 20px; justify-items: start; }
.c9-where__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 8px; }
.c9-where .c9-map { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
@media (min-width: 1025px) { .c9-where__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; } }
.c9-where__places { display: grid; gap: 32px; margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid rgba(255, 255, 255, .14); }
.c9-where__places .c9-place__name { color: #fff; }
@media (min-width: 640px) { .c9-where__places { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
/* Mobile: compact rows instead of three tall cards */
@media (max-width: 639px) {
  .c9-where__places { gap: 16px; }
  .c9-where__places .c9-place { grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 4px; align-items: center; }
  .c9-where__places .c9-frame { grid-row: 1 / 3; aspect-ratio: 1; border-radius: 12px; }
  .c9-where__places .c9-place__name { align-self: end; font-size: 1.1875rem; }
  .c9-where__places .c9-place__meta { align-self: start; }
}

/* ---------- Invitation ---------- */
.c9-invite { padding-block: var(--c9-section); }
.c9-invite__frame { position: relative; display: grid; align-items: end; min-height: clamp(460px, 48vw, 620px); overflow: hidden; border-radius: var(--c9-radius-panel); isolation: isolate; }
.c9-invite__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 82%; }
.c9-invite__frame::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15, 31, 38, .05) 0%, rgba(15, 31, 38, .35) 40%, rgba(15, 31, 38, .86) 100%); }
.c9-invite__body { display: grid; gap: 14px; justify-items: start; max-width: 560px; padding: clamp(24px, 4vw, 56px); color: #fff; }
.c9-invite__body .c9-h2 { color: #fff; }
.c9-invite__body p { color: rgba(255, 255, 255, .9); font-size: var(--c9-fs-lead); }
.c9-invite__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
@media (max-width: 767px) {
  .c9-invite .c9-container { padding-inline: 12px; }
  .c9-invite__frame { min-height: 540px; }
  .c9-invite__img { object-position: 40% 50%; }
}
.c9-where__credit { margin-top: 16px; font-size: .75rem; color: var(--c9-on-dark-muted); }
.c9-where__credit a { color: inherit; }