/*
  REIO Blog styles
  Scoped with an "rb-" prefix so nothing here collides with style.css / custom-style.css.
  Reuses the existing site variables (--ink, --gold, --cream, --gray, --line, --dark-color, --light-gold, --secondary-color)
  defined in css/style.css.
*/

.rb-page{background:#fff;}

/* ---------- Hero ---------- */
.rb-hero{position:relative; color:#fff; background:var(--dark-color);}
.rb-hero .rb-hero-bg{width:100%; height:360px; object-fit:cover; opacity:0.55; display:block;}
.rb-hero .rb-hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.92) 100%);
  display:flex; align-items:flex-end;
}
.rb-hero .rb-hero-inner{padding:40px 0 36px;}
.rb-breadcrumb{font-size:13px; color:rgba(255,255,255,0.7); margin-bottom:18px; letter-spacing:.02em;}
.rb-breadcrumb a{color:rgba(255,255,255,0.7);}
.rb-breadcrumb a:hover{color:var(--light-gold);}
.rb-breadcrumb span{color:var(--light-gold);}
.rb-eyebrow{
  display:inline-block; color:var(--light-gold); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; font-size:12.5px; margin-bottom:14px;
}
.rb-hero h1{font-size:clamp(28px,4vw,42px); line-height:1.22; font-weight:700; max-width:820px; margin-bottom:18px;}
.rb-meta-row{display:flex; flex-wrap:wrap; gap:18px; font-size:13.5px; color:rgba(255,255,255,0.75);}
.rb-meta-row span{display:inline-flex; align-items:center; gap:6px;}

/* ---------- Layout ---------- */
.rb-layout{display:grid; grid-template-columns:1fr 320px; gap:56px; padding:64px 0; align-items:start;}
.rb-content{min-width:0;}
.rb-content > p{color:var(--ink); font-size:16px; line-height:1.85; margin-bottom:22px;}
.rb-content h2{
  font-size:28px; color:var(--ink); margin:44px 0 18px; padding-top:6px;
  border-top:1px solid var(--line); padding-top:26px;
}
.rb-content > h2:first-child{border-top:none; margin-top:0; padding-top:0;}
.rb-content h3{font-size:19px; color:var(--secondary-color); margin:26px 0 10px;}
.rb-content ul{list-style:disc; padding-left:20px; margin-bottom:20px;}
.rb-content ul li{color:var(--ink); font-size:15.5px; margin-bottom:8px; line-height:1.7;}

.rb-lead{font-size:18px !important; color:var(--gray) !important;}

/* Benefit blocks */
.rb-benefit{
  background:var(--cream); border-left:3px solid var(--gold); border-radius:4px;
  padding:20px 24px; margin-bottom:16px;
}
.rb-benefit h3{margin-top:0; color:var(--ink); font-size:17px;}
.rb-benefit p{color:var(--gray); font-size:14.5px; margin:0;}

/* CTA callout inline */
.rb-cta-box{
  background:var(--dark-color); color:#fff; border-radius:10px;
  padding:28px 30px; margin:30px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.rb-cta-box p{color:#e7e2d8 !important; margin:0 !important; font-size:15px !important; max-width:520px;}
.rb-cta-box .btn{flex-shrink:0;}

/* Destinations table */
.rb-table-wrap{overflow-x:auto; margin:20px 0 30px; border:1px solid var(--line); border-radius:8px;}
.rb-table{width:100%; border-collapse:collapse; min-width:640px; font-size:14.5px;}
.rb-table thead th{
  background:var(--dark-color); color:#fff; text-align:left; padding:14px 16px; font-weight:600; font-size:13px;
  text-transform:uppercase; letter-spacing:.03em;
}
.rb-table tbody td{padding:14px 16px; border-top:1px solid var(--line); color:var(--ink); vertical-align:top;}
.rb-table tbody tr:nth-child(even){background:var(--cream);}
.rb-table tbody td:first-child{font-weight:700; color:var(--secondary-color); white-space:nowrap;}

/* FAQ accordion (native details/summary, no JS required) */
.rb-faq{margin-top:8px;}
.rb-faq details{
  border:1px solid var(--line); border-radius:8px; padding:0; margin-bottom:12px; overflow:hidden; background:#fff;
}
.rb-faq summary{
  cursor:pointer; list-style:none; padding:16px 20px; font-weight:700; font-size:15.5px; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.rb-faq summary::-webkit-details-marker{display:none;}
.rb-faq summary::after{content:"+"; font-size:20px; color:var(--gold); font-weight:400; flex-shrink:0;}
.rb-faq details[open] summary::after{content:"\2212";}
.rb-faq details[open] summary{border-bottom:1px solid var(--line);}
.rb-faq .rb-faq-a{padding:16px 20px; color:var(--gray); font-size:14.5px; line-height:1.7;}

/* ---------- Sidebar ---------- */
.rb-sidebar{display:flex; flex-direction:column; gap:22px; position:sticky; top:100px;}
.rb-side-card{background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:26px;}
.rb-side-card h4{font-size:16px; margin-bottom:10px; color:var(--ink);}
.rb-side-card p{font-size:13.5px; color:var(--gray); margin-bottom:18px;}
.rb-side-card .btn{width:100%; text-align:center; display:block;}
.rb-toc{list-style:none;}
.rb-toc li{margin-bottom:10px;}
.rb-toc a{font-size:14px; color:var(--ink); font-weight:600;}
.rb-toc a:hover{color:var(--gold);}

/* ---------- Blog listing (index) ---------- */
.rb-listing-hero{background:var(--dark-color); color:#fff; padding:64px 0 52px; text-align:center;}
.rb-listing-hero h1{font-size:clamp(30px,4vw,44px); margin-bottom:14px;}
.rb-listing-hero p{color:rgba(255,255,255,0.75); max-width:560px; margin:0 auto; font-size:15.5px;}
.rb-post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; padding:64px 0;}
.rb-post-card{border:1px solid var(--line); border-radius:8px; overflow:hidden; transition:box-shadow .2s ease;}
.rb-post-card:hover{box-shadow:0 10px 30px rgba(0,0,0,0.1);}
.rb-post-card img{height:200px; width:100%; object-fit:cover;}
.rb-post-card .rb-post-body{padding:22px;}
.rb-post-card .rb-post-tag{color:var(--gold); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px; display:block;}
.rb-post-card h3{font-size:18px; margin-bottom:10px; line-height:1.35;}
.rb-post-card p{font-size:14px; color:var(--gray); margin-bottom:16px;}
.rb-post-card .rb-read-more{color:var(--gold); font-weight:700; font-size:13.5px;}

@media (max-width:991px){
  .rb-layout{grid-template-columns:1fr; padding:44px 0;}
  .rb-sidebar{position:static; flex-direction:row; flex-wrap:wrap;}
  .rb-sidebar .rb-side-card{flex:1; min-width:240px;}
  .rb-post-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .rb-post-grid{grid-template-columns:1fr; padding:40px 0;}
  .rb-cta-box{flex-direction:column; align-items:flex-start;}
  .rb-cta-box .btn{width:100%; text-align:center;}
}