/* Hallmark · macrostructure: Resort Editorial · tone: quiet luxury · anchor hue: property accent · pre-emit critique: P5 H5 E5 S5 R5 V5 · contrast: pass (46–50) · mobile: pass (36, 59, 61–69) */
/* Shared Via Destination resort refinements — v2026.09.07.4 */

:root {
  --resort-surface: var(--arctic-white);
  --resort-surface-soft: var(--pearl);
  --resort-ink: var(--ink);
  --resort-muted: var(--muted);
  --resort-accent: var(--accent);
  --resort-ease-out: var(--ease);
  --resort-rule: color-mix(in srgb, var(--accent) 24%, transparent);
  --resort-rule-soft: color-mix(in srgb, var(--navy) 10%, transparent);
  --resort-shadow: 0 20px 60px color-mix(in srgb, var(--navy-deep) 12%, transparent);
  --resort-radius: 8px;
}

html,
body { overflow-x: clip; }

.section-h2,
.final-cta-h2,
.hotel-hero-title { overflow-wrap: anywhere; }

/* General content rhythm shared by every property page. */
.breadcrumb { background: color-mix(in srgb, var(--resort-surface) 92%, var(--resort-surface-soft)); }
.breadcrumb-inner { min-width: 0; }
.dining-item,
.ideal-card,
.why-card,
.suite-card {
  border-radius: var(--resort-radius);
}

.dining-item {
  border: 1px solid transparent;
  transition: transform 360ms var(--resort-ease-out), border-color 360ms var(--resort-ease-out), box-shadow 360ms var(--resort-ease-out);
}

.dining-item:hover {
  transform: translateY(-4px);
  border-color: var(--resort-rule);
  box-shadow: var(--resort-shadow);
}

.why-card {
  transition: background-color 360ms var(--resort-ease-out), border-color 360ms var(--resort-ease-out), transform 360ms var(--resort-ease-out);
}

.why-card:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-top-color: var(--resort-accent);
  transform: translateY(-3px);
}

.suite-card { isolation: isolate; }
.suite-card:hover .suite-card-bg { transform: scale(1.025); }

/* FAQ: editorial cards with clear hierarchy, controlled expansion, and keyboard focus. */
.faq-list {
  width: min(100%, 900px);
  max-width: none;
  display: grid;
  gap: 12px;
  counter-reset: resort-faq;
}

.faq-item {
  position: relative;
  overflow: clip;
  border: 1px solid var(--resort-rule-soft);
  border-radius: var(--resort-radius);
  background: var(--resort-surface);
  box-shadow: 0 8px 26px color-mix(in srgb, var(--navy-deep) 5%, transparent);
  transition: border-color 360ms var(--resort-ease-out), box-shadow 360ms var(--resort-ease-out), background-color 360ms var(--resort-ease-out);
  counter-increment: resort-faq;
}

.faq-item::before {
  content: counter(resort-faq, decimal-leading-zero);
  position: absolute;
  top: 23px;
  left: 24px;
  color: color-mix(in srgb, var(--resort-accent) 72%, var(--resort-muted));
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .18em;
  pointer-events: none;
}

.faq-item:hover,
.faq-item:focus-within,
.faq-item.is-open {
  border-color: var(--resort-rule);
  box-shadow: var(--resort-shadow);
}

.faq-item.is-open { background: color-mix(in srgb, var(--resort-surface) 94%, var(--resort-surface-soft)); }

.faq-question {
  min-height: 76px;
  width: 100%;
  padding: 19px 76px 19px 62px;
  color: var(--resort-ink);
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  transition: color 240ms var(--resort-ease-out), background-color 240ms var(--resort-ease-out);
}

.faq-question:hover,
.faq-item.is-open .faq-question { color: var(--resort-accent); }
.faq-question:active { background: color-mix(in srgb, var(--resort-accent) 5%, var(--resort-surface)); }

.faq-question:focus-visible,
.footer-links a:focus-visible,
.footer-social:focus-visible {
  outline: 3px solid var(--resort-accent);
  outline-offset: 3px;
}

.faq-icon {
  position: absolute;
  right: 21px;
  top: 50%;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--resort-rule);
  border-radius: 50%;
  color: transparent;
  transform: translateY(-50%);
  transition: background-color 320ms var(--resort-ease-out), border-color 320ms var(--resort-ease-out), transform 320ms var(--resort-ease-out);
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 1px;
  background: var(--resort-accent);
  transition: transform 320ms var(--resort-ease-out), background-color 320ms var(--resort-ease-out);
}

.faq-icon::after { transform: rotate(90deg); }
.faq-item.is-open .faq-icon { transform: translateY(-50%) !important; background: var(--resort-accent); border-color: var(--resort-accent); }
.faq-item.is-open .faq-icon::before,
.faq-item.is-open .faq-icon::after { background: var(--navy-deep); }
.faq-item.is-open .faq-icon::after { transform: rotate(0); }

.faq-answer { max-height: 0; transition: max-height 520ms var(--resort-ease-out); }
.faq-item.is-open .faq-answer { max-height: 42rem; }
.faq-answer-inner {
  padding: 0 76px 25px 62px;
  color: var(--resort-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.85;
}

/* Footer: a quieter, property-accented close to each resort story. */
#footer {
  position: relative;
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 30%),
    radial-gradient(circle at 88% 78%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 32%),
    var(--navy-deep);
  border-top-color: var(--resort-rule);
}

#footer::before {
  content: '';
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  opacity: .7;
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 54%);
  animation: resort-footer-glow 18s var(--resort-ease-out) infinite alternate;
  pointer-events: none;
}

@keyframes resort-footer-glow {
  from { transform: translate3d(-4%, 2%, 0) scale(.96); opacity: .45; }
  to { transform: translate3d(5%, -4%, 0) scale(1.06); opacity: .9; }
}

.footer-grid { position: relative; gap: clamp(36px, 5vw, 76px); }
.footer-logo-img { filter: drop-shadow(0 8px 26px color-mix(in srgb, var(--accent) 22%, transparent)); }
.footer-about { max-width: 39ch; color: color-mix(in srgb, var(--arctic-white) 76%, transparent); }
.footer-col-title { display: flex; align-items: center; gap: 12px; }
.footer-col-title::after { content: ''; width: 32px; height: 1px; background: var(--resort-accent); opacity: .7; }
.footer-links { gap: 12px; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  width: fit-content;
  color: color-mix(in srgb, var(--arctic-white) 72%, transparent);
  transition: color 220ms var(--resort-ease-out), transform 220ms var(--resort-ease-out);
}
.footer-links a:hover { color: var(--arctic-white); transform: translateX(4px); }
.footer-links a:active { transform: translateX(1px); }
.footer-social {
  width: 34px;
  height: 34px;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--arctic-white) 18%, transparent);
  border-radius: 50%;
  transition: color 220ms var(--resort-ease-out), background-color 220ms var(--resort-ease-out), border-color 220ms var(--resort-ease-out), transform 220ms var(--resort-ease-out);
}
.footer-social:hover {
  color: var(--arctic-white);
  background: var(--resort-accent);
  border-color: var(--resort-accent);
  transform: translateY(-2px);
}
.footer-social:active { transform: translateY(0); }
.footer-bottom { position: relative; margin-top: clamp(42px, 6vw, 64px); }

@media (max-width: 700px) {
  .dining-item:hover,
  .why-card:hover,
  .footer-links a:hover,
  .footer-social:hover { transform: none; }
  .faq-list { gap: 10px; }
  .faq-item::before { top: 19px; left: 17px; }
  .faq-question { min-height: 70px; padding: 16px 58px 16px 48px; }
  .faq-icon { right: 14px; width: 30px; height: 30px; }
  .faq-answer-inner { padding: 0 20px 21px 48px; font-size: 13px; }
  .footer-links--two-col { gap: 10px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  #footer::before { animation: none; }
  .dining-item,
  .why-card,
  .suite-card-bg,
  .faq-item,
  .faq-question,
  .faq-icon,
  .faq-icon::before,
  .faq-icon::after,
  .faq-answer,
  .footer-links a,
  .footer-social { transition-duration: .01ms !important; }
}