/* ============================================================
   DIGITAL FOR HOTELS — blog (listing, article page, homepage cards)
   Uses the tokens from style.css. One stylesheet for every blog page.
   ============================================================ */

/* ---------- cards ---------- */
.blog__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}
.bcard{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:var(--warm-white);border:1px solid rgba(23,19,13,.08);box-shadow:var(--sh-soft);color:var(--charcoal);transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .5s}
.bcard:hover{transform:translateY(-8px);box-shadow:var(--sh-card);border-color:var(--gold-40)}
.bcard[hidden]{display:none}
.bcard__img{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--forest)}
.bcard__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.bcard:hover .bcard__img img{transform:scale(1.06)}
.bcard__cat{position:absolute;left:14px;top:14px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--midnight);background:var(--gold-grad);border-radius:999px;padding:5px 11px}
.bcard__body{display:flex;flex-direction:column;gap:10px;flex:1;padding:clamp(20px,2.2vw,28px)}
.bcard__t{font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.9vw,25px);line-height:1.14;letter-spacing:-.01em}
.bcard__d{font-size:14.5px;line-height:1.55;color:rgba(23,19,13,.66);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bcard__meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:12px;font-size:12.5px;color:rgba(23,19,13,.55);border-top:1px solid rgba(23,19,13,.08)}
.bcard__more{font-weight:600;color:var(--teal);white-space:nowrap;transition:transform .45s var(--ease)}
.bcard:hover .bcard__more{transform:translateX(5px)}
.bcard:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
/* cards on dark sections */
.section--dark .bcard,.section--forest .bcard{background:rgba(7,28,25,.55);border-color:var(--pearl-14);color:var(--pearl);box-shadow:var(--sh-dark)}
.section--dark .bcard__d,.section--forest .bcard__d{color:var(--pearl-60)}
.section--dark .bcard__meta,.section--forest .bcard__meta{color:var(--pearl-40);border-top-color:var(--pearl-08)}
.section--dark .bcard__more,.section--forest .bcard__more{color:var(--gold-soft)}

/* ---------- homepage section ---------- */
.hblog__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,48px)}

/* ---------- listing page ---------- */
.bfeat{display:grid;grid-template-columns:1.15fr 1fr;border-radius:var(--r-xl);overflow:hidden;background:var(--midnight);color:var(--pearl);box-shadow:var(--sh-card);margin-bottom:clamp(40px,5vw,70px)}
.bfeat__img{position:relative;min-height:340px;background:var(--forest);overflow:hidden}
.bfeat__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.bfeat:hover .bfeat__img img{transform:scale(1.04)}
.bfeat__body{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:clamp(26px,4vw,56px)}
.bfeat__tag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--midnight);background:var(--gold-grad);border-radius:999px;padding:5px 12px}
.bfeat__t{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,42px);line-height:1.08;letter-spacing:-.015em}
.bfeat__meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--pearl-60)}
.bfeat__d{color:rgba(243,239,230,.8);font-size:15.5px;line-height:1.6;max-width:52ch}
.bfeat .btn{align-self:flex-start;margin-top:6px}
.blog__tools{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,36px)}
.blog__tools[hidden]{display:none}
.blog__search{position:relative;flex:1 1 260px;max-width:380px}
.blog__search input{width:100%;padding:14px 18px 14px 46px;border-radius:999px;border:1px solid rgba(23,19,13,.16);background:var(--warm-white);font-size:14.5px;color:var(--charcoal);outline:none;transition:border-color .3s,box-shadow .3s}
.blog__search input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-20)}
.blog__search svg{position:absolute;left:17px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:rgba(23,19,13,.5)}
.blog__filters{display:flex;flex-wrap:wrap;gap:8px}
.bfilter{border:1px solid rgba(23,19,13,.14);background:transparent;border-radius:999px;padding:10px 18px;font:600 13.5px var(--sans);color:rgba(23,19,13,.72);cursor:pointer;transition:background .35s,color .35s,border-color .35s}
.bfilter:hover{border-color:var(--gold)}
.bfilter.active{background:var(--midnight);border-color:var(--midnight);color:var(--gold-soft)}
.blog__empty{padding:clamp(40px,6vw,80px) 20px;text-align:center;border:1px dashed rgba(23,19,13,.2);border-radius:var(--r-lg);color:rgba(23,19,13,.62)}
.blog__empty[hidden]{display:none}
.blog__empty b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.4vw,30px);color:var(--charcoal);margin-bottom:8px}
.blog__more{display:flex;justify-content:center;margin-top:clamp(30px,4vw,50px)}
.blog__more[hidden]{display:none}

/* ---------- article page ---------- */
.post__hero{position:relative;background:var(--midnight);color:var(--pearl);padding:calc(var(--header-h) + clamp(40px,6vw,80px)) 0 clamp(40px,6vw,80px);overflow:hidden}
.post__hero::before{content:"";position:absolute;right:-10%;top:-30%;width:min(720px,70vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(28,138,132,.4),transparent 68%);filter:blur(70px);pointer-events:none}
.post__hero .wrap{position:relative;max-width:1080px}
.post__hero .crumbs{color:var(--pearl-60);margin-bottom:22px}
.post__hero .crumbs>span:last-child{opacity:1;color:var(--pearl-40);max-width:46ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post__cat{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--midnight);background:var(--gold-grad);border-radius:999px;padding:5px 12px;margin-bottom:18px}
.post__h1{font-size:clamp(30px,4.4vw,58px);line-height:1.06;letter-spacing:-.02em;max-width:22ch}
.post__meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:13.5px;color:var(--pearl-60)}
.post__meta span{display:inline-flex;align-items:center;gap:8px}
.post__meta span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold)}
.post__wrap{max-width:1180px;padding-block:clamp(30px,4vw,56px) clamp(60px,8vw,110px)}
.post__figure{border-radius:var(--r-lg);overflow:hidden;background:var(--pearl);margin-bottom:clamp(30px,4vw,56px);box-shadow:var(--sh-soft)}
.post__figure img{width:100%;height:auto;max-height:78vh;object-fit:contain;display:block;margin-inline:auto}
.post__cols{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(30px,5vw,70px);align-items:start}
.post__side{position:sticky;top:calc(var(--header-h) + 10px);display:flex;flex-direction:column;gap:18px}
.pbox{background:var(--warm-white);border:1px solid rgba(23,19,13,.08);border-radius:var(--r-md);padding:20px}
.pbox__h{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.pbox ul{display:flex;flex-direction:column;gap:9px}
.pbox a{font-size:14px;line-height:1.4;color:rgba(23,19,13,.78);transition:color .3s}
.pbox a:hover{color:var(--teal)}
.pbox__toc a{display:block;padding-left:12px;border-left:2px solid rgba(23,19,13,.1);transition:border-color .3s,color .3s}
.pbox__toc a:hover{border-left-color:var(--gold)}
.pbox__date{display:block;font-size:12px;color:rgba(23,19,13,.5);margin-top:2px}
.pbox__cats{display:flex;flex-wrap:wrap;gap:7px}
.pbox__cats a{font-size:12.5px;font-weight:600;border:1px solid rgba(23,19,13,.14);border-radius:999px;padding:5px 12px}
.pbox__cats a:hover{border-color:var(--gold)}
/* article typography */
.post__body{font-size:clamp(16px,1.15vw,18px);line-height:1.78;color:rgba(23,19,13,.86);max-width:72ch}
.post__body>*+*{margin-top:1.15em}
.post__body h2{font-size:clamp(26px,2.6vw,36px);line-height:1.14;margin-top:1.9em;color:var(--charcoal);scroll-margin-top:calc(var(--header-h) + 20px)}
.post__body h3{font-size:clamp(21px,2vw,26px);line-height:1.2;margin-top:1.6em;color:var(--charcoal)}
.post__body h4{font-family:var(--sans);font-weight:700;font-size:1.02em;letter-spacing:0;margin-top:1.4em;color:var(--charcoal)}
.post__body a{color:var(--teal);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px;overflow-wrap:anywhere}
.post__body a:hover{color:var(--lagoon)}
.post__body ul,.post__body ol{padding-left:1.3em;display:flex;flex-direction:column;gap:.5em}
.post__body ul{list-style:disc}
.post__body ol{list-style:decimal}
.post__body li::marker{color:var(--gold)}
.post__body blockquote{border-left:3px solid var(--gold);padding:.4em 0 .4em 1.2em;font-family:var(--serif);font-style:italic;font-size:1.18em;line-height:1.5;color:var(--charcoal)}
.post__body img{width:100%;height:auto;border-radius:var(--r-md)}
.post__body figure{margin-block:1.6em}
.post__body figcaption{font-size:13px;color:rgba(23,19,13,.55);text-align:center;margin-top:8px}
.post__source{margin-top:1.6em;padding:16px 18px;border-radius:var(--r-sm);background:rgba(14,86,84,.07);border:1px solid rgba(14,86,84,.16);font-size:15px}
/* FAQ */
.pfaq{margin-top:clamp(40px,5vw,60px);max-width:72ch}
.pfaq__h{font-size:clamp(24px,2.4vw,32px);margin-bottom:16px}
.pfaq details{border-bottom:1px solid rgba(23,19,13,.12)}
.pfaq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 0;font-weight:600;font-size:16.5px;color:var(--charcoal)}
.pfaq summary::-webkit-details-marker{display:none}
.pfaq summary::after{content:"+";font-family:var(--serif);font-size:26px;line-height:1;color:var(--gold);transition:transform .4s var(--ease);flex:none}
.pfaq details[open] summary::after{transform:rotate(45deg)}
.pfaq details p{padding:0 0 18px;color:rgba(23,19,13,.74);line-height:1.7}
/* share + prev/next */
.pshare{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:clamp(36px,5vw,56px);padding-top:24px;border-top:1px solid rgba(23,19,13,.1);max-width:72ch}
.pshare__l{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(23,19,13,.55);margin-right:4px}
.pshare button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(23,19,13,.16);background:transparent;color:var(--charcoal);display:grid;place-items:center;cursor:pointer;font:700 14px var(--sans);transition:background .35s,color .35s,border-color .35s,transform .45s var(--ease)}
.pshare button:hover{background:var(--midnight);border-color:var(--midnight);color:var(--gold-soft);transform:translateY(-3px)}
.pshare button svg{width:17px;height:17px}
.pshare__msg{font-size:13px;color:var(--teal);font-weight:600}
.pnav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px;max-width:72ch}
.pnav a{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:var(--r-md);border:1px solid rgba(23,19,13,.1);background:var(--warm-white);transition:border-color .35s,transform .5s var(--ease)}
.pnav a:hover{border-color:var(--gold);transform:translateY(-3px)}
.pnav a.is-next{text-align:right;grid-column:2}
.pnav__l{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.pnav__t{font-family:var(--serif);font-size:17px;line-height:1.25;color:var(--charcoal)}
.prelated{padding-block:clamp(56px,8vw,110px);background:var(--pearl)}
.prelated__h{font-size:clamp(26px,3vw,40px);margin:14px 0 clamp(26px,3.4vw,42px)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .blog__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post__cols{grid-template-columns:1fr}
  .post__side{position:static;order:2;display:grid;grid-template-columns:1fr 1fr}
  .post__side .pbox--toc{grid-column:1/-1}
  .bfeat{grid-template-columns:1fr}
  .bfeat__img{min-height:0;aspect-ratio:16/10}
}
@media (max-width:640px){
  .blog__grid{grid-template-columns:1fr}
  .post__side{grid-template-columns:1fr}
  .pnav{grid-template-columns:1fr}
  .pnav a.is-next{grid-column:1;text-align:left}
  .blog__search{max-width:none}
  .blog__filters{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none;width:calc(100% + var(--gutter) * 2)}
  .blog__filters::-webkit-scrollbar{display:none}
  .bfilter{flex:none}
  .post__hero .crumbs>span:last-child{display:none}
  .post__hero .crumbs>span:nth-last-child(2){display:none}
}