/* =====================================================================
   360 HOTEL SOLUTIONS - blog.css
   Page-specific styles for the Blog list page.
   Reuses the global theme, header, footer, buttons, labels, hero glow.
   ===================================================================== */

.blog-hero{position:relative;overflow:hidden;background:var(--white);padding:clamp(52px,8vw,92px) 0 56px;text-align:center;}
.blog-hero-inner{position:relative;z-index:1;max-width:760px;margin:0 auto;}
.blog-hero .eyebrow{margin-bottom:22px;}
.blog-hero h1{font-size:clamp(32px,4.8vw,56px);line-height:1.08;letter-spacing:-0.025em;margin-bottom:18px;}
.blog-hero p{font-size:clamp(15.5px,1.6vw,18px);color:var(--muted);line-height:1.75;}

.blog-main{background:var(--bg);padding:0 0 96px;}
.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);gap:clamp(28px,4vw,52px);align-items:start;padding-top:clamp(40px,6vw,64px);}

.blog-content{min-width:0;}
.blog-list{display:flex;flex-direction:column;gap:24px;}
.blog-list .blog-loading,.blog-list .blog-empty{background:#fff;border:1px solid var(--gray);border-radius:var(--radius);padding:48px 24px;text-align:center;color:var(--muted);font-size:15px;}

.blog-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:32px;background:#fff;border:1px solid var(--gray);border-radius:100px;padding:10px 10px 10px 22px;}
.blog-page-status{font-size:13px;font-weight:700;color:var(--muted);}
.blog-page-btn{display:inline-flex;align-items:center;gap:6px;border:none;background:var(--bg);color:var(--navy);font-size:13.5px;font-weight:700;padding:10px 18px;border-radius:100px;cursor:pointer;transition:background-color .15s,color .15s;font-family:inherit;}
.blog-page-btn svg{width:14px;height:14px;flex-shrink:0;}
.blog-page-btn:hover:not(:disabled){background:var(--blue);color:#fff;}
.blog-page-btn:disabled{opacity:.4;cursor:not-allowed;}

.blog-aside{position:sticky;top:104px;display:flex;flex-direction:column;gap:16px;}
.sec-card-parent{background:#fff;border:1px solid var(--gray);border-radius:20px;padding:22px;box-shadow:0 24px 56px -34px rgba(2,15,77,0.2);}
.sec-card-parent h3{font-size:18px;line-height:1.3;margin-bottom:16px;}

.blog-tags{display:flex;flex-wrap:wrap;gap:8px;}
.blog-tag{display:inline-flex;align-items:center;padding:6px 14px;font-size:13px;font-weight:700;border-radius:100px;background:var(--bg);color:var(--navy);border:1px solid var(--gray);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s;font-family:inherit;}
.blog-tag:hover,.blog-tag.is-featured{background:var(--tint-blue);color:var(--blue);border-color:rgba(14,99,255,0.25);}

.blog-archive{display:grid;gap:12px;}
.blog-archive li{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13.5px;}
.blog-archive-link{color:var(--navy);font-weight:700;transition:color .15s;cursor:pointer;background:none;border:none;padding:0;font-family:inherit;text-align:left;}
.blog-archive-link:hover{color:var(--blue);}
.blog-archive-count{color:var(--muted-light);font-weight:700;flex-shrink:0;}

@media(max-width:920px){
  .blog-hero{padding:44px 0 42px;}
  .blog-main{padding-bottom:64px;}
  .blog-layout{grid-template-columns:1fr;}
  .blog-aside{position:static;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
}

@media(max-width:640px){
  .blog-aside{grid-template-columns:1fr;}
  .blog-pagination{flex-wrap:wrap;justify-content:center;padding:14px 18px;}
  .blog-page-status{order:3;width:100%;text-align:center;}
}

/* =====================================================================
   BLOG POST CARD
   PreviewBody is the entire card, fully self-contained per post (image,
   tags, everything authored directly into it). Root element must be
   exactly <article class="blog-post-card">...</article> so blog.js can
   add "blog-post-card-featured" to the first card of the default view
   as a plain string replace - color only, no extra markup.
   ===================================================================== */
.blog-post-card{background:#fff;border-radius:16px;box-shadow:0 20px 44px -30px rgba(2,15,77,0.28);overflow:hidden;}
.blog-post-card-image{width:100%;aspect-ratio:1200/630;object-fit:cover;display:block;}
.blog-post-card-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;}
.blog-post-card-tags{display:flex;flex-wrap:wrap;gap:6px;}
.blog-post-tag-pill{display:inline-flex;align-items:center;padding:3px 10px;font-size:10.5px;font-weight:700;border-radius:100px;background:var(--tint-blue);color:var(--blue);white-space:nowrap;}

.blog-post-card-featured{background:var(--navy);}
.blog-post-card-featured .text-gray-900{color:#fff;}
.blog-post-card-featured .text-gray-600{color:rgba(255,255,255,.78);}
.blog-post-card-featured .text-gray-500{color:rgba(255,255,255,.55);}
.blog-post-card-featured .text-blue-600{color:var(--cyan);}
.blog-post-card-featured .hover\:text-blue-600:hover{color:var(--cyan);}
.blog-post-card-featured .hover\:text-blue-700:hover{color:#fff;}
.blog-post-card-featured .blog-post-tag-pill{background:rgba(255,255,255,.12);color:#fff;}

/* =====================================================================
   TAILWIND UTILITY SHIM
   The blog admin (admin/controllers/blog/get-blogs.php) returns each
   post's card as literal HTML with Tailwind classes already baked in
   (see "PreviewBody" in the API response). This project ships no
   Tailwind build, so this is a hand-authored equivalent mapped to the
   360 Hotel Solutions theme tokens instead of Tailwind's default
   palette. Do not remove - the CMS-authored markup depends on these
   exact class names. "dark:*" classes are intentionally left unstyled:
   this site has no dark mode.
   ===================================================================== */
.bg-white{background:#fff;}
.rounded-2xl{border-radius:16px;}
.p-8{padding:32px;}
.shadow-sm{box-shadow:0 20px 44px -30px rgba(2,15,77,0.28);}
.flex{display:flex;}
.inline-flex{display:inline-flex;}
.items-center{align-items:center;}
.transition{transition:color .15s ease,background-color .15s ease,box-shadow .15s ease;}
.text-sm{font-size:13.5px;line-height:1.4;}
.text-2xl{font-size:24px;line-height:1.3;}
.font-semibold{font-weight:700;}
.text-gray-900{color:var(--navy);}
.text-gray-600{color:var(--muted);}
.text-gray-500{color:var(--muted-light);}
.text-blue-600{color:var(--blue);}
.mb-3{margin-bottom:12px;}
.mb-4{margin-bottom:16px;}
.mb-6{margin-bottom:24px;}
.mr-1{margin-right:4px;}
.ml-1{margin-left:4px;}
.w-4{width:16px;}
.h-4{height:16px;}
.hover\:text-blue-600:hover{color:var(--blue);}
.hover\:text-blue-700:hover{color:#0A4FCC;}