/* AllAboutPlaya — Blog post detail styles (S5).
   Ported from the PlayaDreams blog-post <style> block and re-coloured to this
   site's palette (--blue #0170B9 etc, defined in site.css :root). Linked ONLY on
   the /blog/<slug>/ detail page via $page_extra_css. Fonts: Playfair Display for
   headings, Source Sans 3 for body (already loaded by fonts.css). */

/* --- Hero banner --------------------------------------------------------- */
.post-hero{background:linear-gradient(135deg,var(--blue) 0%,var(--blue-dark) 100%);color:#fff;padding:60px 0 54px;text-align:center}
.post-hero .container{max-width:850px}
.post-hero .post-cat{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;background:rgba(255,255,255,.18);color:#fff;padding:4px 12px;border-radius:3px;margin-bottom:16px}
.post-hero h1{font-family:'Playfair Display',serif;font-size:2.3rem;line-height:1.25;margin-bottom:16px;font-weight:700}
.post-hero .post-meta{font-size:.9rem;opacity:.92}

/* --- Article wrapper ----------------------------------------------------- */
.post-detail-section{padding:44px 0 56px;background:var(--bg)}
.post-body{max-width:800px;margin:0 auto;background:var(--white);padding:40px 46px 48px;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.07)}
.post-body .post-lead-img{width:100%;max-height:440px;object-fit:cover;border-radius:4px;margin-bottom:30px}
.post-body .post-lead-img-placeholder{width:100%;height:300px;background:linear-gradient(135deg,#c8e6f7 0%,#a0cfe8 100%);display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:3rem;border-radius:4px;margin-bottom:30px}

.post-body p{margin-bottom:20px;line-height:1.8;font-size:1.02rem;color:var(--text-mid)}
.post-body h2{font-family:'Playfair Display',serif;font-size:1.6rem;color:var(--text-dark);margin:38px 0 16px;font-weight:700}
.post-body h3{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--blue-dark);margin:26px 0 10px;font-weight:700}
.post-body a{color:var(--blue);text-decoration:underline}
.post-body a:hover{color:var(--blue-dark)}
.post-body ul,.post-body ol{margin:0 0 20px 22px;color:var(--text-mid);line-height:1.7}
.post-body li{margin-bottom:8px}
.post-body img{max-width:100%;height:auto;border-radius:4px}

/* --- Quick answer callout ------------------------------------------------ */
.quick-answer{background:var(--blue-light);border-left:4px solid var(--blue);padding:20px 26px;border-radius:6px;margin:28px 0;line-height:1.7;color:var(--text-dark)}
.quick-answer strong{color:var(--blue-dark)}

/* --- Comparison table ---------------------------------------------------- */
.table-scroll{overflow-x:auto;margin:24px 0 36px}
.comparison-table{width:100%;border-collapse:collapse;font-size:.95rem}
.comparison-table th,.comparison-table td{border:1px solid var(--border);padding:12px 14px;text-align:left;vertical-align:top}
.comparison-table th{background:var(--blue);color:#fff;font-weight:600}
.comparison-table tr:nth-child(even) td{background:#f7fafd}
.comparison-table td:first-child{font-weight:600;color:var(--text-dark)}

/* --- Fact box ------------------------------------------------------------ */
.fact-box{background:var(--blue-light);border:1px solid #cfe6f7;border-radius:8px;padding:24px 30px;margin:30px 0}
.fact-box h3{margin-top:0;color:var(--blue-dark)}
.fact-box ul{margin:0;padding-left:20px}
.fact-box li{margin-bottom:10px;line-height:1.6;color:var(--text-mid)}

/* --- FAQ ----------------------------------------------------------------- */
.faq-item{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.faq-item:last-child{border-bottom:none}
.faq-item .faq-q{font-weight:700;color:var(--blue-dark);margin-bottom:6px;font-size:1.02rem}

/* --- Related list -------------------------------------------------------- */
.related-list{list-style:none;padding:0;margin:0}
.related-list li{padding:12px 16px;background:var(--bg);border-left:3px solid var(--blue);border-radius:4px;margin-bottom:10px;font-size:.95rem}
.related-list a{color:var(--text-dark);text-decoration:none;font-weight:600}
.related-list a:hover{color:var(--blue)}

/* --- Call to action (points to a real page of this site) ----------------- */
.post-cta{background:linear-gradient(135deg,var(--blue) 0%,var(--blue-dark) 100%);color:#fff;text-align:center;padding:38px 24px;border-radius:10px;margin:44px auto 0;max-width:800px}
.post-cta h2{font-family:'Playfair Display',serif;color:#fff;margin:0 0 8px;font-size:1.5rem}
.post-cta p{color:rgba(255,255,255,.9);margin:0 0 18px}
.post-cta .btn-cta{display:inline-block;background:#fff;color:var(--blue-dark);padding:12px 26px;border-radius:3px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;font-size:.85rem;text-decoration:none;transition:transform .15s}
.post-cta .btn-cta:hover{transform:translateY(-2px);color:var(--blue-dark)}

/* --- Back link ----------------------------------------------------------- */
.back-link{display:inline-block;margin:28px 0 0;color:var(--blue);text-decoration:none;font-weight:600}
.back-link:hover{color:var(--blue-dark)}

@media (max-width:640px){
  .post-hero h1{font-size:1.7rem}
  .post-body{padding:28px 22px 32px}
}