/* =========================================================
   GET SALTY — page sections
   ========================================================= */

/* ---------- HOME ---------- */
.hero { background: var(--bg-accent); color: var(--text-inverse); min-height: 100vh; display: flex; align-items: center; padding: calc(var(--nav-height) + var(--space-xl)) 0 var(--space-hero) }
main > .hero:first-child { padding-top: calc(var(--nav-height) + var(--space-xl)) }
.hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center }
.hero__heading { margin-bottom: .3em }
.hero__line { white-space: nowrap }
.hero__home { color: var(--color-yellow) }
.hero__tagline { color: #fff2e0cc; max-width: 480px; margin-bottom: var(--space-lg) }
.hero__ctas { display: flex; gap: var(--space-sm); flex-wrap: wrap }
.hero__visual { display: flex; justify-content: center }
.hero__mascot { max-width: 400px; width: 100%; height: auto; border-radius: var(--radius-card) }
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center }
.preview-grid--reverse .preview-grid__content { order: -1 }
.preview-grid__ctas { display: flex; gap: var(--space-sm); flex-wrap: wrap }
.card-row { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-md) }
.card-row__item { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); overflow: hidden; background: var(--bg-primary) }
.card-row__item .img-placeholder, .card-row__item .img-slot { border-radius: 0 }
.card-row__item h4, .card-row__item p { padding: 0 var(--space-sm) }
.card-row__item h4 { padding-top: var(--space-sm) }
.card-row__item p:last-child { padding-bottom: var(--space-sm) }
.crew-preview { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-lg); max-width: 800px; margin: 0 auto; text-align: center }
.crew-preview__card { display: flex; flex-direction: column; align-items: center; gap: .75rem }
.crew-avatar { width: 160px; height: 160px; border-radius: 50% }
.crew-avatar-wrap { width: 160px; height: 160px; border-radius: 50%; overflow: hidden }
.crew-avatar-img { width: 100%; height: 100%; object-fit: cover }
.insta-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: var(--space-xs) }
.insta-grid .insta-grid__item { aspect-ratio: 3/4; overflow: hidden; border-radius: var(--radius-card); display: block }
.insta-grid .insta-grid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease }
.insta-grid .insta-grid__item:hover img { transform: scale(1.05) }
@media (max-width: 991px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center }
  .hero__tagline { margin-left: auto; margin-right: auto }
  .hero__ctas { justify-content: center }
  .hero__visual { order: -1 }
  .hero__mascot { max-width: 280px }
}
@media (max-width: 767px) {
  .preview-grid { grid-template-columns: 1fr }
  .preview-grid--reverse .preview-grid__content { order: 0 }
  .card-row { grid-template-columns: 1fr }
  .crew-preview { grid-template-columns: 1fr; gap: var(--space-md) }
  .insta-grid { grid-template-columns: repeat(3,1fr) }
}
@media (max-width: 479px) { .insta-grid { grid-template-columns: repeat(2,1fr) } }

/* ---------- GUESTHOUSE ---------- */
.floor-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: var(--space-xl) }
.floor-pill { font-family: var(--font-body); font-size: .95rem; padding: .5em 1.25em; border-radius: var(--radius-round); border: none; cursor: pointer; transition: background .2s ease, color .2s ease; background: var(--bg-secondary); color: var(--text-primary) }
.floor-pill.active { background: var(--bg-accent); color: var(--text-on-purple) }
.floor-panel { display: none }
.floor-panel.active { display: grid; grid-template-columns: 2fr 1fr; align-items: center; gap: 0 }
.floor-plan__layers { position: relative; display: inline-block; width: 100% }
.floor-plan__coloured { position: relative; display: block; width: 100%; height: auto }
.floor-plan__blank { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; cursor: crosshair; opacity: 1; transition: opacity .2s ease }
.floor-plan__layers.room-active .floor-plan__blank { opacity: 0 }
.floor-plan__placeholder { width: 100%; aspect-ratio: 4/3; background: transparent; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--border-medium); border-radius: var(--radius-xl) }
.floor-plan__placeholder span { font-family: var(--font-body); font-size: .875rem; color: var(--text-secondary); letter-spacing: .05em }
.floor-plan__info { padding-left: 2rem }
.floor-plan__rooms { margin-top: var(--space-md) }
.floor-plan__rooms ul { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem }
.floor-plan__rooms li { background: var(--bg-secondary); padding: .4em .8em; border-radius: var(--radius-lg); font-size: .92rem }
@media (max-width: 767px) {
  .floor-panel.active { grid-template-columns: 1fr }
  .floor-plan__info { padding-left: 0; padding-top: var(--space-lg) }
}

/* ---------- EXPERIENCES ---------- */
.camp__heading { color: var(--text-inverse); margin-bottom: .3em }
.camp__sub { color: #fff2e0b3; font-size: 1.13rem; margin-bottom: var(--space-xl) }
.camp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start }
.camp__list { display: flex; flex-direction: column; gap: .6rem }
.camp__list li { position: relative; padding-left: 1.25rem; color: #fff2e0d9; line-height: 1.5 }
.camp__list li:before { content: "—"; position: absolute; left: 0; color: var(--color-yellow) }
.camp__price { display: flex; flex-direction: column; gap: var(--space-md) }
.camp__price-block { display: flex; flex-direction: column; gap: .25rem }
.camp__price-label { font-size: .92rem; color: #fff2e099; text-transform: uppercase; letter-spacing: .05em }
.camp__price-amount { font-family: var(--font-heading); font-weight: 400; font-size: 2.83rem; line-height: 1.1; color: var(--color-yellow) }
.camp__price-amount span { font-size: 1.2rem; opacity: .7 }
.pkg-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-md); margin-bottom: var(--space-md) }
.pkg-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column }
.pkg-card .img-placeholder, .pkg-card .img-slot { border-radius: 0 }
.pkg-card__header { padding: var(--space-md) var(--space-md) 0; margin-bottom: var(--space-xs) }
.pkg-card__header h3 { margin-bottom: .25em }
.pkg-card__subtitle { font-size: .92rem; color: var(--text-secondary) }
.pkg-card__list { display: flex; flex-direction: column; gap: .5rem; flex: 1; padding: 0 var(--space-md); margin-bottom: var(--space-sm) }
.pkg-card__list li { position: relative; padding-left: 1.25rem; font-size: .92rem; line-height: 1.5 }
.pkg-card__list li:before { content: "—"; position: absolute; left: 0; color: var(--color-purple) }
.pkg-card .btn { align-self: flex-start; margin: 0 var(--space-md) var(--space-md); margin-top: auto }
.pkg-feature { display: grid; grid-template-columns: 1fr 2fr; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); overflow: hidden; background: var(--bg-secondary) }
.pkg-feature__content { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm) }
.pkg-feature__content .pkg-card__list { padding: 0 }
.pkg-feature__content .btn { align-self: flex-start; margin-top: auto }
.pkg-feature__header h3 { margin-bottom: .25em }
.pkg-feature__image { min-height: 0 }
.pkg-feature__image .img-placeholder, .pkg-feature__image .img-slot { height: 100%; border-radius: 0 }
.extras-grid { display: flex; flex-wrap: wrap; gap: .75rem }
.extra-pill { background: #fff2e0b3; color: var(--color-purple); border-left: 3px solid var(--color-purple); padding: .5em 1.2em .5em 1em; border-radius: var(--radius-round); font-size: .92rem; font-family: var(--font-body) }
.bespoke { text-align: center; max-width: var(--container-sm); margin: 0 auto }
.bespoke p { margin-bottom: var(--space-md) }
@media (max-width: 991px) { .pkg-feature { grid-template-columns: 1fr 1fr } }
@media (max-width: 767px) {
  .camp__grid, .pkg-grid, .pkg-feature { grid-template-columns: 1fr }
  .pkg-feature__image { order: -1 }
  .pkg-feature__image .img-placeholder, .pkg-feature__image .img-slot { aspect-ratio: 3/2 !important }
}

/* ---------- ART ---------- */
.toggle-wrap { display: flex; justify-content: center; margin-bottom: var(--space-xl) }
.toggle-pill { position: relative; display: inline-flex; background: var(--bg-secondary); border-radius: var(--radius-round); padding: 4px }
.toggle-pill__btn { position: relative; z-index: 1; background: none; border: none; font-family: var(--font-body); font-size: .95rem; padding: .5em 1.5em; cursor: pointer; color: var(--text-primary); border-radius: var(--radius-round); transition: background .2s ease, color .2s ease; white-space: nowrap }
.toggle-pill__btn--active { background: var(--bg-accent); color: var(--text-on-purple) }
.art-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-sm) }
.art-grid__item { overflow: hidden; border-radius: var(--radius-card) }
.art-grid__item .img-placeholder, .art-grid__item .img-slot { border-radius: 0 }
.art-caption { display: flex; justify-content: space-between; align-items: center; padding: .5rem 1rem; font-size: .8rem; color: var(--text-secondary) }
.art-caption__name { font-weight: 600 }
.art-caption__insta { display: flex; align-items: center; gap: .3em; color: var(--color-purple); text-decoration: none; transition: color .2s ease }
.art-caption__insta:hover { color: var(--color-purple-hover) }
.art-caption__tag { color: var(--color-purple); font-weight: 600; letter-spacing: .03em }
.art-ctas { display: flex; gap: var(--space-sm); margin-top: var(--space-lg); flex-wrap: wrap }
@media (max-width: 767px) { .art-grid { grid-template-columns: repeat(2,1fr) } }
@media (max-width: 479px) { .art-grid { grid-template-columns: 1fr } }

/* ---------- VISION ---------- */
.page-vision main > .section--dark:first-child { padding-top: calc(var(--section-padding) + var(--nav-height)) }
.pull-quote { font-family: var(--font-heading); font-weight: 400; font-size: 2rem; line-height: 1.3em; color: var(--color-rust); border: none; border-left: 4px solid var(--color-rust); padding: 0 0 0 var(--space-md); margin: 0; text-align: left }
@media (max-width: 767px) { .pull-quote { font-size: 1.5rem } }

/* ---------- CREW ---------- */
.crew-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .75rem }
.crew-card__avatar-wrap { width: 180px; height: 180px; border-radius: 50%; overflow: hidden }
.crew-card__avatar { width: 100%; height: 100%; object-fit: cover; display: block }
.crew-card__avatar-placeholder { width: 100%; height: 100%; border-radius: 0 }
.crew-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-xl) var(--space-lg) }
@media (max-width: 991px) { .crew-grid { grid-template-columns: repeat(2,1fr) } }
@media (max-width: 479px) { .crew-grid { grid-template-columns: 1fr } }

/* ---------- SUPPORT ---------- */
.volunteer-grid { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-xl); align-items: stretch }
.volunteer-content { display: flex; flex-direction: column; gap: .75rem }
.volunteer-intro { max-width: 28em }
.volunteer-exchange { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md) }
.volunteer-exchange__label { font-family: var(--font-body); font-size: .92rem; font-weight: 600; margin-bottom: .5em; text-transform: uppercase; letter-spacing: .03em; color: var(--color-purple) }
.volunteer-details { display: flex; flex-direction: column; gap: .4rem; margin-bottom: var(--space-xs) }
.volunteer-details li { position: relative; padding-left: 1.25rem; font-size: .92rem; color: var(--text-secondary); line-height: 1.5 }
.volunteer-details li:before { content: "—"; position: absolute; left: 0; color: var(--color-purple) }
.volunteer-image { display: flex }
.volunteer-image .img-placeholder, .volunteer-image .img-slot { flex: 1; border-radius: var(--radius-card) }
.support-options { display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr; gap: var(--space-lg); align-items: start }
.support-divider { background: var(--border-medium); align-self: stretch }
.support-option { display: flex; flex-direction: column; gap: .5rem }
.support-option__title { font-family: var(--font-body); font-size: 1.18rem; font-weight: 600; margin-bottom: .25em }
.support-option .btn { align-self: flex-start; margin-top: auto }
@media (max-width: 767px) {
  .volunteer-grid { grid-template-columns: 1fr }
  .volunteer-image { order: -1 }
  .volunteer-image .img-placeholder, .volunteer-image .img-slot { aspect-ratio: 16/9 !important }
  .support-options { grid-template-columns: 1fr }
  .support-divider { height: 1px; width: 100% }
}

/* ---------- BOOK ---------- */
.room-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-items: start }
.room-card__eyebrow { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-secondary); padding-bottom: .25rem }
.room-card__name { font-size: 1.6rem; text-transform: uppercase; padding-bottom: .25rem }
.room-card__desc { color: var(--text-secondary); padding-bottom: 1rem }
.room-card__image { width: 100%; aspect-ratio: 4/3; padding-bottom: 1.25rem; align-self: end }
.room-card__img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-card); display: block }
.room-card__image .img-placeholder { height: 100%; aspect-ratio: unset }
.room-card__btn { justify-self: start }
.room-grid { display: grid; grid-template-columns: repeat(3,1fr); column-gap: var(--space-lg); row-gap: var(--space-xl); margin-bottom: var(--space-hero) }
.book-bottom { text-align: center; max-width: var(--container-sm); margin: 0 auto }
.book-bottom p { margin-bottom: var(--space-md) }
@media (max-width: 991px) { .room-card__name { font-size: 1.4rem } .room-grid { grid-template-columns: repeat(2,1fr) } }
@media (max-width: 479px) { .room-card__name { font-size: 1.5rem } .room-grid { grid-template-columns: 1fr } }

/* ---------- 404 ---------- */
.notfound { min-height: 80vh; display: flex; align-items: center; text-align: center }
.notfound img { max-width: 220px; margin: 0 auto var(--space-md) }

/* Residency image fills its column without stretching the card */
.pkg-feature__image { position: relative; min-height: 320px }
.pkg-feature__image .img-slot { position: absolute; inset: 0; height: 100% !important }
@media (max-width: 767px) { .pkg-feature__image { min-height: 0; aspect-ratio: 3/2 } }