@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&display=swap');

/* Ko Kut Ao Phrao Beach Resort — Shared Bento Gallery
   Applies to Homepage, About, Activities, Dining and all 5 room pages.
   Hero sections are intentionally excluded. */

/* ===== Large resort galleries ===== */
body main .view-grid,
body main .auto-gallery-grid,
body main .home-visual-grid {
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  grid-auto-rows:118px!important;
  grid-auto-flow:dense!important;
  gap:16px!important;
  align-items:stretch!important;
}

body main .view-grid > .view-card,
body main .auto-gallery-grid > .auto-gallery-card,
body main .home-visual-grid > .home-visual-card {
  position:relative!important;
  grid-column:span 4!important;
  grid-row:span 2!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:22px!important;
  background:#0b5d50!important;
  box-shadow:0 16px 38px rgba(4,45,39,.14)!important;
  transform:none!important;
  isolation:isolate!important;
}

/* One hero tile + two supporting tiles, then a balanced row. */
body main .view-grid > .view-card:nth-child(6n+1),
body main .auto-gallery-grid > .auto-gallery-card:nth-child(6n+1),
body main .home-visual-grid > .home-visual-card:nth-child(6n+1) {
  grid-column:span 7!important;
  grid-row:span 3!important;
}

body main .view-grid > .view-card:nth-child(6n+2),
body main .auto-gallery-grid > .auto-gallery-card:nth-child(6n+2),
body main .home-visual-grid > .home-visual-card:nth-child(6n+2) {
  grid-column:span 5!important;
  grid-row:span 2!important;
}

body main .view-grid > .view-card:nth-child(6n+3),
body main .auto-gallery-grid > .auto-gallery-card:nth-child(6n+3),
body main .home-visual-grid > .home-visual-card:nth-child(6n+3) {
  grid-column:span 5!important;
  grid-row:span 1!important;
}

body main .view-grid > .view-card:nth-child(6n+4),
body main .view-grid > .view-card:nth-child(6n+5),
body main .view-grid > .view-card:nth-child(6n+6),
body main .auto-gallery-grid > .auto-gallery-card:nth-child(6n+4),
body main .auto-gallery-grid > .auto-gallery-card:nth-child(6n+5),
body main .auto-gallery-grid > .auto-gallery-card:nth-child(6n+6),
body main .home-visual-grid > .home-visual-card:nth-child(6n+4),
body main .home-visual-grid > .home-visual-card:nth-child(6n+5),
body main .home-visual-grid > .home-visual-card:nth-child(6n+6) {
  grid-column:span 4!important;
  grid-row:span 2!important;
}

body main .view-grid > .view-card:before,
body main .view-grid > .view-card:after,
body main .auto-gallery-grid > .auto-gallery-card:before,
body main .auto-gallery-grid > .auto-gallery-card:after,
body main .home-visual-grid > .home-visual-card:before,
body main .home-visual-grid > .home-visual-card:after {
  content:none!important;
  display:none!important;
}

body main .view-grid .visual-frame,
body main .auto-gallery-grid .visual-frame,
body main .home-visual-grid .visual-frame {
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  overflow:hidden!important;
  border-radius:0!important;
  background:#dfeee9!important;
  box-shadow:none!important;
}

body main .view-grid .visual-frame:before,
body main .view-grid .visual-frame:after,
body main .auto-gallery-grid .visual-frame:before,
body main .auto-gallery-grid .visual-frame:after,
body main .home-visual-grid .visual-frame:before,
body main .home-visual-grid .visual-frame:after {
  content:none!important;
  display:none!important;
}

body main .view-grid img,
body main .auto-gallery-grid img,
body main .home-visual-grid img,
body main .activity-gallery > .auto-gallery-card:nth-child(1) img,
body main .food-gallery > .auto-gallery-card:nth-child(1) img,
body main .home-activities .home-visual-card:nth-child(1) img,
body main .home-dining .home-visual-card:nth-child(1) img {
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
  transform:none!important;
  filter:none!important;
  transition:transform .55s cubic-bezier(.2,.7,.25,1),filter .35s ease!important;
}

body main .view-grid > .view-card:hover img,
body main .auto-gallery-grid > .auto-gallery-card:hover img,
body main .home-visual-grid > .home-visual-card:hover img {
  transform:scale(1.045)!important;
  filter:saturate(1.04) contrast(1.015)!important;
}

/* Soft resort-grade image shade improves caption legibility. */
body main .view-grid > .view-card::before,
body main .auto-gallery-grid > .auto-gallery-card::before,
body main .home-visual-grid > .home-visual-card::before {
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,rgba(2,27,23,0) 48%,rgba(2,37,31,.62) 100%)!important;
}

body main .view-grid figcaption,
body main .auto-gallery-grid figcaption,
body main .home-visual-grid figcaption {
  position:absolute!important;
  z-index:3!important;
  left:14px!important;
  right:14px!important;
  bottom:13px!important;
  width:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#fff!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  font-size:11px!important;
  line-height:1.2!important;
  font-weight:700!important;
  letter-spacing:.05em!important;
  text-shadow:0 2px 12px rgba(0,0,0,.32)!important;
}

body main .home-visual-grid .visual-number {
  display:grid!important;
  place-items:center!important;
  width:38px!important;
  height:38px!important;
  flex:0 0 38px!important;
  border:1px solid rgba(255,255,255,.36)!important;
  border-radius:50%!important;
  background:rgba(5,57,48,.48)!important;
  color:#fff!important;
  font-family:"Cormorant Garamond",Georgia,serif!important;
  font-size:17px!important;
  line-height:1!important;
  font-weight:700!important;
  backdrop-filter:blur(8px)!important;
}

body main .home-visual-grid .visual-caption-text {
  margin-left:auto!important;
  padding:6px 9px!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:999px!important;
  background:rgba(5,57,48,.48)!important;
  color:#fff!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
  backdrop-filter:blur(8px)!important;
}

/* ===== Room galleries: Bento within the detail column ===== */
body main .room-gallery {
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  grid-auto-rows:116px!important;
  grid-auto-flow:dense!important;
  gap:14px!important;
  align-content:start!important;
}

body main .room-gallery > .room-gallery-item {
  grid-column:span 3!important;
  grid-row:span 2!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:#dfeee9!important;
  box-shadow:0 12px 30px rgba(4,45,39,.12)!important;
}

body main .room-gallery > .room-gallery-item:nth-child(6n+1) {
  grid-column:span 4!important;
  grid-row:span 3!important;
}
body main .room-gallery > .room-gallery-item:nth-child(6n+2) {
  grid-column:span 2!important;
  grid-row:span 2!important;
}
body main .room-gallery > .room-gallery-item:nth-child(6n+3) {
  grid-column:span 2!important;
  grid-row:span 1!important;
}
body main .room-gallery > .room-gallery-item:nth-child(6n+4),
body main .room-gallery > .room-gallery-item:nth-child(6n+5),
body main .room-gallery > .room-gallery-item:nth-child(6n+6) {
  grid-column:span 3!important;
  grid-row:span 2!important;
}

body main .room-gallery > .room-gallery-item img {
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  object-fit:cover!important;
  transform:none!important;
  transition:transform .45s ease!important;
}
body main .room-gallery > .room-gallery-item:hover img,
body main .room-gallery > .room-gallery-item:focus-visible img {
  transform:scale(1.045)!important;
}

/* ===== Tablet ===== */
@media(max-width:1000px) {
  body main .view-grid,
  body main .auto-gallery-grid,
  body main .home-visual-grid {
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    grid-auto-rows:112px!important;
    gap:14px!important;
  }

  body main .view-grid > .view-card,
  body main .auto-gallery-grid > .auto-gallery-card,
  body main .home-visual-grid > .home-visual-card {
    grid-column:span 3!important;
    grid-row:span 2!important;
  }

  body main .view-grid > .view-card:nth-child(6n+1),
  body main .auto-gallery-grid > .auto-gallery-card:nth-child(6n+1),
  body main .home-visual-grid > .home-visual-card:nth-child(6n+1) {
    grid-column:span 4!important;
    grid-row:span 3!important;
  }
  body main .view-grid > .view-card:nth-child(6n+2),
  body main .auto-gallery-grid > .auto-gallery-card:nth-child(6n+2),
  body main .home-visual-grid > .home-visual-card:nth-child(6n+2) {
    grid-column:span 2!important;
    grid-row:span 2!important;
  }
  body main .view-grid > .view-card:nth-child(6n+3),
  body main .auto-gallery-grid > .auto-gallery-card:nth-child(6n+3),
  body main .home-visual-grid > .home-visual-card:nth-child(6n+3) {
    grid-column:span 2!important;
    grid-row:span 1!important;
  }
}

/* ===== Mobile: compact 2-column Bento, not a plain stacked gallery ===== */
@media(max-width:640px) {
  body main .view-grid,
  body main .auto-gallery-grid,
  body main .home-visual-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:126px!important;
    gap:10px!important;
  }

  body main .view-grid > .view-card,
  body main .auto-gallery-grid > .auto-gallery-card,
  body main .home-visual-grid > .home-visual-card,
  body main .view-grid > .view-card:nth-child(n),
  body main .auto-gallery-grid > .auto-gallery-card:nth-child(n),
  body main .home-visual-grid > .home-visual-card:nth-child(n) {
    grid-column:span 1!important;
    grid-row:span 1!important;
    border-radius:14px!important;
  }

  body main .view-grid > .view-card:nth-child(5n+1),
  body main .auto-gallery-grid > .auto-gallery-card:nth-child(5n+1),
  body main .home-visual-grid > .home-visual-card:nth-child(5n+1) {
    grid-column:span 2!important;
    grid-row:span 2!important;
  }

  body main .view-grid > .view-card:nth-child(5n+4),
  body main .auto-gallery-grid > .auto-gallery-card:nth-child(5n+4),
  body main .home-visual-grid > .home-visual-card:nth-child(5n+4) {
    grid-column:span 2!important;
    grid-row:span 1!important;
  }

  body main .view-grid figcaption,
  body main .auto-gallery-grid figcaption,
  body main .home-visual-grid figcaption {
    left:10px!important;
    right:10px!important;
    bottom:9px!important;
    font-size:9px!important;
  }

  body main .home-visual-grid .visual-number {
    width:32px!important;
    height:32px!important;
    flex-basis:32px!important;
    font-size:14px!important;
  }

  body main .home-visual-grid .visual-caption-text {
    padding:5px 7px!important;
    font-size:8px!important;
    max-width:68%!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }

  body main .room-gallery {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:128px!important;
    gap:10px!important;
  }

  body main .room-gallery > .room-gallery-item,
  body main .room-gallery > .room-gallery-item:nth-child(n) {
    grid-column:span 1!important;
    grid-row:span 1!important;
    border-radius:14px!important;
  }
  body main .room-gallery > .room-gallery-item:nth-child(5n+1) {
    grid-column:span 2!important;
    grid-row:span 2!important;
  }
  body main .room-gallery > .room-gallery-item:nth-child(5n+4) {
    grid-column:span 2!important;
    grid-row:span 1!important;
  }
}

@media(prefers-reduced-motion:reduce) {
  body main .view-grid img,
  body main .auto-gallery-grid img,
  body main .home-visual-grid img,
  body main .room-gallery img {
    transition:none!important;
  }
}

/* ===== Mobile resort wordmark — Cinzel ===== */
@media(max-width:900px) {
  .site-header .nav-wrap {
    gap:10px!important;
  }

  .site-header .brand {
    display:flex!important;
    align-items:center!important;
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:calc(100% - 58px)!important;
    gap:9px!important;
  }

  .site-header .brand > img {
    width:48px!important;
    height:48px!important;
    flex:0 0 48px!important;
    object-fit:contain!important;
  }

  .site-header .brand-copy {
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:flex-start!important;
    min-width:0!important;
    overflow:hidden!important;
    line-height:1!important;
  }

  .site-header .brand-copy strong,
  .site-header .brand-copy small {
    display:block!important;
    margin:0!important;
    padding:0!important;
    font-family:"Cinzel",serif!important;
    color:#173b34!important;
    font-size:0!important;
    font-weight:500!important;
    white-space:nowrap!important;
  }

  .site-header .brand-copy strong::after {
    content:"Ko Kut Ao Phrao Beach";
    display:block;
    font-family:"Cinzel",serif;
    font-size:clamp(11px,3.25vw,16px);
    line-height:1.15;
    font-weight:500;
    letter-spacing:-.035em;
    color:#173b34;
    white-space:nowrap;
  }

  .site-header .brand-copy small::after {
    content:"RESORT";
    display:block;
    margin-top:5px;
    padding-left:2px;
    font-family:"Cinzel",serif;
    font-size:8px;
    line-height:1;
    font-weight:600;
    letter-spacing:.42em;
    color:#315d54;
    white-space:nowrap;
  }

  .site-header .nav-toggle {
    flex:0 0 46px!important;
  }
}

@media(max-width:360px) {
  .site-header .brand > img {
    width:44px!important;
    height:44px!important;
    flex-basis:44px!important;
  }

  .site-header .brand-copy strong::after {
    font-size:10.5px;
  }

  .site-header .brand-copy small::after {
    font-size:7px;
    letter-spacing:.35em;
  }
}

/* ===== Resort micro effects — subtle, lightweight, no library ===== */
@keyframes kokutHeroDrift {
  from { transform:scale(1.015); }
  to { transform:scale(1.055); }
}

@keyframes kokutViewReveal {
  from { opacity:.18; transform:translateY(18px); }
  to { opacity:1; transform:translateY(0); }
}

@keyframes kokutHeaderDepth {
  from { box-shadow:0 0 0 rgba(3,40,34,0); }
  to { box-shadow:0 10px 30px rgba(3,40,34,.12); }
}

.hero .hero-slide.active,
.compact-hero .compact-hero-bg {
  animation:kokutHeroDrift 11s ease-out both;
  transform-origin:center center;
  will-change:transform;
}

@supports (animation-timeline:view()) {
  main .section-head,
  main .sanctuary-heading,
  main .sanctuary-story-card,
  main .sanctuary-fact,
  main .booking-room-row,
  main .room-copy,
  main .room-gallery,
  main .view-grid,
  main .auto-gallery-grid,
  main .faq-list,
  main .rate-card,
  main .included-box {
    animation-name:kokutViewReveal;
    animation-duration:1ms;
    animation-timing-function:ease-out;
    animation-fill-mode:both;
    animation-timeline:view();
    animation-range:entry 8% cover 24%;
  }
}

@supports (animation-timeline:scroll()) {
  .site-header {
    animation-name:kokutHeaderDepth;
    animation-duration:1ms;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:scroll(root block);
    animation-range:0 140px;
  }
}

.sanctuary-story-card,
.sanctuary-fact,
.booking-room-row,
.rate-card,
.included-box,
.btn,
.book-btn,
.sanctuary-text-link {
  transition:transform .28s ease,box-shadow .28s ease,background-color .28s ease,border-color .28s ease!important;
}

@media(hover:hover) and (pointer:fine) {
  .sanctuary-story-card:hover {
    transform:translateY(-5px)!important;
    box-shadow:0 28px 70px rgba(4,40,34,.22)!important;
  }

  .sanctuary-fact:hover,
  .rate-card:hover,
  .included-box:hover {
    transform:translateY(-3px)!important;
  }

  .booking-room-row:hover {
    transform:translateY(-3px)!important;
    box-shadow:0 18px 44px rgba(5,40,35,.10)!important;
  }

  .btn:hover,
  .book-btn:hover,
  .sanctuary-text-link:hover {
    transform:translateY(-2px)!important;
  }
}

@media(prefers-reduced-motion:reduce) {
  .hero .hero-slide.active,
  .compact-hero .compact-hero-bg,
  main .section-head,
  main .sanctuary-heading,
  main .sanctuary-story-card,
  main .sanctuary-fact,
  main .booking-room-row,
  main .room-copy,
  main .room-gallery,
  main .view-grid,
  main .auto-gallery-grid,
  main .faq-list,
  main .rate-card,
  main .included-box,
  .site-header {
    animation:none!important;
    transform:none!important;
    opacity:1!important;
  }
}