/* Maui Beachside Bungalows — interior pages (property / guides / faq) — Cavmir */

/* ---------- SUB-HERO ---------- */
.subhero{position:relative;min-height:64vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.subhero.short{min-height:52vh}
.subhero-img{position:absolute;inset:-5%;background-size:cover;background-position:center;animation:kenburns 20s ease-out forwards}
.subhero.grad .subhero-img{inset:0;animation:none;background:radial-gradient(135% 150% at 82% 0%,var(--lagoon) 0%,var(--teal) 36%,var(--teal-deep) 76%,var(--ink) 100%)}
.subhero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,30,36,.34) 0%,rgba(8,30,36,.20) 42%,rgba(8,30,36,.82) 100%)}
.subhero .wrap{position:relative;width:100%;padding-top:138px;padding-bottom:54px}
.subhero h1{font-size:clamp(2.3rem,6vw,4.3rem);font-weight:300;letter-spacing:.01em;text-shadow:0 4px 40px rgba(0,0,0,.3);max-width:16ch}
.subhero .lede{max-width:620px;margin-top:18px;font-weight:300;font-size:1.07rem;opacity:.96}
.subhero .kicker{color:#ffd9cb}

/* breadcrumb */
.crumbs{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin-bottom:20px;opacity:.9}
.crumbs a:hover{text-decoration:underline}
.crumbs i{font-style:normal;opacity:.5;margin:0 9px}

/* hero meta chips + actions */
.hero-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;font-size:.85rem}
.chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.13);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.24);padding:8px 16px;border-radius:100px;font-weight:500}
.chip strong{font-weight:700}
.chip.star{color:#ffd9cb}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* ---------- GALLERY ---------- */
.gallery-sec{padding:74px 0 20px}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:160px;gap:12px}
.gallery a{display:block;overflow:hidden;border-radius:4px;cursor:zoom-in;position:relative;background:var(--sand-deep)}
.gallery a:nth-child(1){grid-column:span 2;grid-row:span 2}
.gallery a:nth-child(8){grid-column:span 2}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gallery a:hover img{transform:scale(1.06)}
.gallery-more{display:flex;align-items:center;justify-content:center;background:var(--teal-deep);color:#fff;font-weight:600;font-size:.92rem;text-align:center;letter-spacing:.02em}
.gallery-more:hover{background:var(--teal)}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(6,22,26,.95);z-index:300;display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb figure{position:relative;max-width:92vw;max-height:88vh}
.lb img{max-width:92vw;max-height:84vh;border-radius:3px;display:block;margin:0 auto}
.lb figcaption{color:#cfe0e2;text-align:center;font-size:.82rem;margin-top:14px;letter-spacing:.04em}
.lb button{position:absolute;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;cursor:pointer;width:50px;height:50px;border-radius:50%;font-size:1.5rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .2s}
.lb button:hover{background:rgba(255,255,255,.28)}
.lb-close{top:24px;right:24px}
.lb-prev{left:24px;top:50%;transform:translateY(-50%)}
.lb-next{right:24px;top:50%;transform:translateY(-50%)}

/* ---------- PROPERTY BODY ---------- */
.pbody{padding:70px 0 20px}
.pbody-grid{display:grid;grid-template-columns:1fr 360px;gap:64px;align-items:start}
.prose>p{color:#33494e;margin-bottom:18px;font-size:1.04rem}
.prose .lead-p{font-family:var(--serif);font-size:1.3rem;line-height:1.5;color:#21383d;font-weight:400;margin-bottom:26px}
.prose h2{margin-bottom:18px}
.prose h3{font-family:var(--serif);font-weight:500;font-size:1.45rem;margin:38px 0 12px;color:var(--teal-deep)}

/* room blocks */
.rooms{list-style:none;margin:14px 0 0}
.rooms li{display:grid;grid-template-columns:42px 1fr;gap:16px;padding:18px 0;border-top:1px solid rgba(11,43,48,.10)}
.rooms .ri{color:var(--coral-deep)}
.rooms .ri svg{width:26px;height:26px}
.rooms h4{font-family:var(--serif);font-weight:500;font-size:1.12rem;margin-bottom:4px}
.rooms p{font-size:.94rem;color:#43595e}

/* amenities */
.amen-sec{padding:30px 0 10px}
.amen{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 30px;margin-top:8px}
.amen div{display:flex;gap:11px;font-size:.94rem;color:#33494e;align-items:flex-start;padding:8px 0;border-bottom:1px solid rgba(11,43,48,.07)}
.amen div::before{content:'';flex:none;width:9px;height:9px;margin-top:7px;border-radius:50%;background:var(--lagoon)}

/* booking aside card */
.bookcard{position:sticky;top:96px;background:#fff;border-radius:8px;padding:30px;box-shadow:0 26px 70px rgba(11,43,48,.13);border:1px solid #ece3d2}
.bookcard .bc-rate{font-family:var(--serif);font-size:1.7rem;color:var(--teal-deep)}
.bookcard .bc-rate span{font-size:.86rem;color:#6c8186;font-family:var(--sans)}
.bookcard .bc-star{font-size:.84rem;font-weight:600;color:var(--coral-deep);letter-spacing:.04em;margin:6px 0 18px}
.bookcard .btn{width:100%;text-align:center;margin-bottom:11px}
.bc-spec{list-style:none;margin:18px 0 0;font-size:.88rem}
.bc-spec li{display:flex;justify-content:space-between;padding:9px 0;border-top:1px solid rgba(11,43,48,.09);color:#43595e}
.bc-spec li strong{color:var(--ink);font-weight:600}
.bc-note{font-size:.76rem;color:#6c8186;margin-top:16px;text-align:center;line-height:1.5}

/* ---------- ARTICLE (guides) ---------- */
.article{padding:70px 0 30px}
.article .wrap{max-width:768px}
.g-lead{font-family:var(--serif);font-size:1.32rem;line-height:1.5;color:#21383d;font-weight:400;margin-bottom:34px}
.article h2{font-size:clamp(1.6rem,3vw,2.1rem);margin:50px 0 16px}
.article h3{font-family:var(--serif);font-weight:500;font-size:1.32rem;margin:34px 0 10px;color:var(--teal-deep)}
.article p{margin-bottom:18px;color:#33494e;font-size:1.05rem}
.article ul,.article ol{margin:0 0 22px 4px;color:#33494e;font-size:1.04rem}
.article li{margin-bottom:9px;padding-left:8px}
.article a:not(.btn){color:var(--teal);border-bottom:1px solid rgba(14,105,115,.3)}
.article a:not(.btn):hover{border-bottom-color:var(--teal)}

/* callout / tip */
.callout{background:#fff;border-left:3px solid var(--coral);border-radius:0 6px 6px 0;padding:24px 28px;margin:30px 0;box-shadow:0 16px 44px rgba(11,43,48,.07)}
.callout .callout-label{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--coral-deep);font-weight:700;margin-bottom:8px}
.callout p:last-child{margin-bottom:0}

/* pull quote */
.g-quote{font-family:var(--serif);font-size:1.5rem;line-height:1.35;color:var(--teal-deep);font-weight:300;border-top:2px solid var(--coral);border-bottom:2px solid var(--coral);padding:28px 0;margin:38px 0;text-align:center}

/* at-a-glance box */
.ataglance{background:var(--teal-deep);color:#fff;border-radius:8px;padding:30px 34px;margin:34px 0}
.ataglance h3{color:#fff;margin:0 0 18px;font-family:var(--serif);font-weight:500;font-size:1.2rem}
.ataglance .ag-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 30px}
.ataglance .ag-item strong{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);font-weight:700;margin-bottom:3px}
.ataglance .ag-item span{font-size:.96rem;opacity:.92;font-weight:300}

/* itinerary / numbered steps */
.itinerary{list-style:none;counter-reset:step;margin:26px 0}
.itinerary li{position:relative;padding:0 0 26px 56px;border-left:2px solid rgba(15,138,150,.25);margin-left:18px}
.itinerary li:last-child{border-left-color:transparent;padding-bottom:0}
.itinerary li::before{counter-increment:step;content:counter(step);position:absolute;left:-19px;top:-4px;width:36px;height:36px;border-radius:50%;background:var(--coral);color:#fff;font-family:var(--serif);font-weight:500;display:flex;align-items:center;justify-content:center;font-size:1rem}
.itinerary h4{font-family:var(--serif);font-weight:500;font-size:1.16rem;margin-bottom:5px;color:var(--teal-deep)}
.itinerary .it-meta{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-deep);font-weight:600;margin-bottom:6px}
.itinerary p{font-size:.98rem;margin-bottom:0}

/* table */
.g-table{width:100%;border-collapse:collapse;margin:28px 0;font-size:.95rem}
.g-table caption{text-align:left;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-deep);font-weight:700;margin-bottom:12px}
.g-table th,.g-table td{text-align:left;padding:13px 16px;border-bottom:1px solid rgba(11,43,48,.10)}
.g-table thead th{background:var(--teal-deep);color:#fff;font-weight:600;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase}
.g-table thead th:first-child{border-radius:6px 0 0 0}
.g-table thead th:last-child{border-radius:0 6px 0 0}
.g-table tbody tr:nth-child(even){background:rgba(15,138,150,.05)}
.g-table td strong{color:var(--teal-deep)}

/* key points / checklist */
.keypoints{list-style:none;margin:24px 0;background:#fff;border-radius:8px;padding:26px 30px;box-shadow:0 16px 44px rgba(11,43,48,.06)}
.keypoints li{padding:9px 0 9px 30px;position:relative;border-bottom:1px solid rgba(11,43,48,.07);font-size:.98rem}
.keypoints li:last-child{border-bottom:0}
.keypoints li::before{content:'\2713';position:absolute;left:0;color:var(--lagoon);font-weight:700}

/* ---------- GUIDE HUB ---------- */
.guidehub{padding:74px 0 90px}
.gh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ghcard{display:flex;flex-direction:column;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 18px 50px rgba(11,43,48,.08);transition:transform .25s,box-shadow .25s}
.ghcard:hover{transform:translateY(-5px);box-shadow:0 28px 64px rgba(11,43,48,.14)}
.ghcard .gh-top{height:150px;background-size:cover;background-position:center;position:relative}
.ghcard .gh-top.grad1{background:linear-gradient(135deg,var(--lagoon),var(--teal-deep))}
.ghcard .gh-top.grad2{background:linear-gradient(135deg,#f6b67f,var(--coral-deep))}
.ghcard .gh-top.grad3{background:linear-gradient(135deg,#6fb7c0,var(--teal))}
.ghcard .gh-cat{position:absolute;bottom:12px;left:16px;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:700;background:rgba(8,30,36,.45);padding:5px 12px;border-radius:100px}
.ghcard .gh-body{padding:24px 26px 28px;flex:1;display:flex;flex-direction:column}
.ghcard h3{font-family:var(--serif);font-weight:500;font-size:1.25rem;margin-bottom:9px;line-height:1.2}
.ghcard p{font-size:.92rem;color:#43595e;flex:1}
.ghcard .gh-link{margin-top:16px;font-size:.84rem;font-weight:600;color:var(--teal);letter-spacing:.02em}

/* ---------- BLOG ---------- */
.postlist{padding:70px 0 90px}
.postlist .wrap{max-width:860px}
.post-item{display:block;padding:34px 0;border-bottom:1px solid rgba(11,43,48,.12)}
.post-item:first-child{padding-top:6px}
.post-meta{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-deep);font-weight:600;margin-bottom:10px}
.post-item h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:10px;transition:color .2s}
.post-item:hover h2{color:var(--teal)}
.post-item p{color:#43595e;font-size:1.02rem;margin-bottom:10px}
.post-item .readon{font-size:.84rem;font-weight:600;color:var(--teal);letter-spacing:.02em}
.byline{display:flex;align-items:center;gap:12px;margin:0 0 30px;font-size:.84rem;color:#5b7176}
.byline .b-date{letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--coral-deep)}
.byline i{font-style:normal;opacity:.5}

/* ---------- RELATED / NEXT ---------- */
.related{padding:20px 0 96px}
.related .wrap{max-width:1000px}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.relcard{background:#fff;border-radius:8px;padding:24px 24px 26px;box-shadow:0 16px 44px rgba(11,43,48,.07);transition:transform .2s}
.relcard:hover{transform:translateY(-4px)}
.relcard .rc-cat{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-deep);font-weight:700}
.relcard h4{font-family:var(--serif);font-weight:500;font-size:1.1rem;margin:8px 0 0;line-height:1.25}

/* ---------- FAQ ---------- */
.faqsec{padding:64px 0 40px}
.faqsec .wrap{max-width:820px}
.faq-cat{font-family:var(--serif);font-size:1.5rem;color:var(--teal-deep);margin:44px 0 10px;font-weight:500}
.faq-cat:first-of-type{margin-top:0}
.faq-item{border-bottom:1px solid rgba(11,43,48,.12)}
.faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:22px 44px 22px 0;font-family:var(--serif);font-size:1.12rem;font-weight:500;color:var(--ink);position:relative;line-height:1.35}
.faq-q::after{content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--coral);font-family:var(--sans);transition:transform .3s}
.faq-item.open .faq-q::after{content:'\2212'}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a-inner{padding:0 30px 24px 0;color:#33494e;font-size:1rem}
.faq-a-inner p{margin-bottom:12px}
.faq-a-inner p:last-child{margin-bottom:0}

/* ---------- CTA BAND ---------- */
.cta-band{position:relative;padding:96px 0;text-align:center;color:#fff;overflow:hidden}
.cta-band .cta-bg{position:absolute;inset:0;background:linear-gradient(135deg,var(--teal) 0%,var(--teal-deep) 60%,var(--ink) 100%)}
.cta-band .wrap{position:relative;max-width:680px}
.cta-band h2{margin-bottom:16px}
.cta-band p{font-weight:300;opacity:.92;margin-bottom:30px;font-size:1.05rem}
.cta-band .hero-actions{justify-content:center}

/* generic section intro on interior pages */
.isec{padding:70px 0}
.isec.tint{background:linear-gradient(180deg,var(--sand) 0%,var(--sand-deep) 100%)}
.isec .section-head{margin-bottom:40px}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1020px){
  .pbody-grid{grid-template-columns:1fr;gap:48px}
  .bookcard{position:static;max-width:460px}
  .gh-grid{grid-template-columns:1fr 1fr}
  .rel-grid{grid-template-columns:1fr}
  .amen{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:130px}
  .gallery a:nth-child(8){grid-column:span 1}
  .gh-grid{grid-template-columns:1fr}
  .amen{grid-template-columns:1fr}
  .ataglance .ag-grid{grid-template-columns:1fr}
  .subhero .wrap{padding-top:120px}
  .lb button{width:42px;height:42px}
  .lb-prev{left:8px}.lb-next{right:8px}
}