/* Ko Kut Ao Phrao Beach Resort — Interior page design system
   Keeps public inner pages visually consistent with the refreshed homepage. */

body:not(.homepage-refresh){
  --interior-ink:#153a33;
  --interior-muted:#64766f;
  --interior-green:#0b5d50;
  --interior-green-deep:#063d35;
  --interior-accent:#168368;
  --interior-ivory:#fbf8f1;
  --interior-soft:#f3f7f4;
  --interior-line:rgba(6,61,53,.12);
  --interior-shadow:0 18px 48px rgba(5,45,38,.09);
  --interior-font-body:"Sarabun",Tahoma,sans-serif;
  --interior-font-display:"Cormorant Garamond","Sarabun",Georgia,serif;
  background:#fff;
  color:var(--interior-ink);
  font-family:var(--interior-font-body);
  font-size:16px;
  line-height:1.78;
}

body:not(.homepage-refresh) main{background:#fff}
body:not(.homepage-refresh) .container{width:min(1180px,calc(100% - 40px))}
body:not(.homepage-refresh) .container-wide{width:min(1280px,calc(100% - 48px))}
body:not(.homepage-refresh) p,
body:not(.homepage-refresh) li,
body:not(.homepage-refresh) a,
body:not(.homepage-refresh) span,
body:not(.homepage-refresh) summary,
body:not(.homepage-refresh) label{font-family:var(--interior-font-body)}

/* ---------- Inner page hero ---------- */
body:not(.homepage-refresh) .compact-hero{
  position:relative;
  min-height:440px;
  overflow:hidden;
  background:var(--interior-green-deep);
  color:#fff;
}
body:not(.homepage-refresh) .compact-hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.015);
}
body:not(.homepage-refresh) .compact-hero-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(3,38,32,.78) 0%,rgba(3,43,36,.54) 43%,rgba(3,43,36,.20) 76%,rgba(3,38,32,.38) 100%),
    linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.22));
}
body:not(.homepage-refresh) .compact-hero-inner{
  position:relative;
  z-index:2;
  min-height:440px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding-block:70px 62px;
}
body:not(.homepage-refresh) .compact-hero .breadcrumbs{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 24px;
  color:rgba(255,255,255,.70);
  font-size:11px;
  line-height:1.4;
}
body:not(.homepage-refresh) .compact-hero .breadcrumbs a{color:#fff;text-decoration:none}
body:not(.homepage-refresh) .compact-hero .breadcrumbs span{color:rgba(255,255,255,.58)}
body:not(.homepage-refresh) .compact-hero .kicker{
  margin:0 0 10px;
  color:#a7e6d2;
  font-size:10px;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
}
body:not(.homepage-refresh) .compact-hero h1{
  max-width:850px;
  margin:0;
  color:#fff;
  font-family:var(--interior-font-display);
  font-size:clamp(52px,6vw,72px);
  line-height:.98;
  letter-spacing:-.024em;
  font-weight:600;
  text-wrap:balance;
}
body:not(.homepage-refresh) .compact-hero-inner>p:last-child{
  max-width:700px;
  margin:18px 0 0;
  color:rgba(255,255,255,.84);
  font-size:16px;
  line-height:1.82;
}

/* ---------- Section rhythm & typography ---------- */
body:not(.homepage-refresh) main>.section{padding:86px 0}
body:not(.homepage-refresh) main>.section:nth-of-type(even){background:var(--interior-ivory)}
body:not(.homepage-refresh) main>.section:nth-of-type(odd){background:#fff}
body:not(.homepage-refresh) .section-head{
  max-width:820px;
  margin:0 auto 36px;
  text-align:center;
}
body:not(.homepage-refresh) .kicker{
  margin:0 0 10px;
  color:var(--interior-accent);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
body:not(.homepage-refresh) .section-head h2,
body:not(.homepage-refresh) .intro-wrap>h2,
body:not(.homepage-refresh) .story-panel h2,
body:not(.homepage-refresh) .room-copy>h2,
body:not(.homepage-refresh) .contact-box h2,
body:not(.homepage-refresh) .article-faq>h2{
  margin:0;
  color:var(--interior-ink);
  font-family:var(--interior-font-display);
  font-size:clamp(40px,4.25vw,54px);
  line-height:1.04;
  letter-spacing:-.02em;
  font-weight:600;
}
body:not(.homepage-refresh) .section-head>p:last-child,
body:not(.homepage-refresh) .intro-wrap>p,
body:not(.homepage-refresh) .story-panel p,
body:not(.homepage-refresh) .room-summary{
  color:var(--interior-muted);
  font-size:16px;
  line-height:1.85;
}
body:not(.homepage-refresh) .section-head>p:last-child{max-width:700px;margin:14px auto 0}

/* ---------- About ---------- */
body:not(.homepage-refresh) .intro-section{background:var(--interior-ivory)!important}
body:not(.homepage-refresh) .intro-wrap{max-width:980px;padding:6px 0;text-align:center}
body:not(.homepage-refresh) .intro-wrap>p{max-width:830px;margin:16px auto 0}
body:not(.homepage-refresh) .fact-grid,
body:not(.homepage-refresh) .about-facts{gap:14px;margin-top:30px}
body:not(.homepage-refresh) .fact-card,
body:not(.homepage-refresh) .about-facts>div{
  padding:20px 18px;
  border:1px solid var(--interior-line);
  border-radius:18px;
  background:rgba(255,255,255,.78);
  box-shadow:none;
}
body:not(.homepage-refresh) .fact-card strong,
body:not(.homepage-refresh) .about-facts strong{
  color:var(--interior-ink);
  font-family:var(--interior-font-display);
  font-size:24px;
  line-height:1.05;
  font-weight:600;
}
body:not(.homepage-refresh) .fact-card span,
body:not(.homepage-refresh) .about-facts span{display:block;margin-top:7px;color:var(--interior-muted);font-size:12px;line-height:1.55}
body:not(.homepage-refresh) .story-layout{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:36px;align-items:stretch}
body:not(.homepage-refresh) .story-panel{
  padding:36px;
  border-radius:24px;
  background:linear-gradient(145deg,#063d35,#0b5d50);
  box-shadow:var(--interior-shadow);
}
body:not(.homepage-refresh) .story-panel h2{color:#fff;font-size:clamp(38px,3.8vw,50px)}
body:not(.homepage-refresh) .story-panel p{color:rgba(255,255,255,.76)}
body:not(.homepage-refresh) .timeline{gap:12px}
body:not(.homepage-refresh) .timeline-item{
  padding:22px 24px;
  border:1px solid var(--interior-line);
  border-radius:19px;
  background:#fff;
  box-shadow:0 10px 28px rgba(5,45,38,.05);
}
body:not(.homepage-refresh) .timeline-item h3{font-family:var(--interior-font-display);font-size:27px;font-weight:600;color:var(--interior-ink)}
body:not(.homepage-refresh) .timeline-item p{font-size:14px;line-height:1.78}

/* ---------- Rooms ---------- */
body:not(.homepage-refresh) .room-detail-layout{
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:38px;
  align-items:start;
}
body:not(.homepage-refresh) .room-copy{
  padding:30px;
  border:1px solid var(--interior-line);
  border-radius:24px;
  background:#fff;
  box-shadow:0 16px 42px rgba(5,45,38,.07);
}
body:not(.homepage-refresh) .room-copy>h2{font-size:clamp(42px,4vw,54px)}
body:not(.homepage-refresh) .room-summary{margin:10px 0 22px;font-size:16px}
body:not(.homepage-refresh) .room-specs{gap:10px;margin:20px 0}
body:not(.homepage-refresh) .room-specs>div{
  padding:15px;
  border:1px solid var(--interior-line);
  border-radius:16px;
  background:var(--interior-ivory);
}
body:not(.homepage-refresh) .room-specs strong{color:var(--interior-ink);font-size:19px}
body:not(.homepage-refresh) .room-specs span{font-size:11px;color:var(--interior-muted)}
body:not(.homepage-refresh) .booking-amenities{gap:7px}
body:not(.homepage-refresh) .booking-amenities span{
  padding:5px 9px;
  border:1px solid var(--interior-line);
  border-radius:999px;
  background:#fff;
  color:#48655c;
  font-size:11px;
}
body:not(.homepage-refresh) .rate-grid{gap:10px;margin:20px 0}
body:not(.homepage-refresh) .rate-card{
  padding:18px;
  border:1px solid var(--interior-line);
  border-radius:17px;
  background:#fff;
}
body:not(.homepage-refresh) .rate-card h3{margin:0;color:var(--interior-accent);font-family:var(--interior-font-body);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
body:not(.homepage-refresh) .rate-card strong{margin:8px 0 4px;color:var(--interior-green);font-family:var(--interior-font-display);font-size:29px;font-weight:600}
body:not(.homepage-refresh) .rate-card span{font-size:11px;color:var(--interior-muted)}
body:not(.homepage-refresh) .included-box{
  margin-top:16px;
  padding:20px;
  border:1px solid var(--interior-line);
  border-radius:18px;
  background:var(--interior-soft);
}
body:not(.homepage-refresh) .included-box h3{margin:0 0 10px;font-family:var(--interior-font-display);font-size:24px;font-weight:600}
body:not(.homepage-refresh) .included-box li{color:var(--interior-muted);font-size:13px;line-height:1.7}
body:not(.homepage-refresh) .booking-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 19px;
  border-radius:999px;
  background:var(--interior-green);
  color:#fff;
  font-size:13px;
  font-weight:600;
  box-shadow:none;
}

/* ---------- Gallery / Activities / Dining ---------- */
body:not(.homepage-refresh) .auto-gallery-grid,
body:not(.homepage-refresh) .view-grid{margin-top:4px}
body:not(.homepage-refresh) .auto-gallery-card,
body:not(.homepage-refresh) .view-card{box-shadow:0 14px 36px rgba(5,45,38,.11)!important}
body:not(.homepage-refresh) .auto-gallery-grid figcaption,
body:not(.homepage-refresh) .view-grid figcaption{font-family:var(--interior-font-body)!important;font-weight:600!important;letter-spacing:.07em!important}
body:not(.homepage-refresh) .auto-gallery-section,
body:not(.homepage-refresh) .viewpoints-section{background:var(--interior-green-deep)!important}
body:not(.homepage-refresh) .auto-gallery-section .section-head h2,
body:not(.homepage-refresh) .viewpoints-section .section-head h2{color:#fff}
body:not(.homepage-refresh) .auto-gallery-section .section-head>p:last-child,
body:not(.homepage-refresh) .viewpoints-section .section-head>p:last-child{color:rgba(255,255,255,.72)}

/* ---------- Blog ---------- */
body:not(.homepage-refresh) .blog-listing-section{background:var(--interior-ivory)!important}
body:not(.homepage-refresh) .wp-post-grid,
body:not(.homepage-refresh) .post-grid{gap:18px}
body:not(.homepage-refresh) .wp-post-card,
body:not(.homepage-refresh) .post-card{
  overflow:hidden;
  border:1px solid var(--interior-line);
  border-radius:21px;
  background:#fff;
  box-shadow:0 13px 34px rgba(5,45,38,.07);
}
body:not(.homepage-refresh) .wp-post-card:hover,
body:not(.homepage-refresh) .post-card:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(5,45,38,.11)}
body:not(.homepage-refresh) .wp-post-image,
body:not(.homepage-refresh) .post-image{height:235px}
body:not(.homepage-refresh) .wp-post-body,
body:not(.homepage-refresh) .post-body{padding:22px}
body:not(.homepage-refresh) .wp-post-body h2,
body:not(.homepage-refresh) .post-body h2{
  margin:8px 0 10px;
  color:var(--interior-ink);
  font-family:var(--interior-font-display);
  font-size:28px;
  line-height:1.08;
  font-weight:600;
}
body:not(.homepage-refresh) .wp-post-body p,
body:not(.homepage-refresh) .post-body p{margin:0;color:var(--interior-muted);font-size:14px;line-height:1.75}
body:not(.homepage-refresh) .post-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#83918c;font-size:10px}
body:not(.homepage-refresh) .read-more{margin-top:14px;color:var(--interior-green);font-size:13px;font-weight:600}
body:not(.homepage-refresh) .post-status-message{padding:30px;border:1px solid var(--interior-line);border-radius:20px;background:#fff;text-align:center}
body:not(.homepage-refresh) .post-status-message h2{font-family:var(--interior-font-display);font-size:34px;font-weight:600}

/* ---------- Contact ---------- */
body:not(.homepage-refresh) .contact-box{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:44px;
  align-items:center;
  padding:40px;
  border-radius:26px;
  background:linear-gradient(145deg,#063d35,#0b5d50);
  box-shadow:var(--interior-shadow);
}
body:not(.homepage-refresh) .contact-box h2{color:#fff;font-size:clamp(42px,4vw,54px)}
body:not(.homepage-refresh) .contact-box>div:first-child>p:last-child{color:rgba(255,255,255,.74);font-size:15px;line-height:1.8}
body:not(.homepage-refresh) .contact-list{display:grid;gap:0;border:1px solid rgba(255,255,255,.15);border-radius:20px;background:rgba(255,255,255,.08);overflow:hidden}
body:not(.homepage-refresh) .contact-list>a,
body:not(.homepage-refresh) .contact-list>span{display:block;padding:15px 18px;border-bottom:1px solid rgba(255,255,255,.12);color:#fff;font-size:13px;line-height:1.65}
body:not(.homepage-refresh) .contact-list>*:last-child{border-bottom:0}

/* ---------- Article ---------- */
body:not(.homepage-refresh) .article-hero h1{max-width:900px;font-size:clamp(46px,5.3vw,66px)}
body:not(.homepage-refresh) .article-section{background:#fff!important}
body:not(.homepage-refresh) .article-container{max-width:900px}
body:not(.homepage-refresh) .article-answer-box{
  padding:26px 28px;
  border:1px solid var(--interior-line);
  border-radius:20px;
  background:var(--interior-ivory);
  box-shadow:none;
}
body:not(.homepage-refresh) .article-answer-box h2,
body:not(.homepage-refresh) .article-content h2,
body:not(.homepage-refresh) .article-faq h2{font-family:var(--interior-font-display);font-weight:600;color:var(--interior-ink)}
body:not(.homepage-refresh) .article-answer-box h2{font-size:34px}
body:not(.homepage-refresh) .article-keypoints{border-radius:20px;background:var(--interior-green-deep)}
body:not(.homepage-refresh) .article-content{font-size:17px;line-height:1.92;color:#344f47}
body:not(.homepage-refresh) .article-content h2{font-size:clamp(31px,3.2vw,40px);line-height:1.12}
body:not(.homepage-refresh) .article-content h3{font-family:var(--interior-font-display);font-size:clamp(25px,2.5vw,30px);line-height:1.18;font-weight:600;color:var(--interior-ink)}
body:not(.homepage-refresh) .article-content img{border-radius:20px}

/* ---------- Policy / legal ---------- */
body:not(.homepage-refresh) .policy-hero{
  min-height:340px;
  display:flex;
  align-items:center;
  background:linear-gradient(145deg,#063d35,#0b5d50);
  color:#fff;
}
body:not(.homepage-refresh) .policy-hero-inner{padding-block:64px}
body:not(.homepage-refresh) .policy-hero .breadcrumbs{display:flex;gap:9px;margin-bottom:20px;color:rgba(255,255,255,.62);font-size:11px}
body:not(.homepage-refresh) .policy-hero h1{margin:0;color:#fff;font-family:var(--interior-font-display);font-size:clamp(50px,5.4vw,70px);line-height:1;font-weight:600}
body:not(.homepage-refresh) .policy-hero p:last-child{max-width:680px;margin:14px 0 0;color:rgba(255,255,255,.78);font-size:15px}
body:not(.homepage-refresh) .policy-content-section{background:var(--interior-ivory)!important}
body:not(.homepage-refresh) .policy-document{
  max-width:900px;
  padding:40px 44px;
  border:1px solid var(--interior-line);
  border-radius:24px;
  background:#fff;
  box-shadow:0 14px 38px rgba(5,45,38,.06);
}
body:not(.homepage-refresh) .policy-document h2{margin:34px 0 10px;color:var(--interior-ink);font-family:var(--interior-font-display);font-size:32px;line-height:1.16;font-weight:600}
body:not(.homepage-refresh) .policy-document h2:first-of-type{margin-top:18px}
body:not(.homepage-refresh) .policy-document p,
body:not(.homepage-refresh) .policy-document li{color:#526a63;font-size:15px;line-height:1.9}
body:not(.homepage-refresh) .policy-document a{color:var(--interior-green);text-decoration:underline;text-underline-offset:3px}
body:not(.homepage-refresh) .policy-updated{display:inline-flex;margin:0 0 8px;padding:6px 10px;border-radius:999px;background:var(--interior-soft);color:#72847d!important;font-size:11px!important}

/* ---------- Shared controls ---------- */
body:not(.homepage-refresh) .btn,
body:not(.homepage-refresh) .booking-link,
body:not(.homepage-refresh) .read-more{transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease}
@media(hover:hover) and (pointer:fine){
  body:not(.homepage-refresh) .booking-link:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(11,93,80,.16)}
}

/* ---------- Tablet ---------- */
@media(max-width:980px){
  body:not(.homepage-refresh) .container-wide{width:min(100% - 32px,900px)}
  body:not(.homepage-refresh) .compact-hero,
  body:not(.homepage-refresh) .compact-hero-inner{min-height:410px}
  body:not(.homepage-refresh) main>.section{padding:72px 0}
  body:not(.homepage-refresh) .story-layout,
  body:not(.homepage-refresh) .room-detail-layout,
  body:not(.homepage-refresh) .contact-box{grid-template-columns:1fr;gap:26px}
  body:not(.homepage-refresh) .room-copy{max-width:none}
  body:not(.homepage-refresh) .wp-post-grid,
  body:not(.homepage-refresh) .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- Mobile ---------- */
@media(max-width:640px){
  body:not(.homepage-refresh){font-size:15px}
  body:not(.homepage-refresh) .container,
  body:not(.homepage-refresh) .container-wide{width:calc(100% - 24px)}
  body:not(.homepage-refresh) .compact-hero,
  body:not(.homepage-refresh) .compact-hero-inner{min-height:360px}
  body:not(.homepage-refresh) .compact-hero-inner{padding-block:54px 44px}
  body:not(.homepage-refresh) .compact-hero .breadcrumbs{margin-bottom:18px;font-size:10px;flex-wrap:wrap}
  body:not(.homepage-refresh) .compact-hero h1{font-size:clamp(43px,13vw,54px)}
  body:not(.homepage-refresh) .compact-hero-inner>p:last-child{font-size:14px;line-height:1.75}
  body:not(.homepage-refresh) main>.section{padding:60px 0}
  body:not(.homepage-refresh) .section-head{margin-bottom:28px;text-align:left}
  body:not(.homepage-refresh) .section-head h2,
  body:not(.homepage-refresh) .intro-wrap>h2,
  body:not(.homepage-refresh) .story-panel h2,
  body:not(.homepage-refresh) .room-copy>h2,
  body:not(.homepage-refresh) .contact-box h2,
  body:not(.homepage-refresh) .article-faq>h2{font-size:39px}
  body:not(.homepage-refresh) .section-head>p:last-child,
  body:not(.homepage-refresh) .intro-wrap>p{margin-left:0;font-size:14px}
  body:not(.homepage-refresh) .intro-wrap{text-align:left}
  body:not(.homepage-refresh) .fact-grid,
  body:not(.homepage-refresh) .about-facts{grid-template-columns:1fr 1fr;gap:10px}
  body:not(.homepage-refresh) .fact-card,
  body:not(.homepage-refresh) .about-facts>div{padding:16px}
  body:not(.homepage-refresh) .fact-card strong,
  body:not(.homepage-refresh) .about-facts strong{font-size:21px}
  body:not(.homepage-refresh) .story-panel,
  body:not(.homepage-refresh) .room-copy,
  body:not(.homepage-refresh) .contact-box{padding:24px;border-radius:20px}
  body:not(.homepage-refresh) .room-detail-layout{gap:22px}
  body:not(.homepage-refresh) .room-specs{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  body:not(.homepage-refresh) .room-specs>div{padding:12px 9px}
  body:not(.homepage-refresh) .room-specs strong{font-size:16px}
  body:not(.homepage-refresh) .rate-grid{grid-template-columns:1fr}
  body:not(.homepage-refresh) .included-box ul{columns:1}
  body:not(.homepage-refresh) .wp-post-grid,
  body:not(.homepage-refresh) .post-grid{grid-template-columns:1fr}
  body:not(.homepage-refresh) .wp-post-image,
  body:not(.homepage-refresh) .post-image{height:220px}
  body:not(.homepage-refresh) .contact-list>a,
  body:not(.homepage-refresh) .contact-list>span{padding:13px 14px;font-size:12px}
  body:not(.homepage-refresh) .policy-hero{min-height:300px}
  body:not(.homepage-refresh) .policy-hero-inner{padding-block:48px}
  body:not(.homepage-refresh) .policy-hero h1{font-size:48px}
  body:not(.homepage-refresh) .policy-document{padding:24px 20px;border-radius:18px}
  body:not(.homepage-refresh) .policy-document h2{font-size:28px}
  body:not(.homepage-refresh) .policy-document p,
  body:not(.homepage-refresh) .policy-document li{font-size:14px}
  body:not(.homepage-refresh) .article-content{font-size:16px}
}

@media(prefers-reduced-motion:reduce){
  body:not(.homepage-refresh) .btn,
  body:not(.homepage-refresh) .booking-link,
  body:not(.homepage-refresh) .read-more{transition:none!important}
}