/* layout: magazine-style blog — navy/gold header, card-grid hub, editorial article
   template with hero image, TL;DR callout, fact table, FAQ accordion, related-posts grid */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap');

:root{
  --navy:#0A2740; --navy-2:#123a5c; --gold:#EECB98; --gold-deep:#c9a24b;
  --paper:#faf7f0; --paper-2:#f1ece0; --ink:#1c2630; --ink-soft:#5c6773; --line:#e6e0d2;
}
*{box-sizing:border-box;}
body.blog-body{
  margin:0; font-family:"Poppins", sans-serif; color:var(--ink); background:#fff;
}
a{ text-decoration:none; }

/* ---- shared top bar ---- */
.blog-topbar{ background:var(--navy); padding:14px 0; }
.blog-topbar .wrap{ max-width:1080px; margin:0 auto; padding:0 20px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.blog-topbar a.blog-logo-link{ display:flex; align-items:center; gap:10px; }
.blog-topbar img{ height:34px; }
.blog-topbar .blog-logo-link span{ color:#fff; font-weight:600; font-family:"Montserrat",sans-serif; }
.blog-topbar nav a{ color:rgba(255,255,255,.75); font-size:13.5px; margin-left:20px; }
.blog-topbar nav a:hover, .blog-topbar nav a.active{ color:var(--gold); }

/* ---- breadcrumb ---- */
.blog-crumb{ max-width:1080px; margin:18px auto 0; padding:0 20px; font-size:12.5px; color:var(--ink-soft); }
.blog-crumb a{ color:var(--navy-2); }
.blog-crumb span{ margin:0 6px; }

/* ---- hub hero ---- */
.blog-hub-hero{ max-width:1080px; margin:0 auto; padding:28px 20px 10px; }
.blog-hub-hero .eyebrow{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); font-weight:700; }
.blog-hub-hero h1{ font-family:"Montserrat",sans-serif; font-weight:700; font-size:clamp(28px,5vw,42px); color:var(--navy); margin:10px 0 8px; }
.blog-hub-hero p.lede{ font-size:15.5px; color:var(--ink-soft); max-width:620px; }

/* ---- card grid (hub index) ---- */
.blog-grid{ max-width:1080px; margin:24px auto 60px; padding:0 20px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:860px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .blog-grid{ grid-template-columns:1fr; } }
.blog-card{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s; }
.blog-card:hover{ box-shadow:0 14px 34px rgba(10,39,64,.14); transform:translateY(-2px); }
.blog-card .thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--paper-2); }
.blog-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-card .body{ padding:16px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.blog-card .tag{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-deep); font-weight:700; }
.blog-card h3{ font-family:"Montserrat",sans-serif; font-size:17.5px; color:var(--navy); margin:0; line-height:1.3; }
.blog-card p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin:0; flex:1; }
.blog-card .meta{ font-size:11.5px; color:#8a93a0; margin-top:4px; }
.blog-card .read-more{ color:var(--navy-2); font-weight:600; font-size:13px; margin-top:6px; }
.blog-card .read-more i{ font-size:11px; margin-left:4px; }

/* ---- article hero ---- */
.article-hero{ position:relative; }
.article-hero .hero-img{ width:100%; height:clamp(240px,40vw,420px); object-fit:cover; display:block; }
.article-hero .hero-overlay{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,39,64,.88) 0%, rgba(10,39,64,.35) 55%, rgba(10,39,64,.15) 100%); display:flex; align-items:flex-end; }
.article-hero .hero-text{ max-width:800px; margin:0 auto; padding:0 20px 28px; width:100%; }
.article-hero .eyebrow{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.article-hero h1{ font-family:"Montserrat",sans-serif; font-weight:700; font-size:clamp(24px,4.2vw,36px); color:#fff; margin:8px 0 6px; line-height:1.2; }
.article-hero .hero-meta{ font-size:12.5px; color:rgba(255,255,255,.75); }

/* ---- TL;DR callout ---- */
.tldr-box{ background:#fdf1dc; border:1px solid var(--gold); border-radius:10px; padding:20px 22px; margin:-30px auto 0; max-width:800px; position:relative; z-index:2; box-shadow:0 10px 30px rgba(10,39,64,.12); }
.tldr-box .label{ font-weight:700; letter-spacing:.08em; font-size:12px; text-transform:uppercase; color:var(--navy); }
.tldr-box p{ margin:8px 0 0; font-size:14.5px; line-height:1.65; color:var(--ink); }

/* ---- article body ---- */
.article-body{ max-width:800px; margin:50px auto; padding:0 20px; }
.article-body p{ font-size:15.5px; line-height:1.78; color:#2b3744; margin:0 0 18px; }
.article-body h2{ font-family:"Montserrat",sans-serif; font-weight:700; color:var(--navy); font-size:25px; margin:44px 0 14px; border-bottom:2px solid var(--gold); padding-bottom:8px; }
.article-body h3{ font-family:"Montserrat",sans-serif; font-weight:600; color:var(--navy); font-size:18px; margin:26px 0 10px; }
.article-body figure{ margin:26px 0; }
.article-body figure img{ width:100%; border-radius:10px; display:block; }
.article-body figcaption{ font-size:12.5px; color:#8a93a0; margin-top:7px; }
.article-body ul.plain{ padding-left:20px; font-size:15px; color:#2b3744; }
.article-body ul.plain li{ margin-bottom:8px; line-height:1.6; }

/* amenity/photo mini-grid */
.mini-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:22px 0; }
@media (max-width:560px){ .mini-grid{ grid-template-columns:repeat(2,1fr); } }
.mini-grid figure{ margin:0; }
.mini-grid img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; }
.mini-grid figcaption{ text-align:center; font-weight:600; color:var(--navy); font-size:12.5px; margin-top:6px; }

/* fact table */
table.facts{ width:100%; border-collapse:collapse; margin:18px 0; font-size:14.5px; }
table.facts th, table.facts td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); }
table.facts th{ width:40%; color:var(--ink-soft); font-weight:600; }

/* FAQ accordion */
.faq{ margin-top:8px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; text-align:left; background:none; border:none; padding:16px 0; font-weight:600; font-size:15.5px; color:var(--navy); display:flex; justify-content:space-between; gap:12px; cursor:pointer; font-family:inherit; }
.faq-q::after{ content:"+"; font-size:20px; color:var(--gold-deep); flex:none; }
.faq-item.active .faq-q::after{ content:"\2013"; }
.faq-a{ display:none; padding:0 0 16px; font-size:14.5px; color:#2b3744; line-height:1.7; }
.faq-item.active .faq-a{ display:block; }

/* key-takeaways box */
.takeaways{ background:var(--paper-2); border-radius:10px; padding:22px 24px; margin-top:24px; }
.takeaways li{ margin-bottom:8px; }

/* related posts */
.related{ max-width:800px; margin:50px auto 0; padding:0 20px; }
.related h2{ font-family:"Montserrat",sans-serif; font-weight:700; color:var(--navy); font-size:22px; margin-bottom:16px; }
.related-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:560px){ .related-grid{ grid-template-columns:1fr; } }
.related-card{ border:1px solid var(--line); border-radius:10px; padding:14px 16px; display:block; }
.related-card .tag{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-deep); font-weight:700; }
.related-card h4{ font-family:"Montserrat",sans-serif; font-size:14.5px; color:var(--navy); margin:6px 0 0; line-height:1.35; }

/* CTA */
.blog-cta{ background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); color:#fff; border-radius:12px; padding:30px; text-align:center; margin:44px auto 0; max-width:800px; }
.blog-cta h2{ border:none !important; color:#fff !important; margin-top:0 !important; }
.blog-cta p{ color:rgba(255,255,255,.8) !important; margin-bottom:0 !important; }
.blog-cta a.btn{ display:inline-block; margin-top:14px; background:var(--gold); color:var(--navy) !important; font-weight:700; padding:12px 28px; border-radius:6px; }
.blog-cta .phone{ display:block; margin-top:10px; font-size:13px; color:rgba(255,255,255,.75); }
.blog-cta .phone a{ color:var(--gold); }

.legal-note{ max-width:800px; margin:36px auto 0; padding:0 20px; font-size:12px; color:#8a93a0; }

footer.blog-footer{ background:var(--navy); color:rgba(255,255,255,.65); font-size:12px; padding:28px 16px; margin-top:50px; }
footer.blog-footer .wrap{ max-width:1080px; margin:0 auto; }
footer.blog-footer a{ color:var(--gold); }