/* blog.css */

/* ————————————————————————————————————————————
   FONT & GLOBAL
   ———————————————————————————————————————————— */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/Outfit-Regular.woff2') format('woff2'),
       url('fonts/Outfit-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/Outfit-Medium.woff2') format('woff2'),
       url('fonts/Outfit-Medium.woff') format('woff');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/Outfit-SemiBold.woff2') format('woff2'),
       url('fonts/Outfit-SemiBold.woff') format('woff');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/Outfit-Bold.woff2') format('woff2'),
       url('fonts/Outfit-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/Outfit-ExtraBold.woff2') format('woff2'),
       url('fonts/Outfit-ExtraBold.woff') format('woff');
}

:root{
  --header-h: 72px;
  --hero-h-d: 88vh;
  --hero-h-m: 420px;
  --curtain-overlap: 16vh;
}

*{ box-sizing: border-box; }

html, body{
  margin:0; padding:0;
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.5;
  color:#132a39;
  background:#fff;
}

a{ color:inherit; text-decoration:none; }

.curtain{ overflow-x:hidden; padding-inline:16px; }
.scene{ position:relative; width:100%; }

.card{
  border-radius:24px;
  background:#ffffff;
}

/* Scene 1 sticky (desktop) */
#scene1{
  position:sticky;
  top:var(--header-h);
  margin-top:var(--header-h);
  z-index:0;
}

.good-health-hero{
  min-height: var(--hero-h-d);
  display:flex;
  align-items:flex-end;
  padding:48px 128px 56px;
  background:#fff;
  box-shadow: 0 10px 40px rgba(0,0,0,0.06);
}

#scene2{
  z-index:1;
  background:#fff;
  margin-top: calc(-1 * var(--curtain-overlap));
  padding-top: calc(var(--curtain-overlap) + 24px);
}

.curtain.is-crossing .good-health-hero{
  box-shadow: 0 20px 60px rgba(0,0,0,0.10);
}

/* — HERO CONTENT — */
.hero-content{ max-width:1200px; margin:0 auto; width:100%; display:flex; flex-direction:column; padding-right:48px; }
.hero-title{ font-size:56px; font-weight:500; margin:0 0 12px; }
.hero-subtitle{ font-size:24px; font-weight:500; margin:0 0 32px; max-width:800px; }
.category-chips{ display:flex; flex-wrap:wrap; gap:16px; }
.chip{ display:inline-flex; align-items:center; padding:12px 20px; background:#f1f3f4; border-radius:9999px; font-weight:600; font-size:14px; cursor:pointer; }
.chip:hover{ background:#e8eaed; }

/* — MAIN ARTICLE — */
.hawaa-blog-section{ padding:80px 0; background:#fff; }
.hawaa-blog-container{ display:grid; grid-template-columns:1fr 350px; gap:32px; max-width:1400px; margin:0 auto; padding:0 128px; }

.main-article{ border-radius:24px; background:#fff; overflow:hidden; }
.main-article-image{
  height:400px; min-height:400px;
  border-radius:24px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:#c8b4a1;
}
.main-article-image img{
  width:100%; height:100%;
  object-fit:contain;
  border-radius:inherit;
  display:block;
}
.main-article-content{ padding:24px; }
.main-article-meta{ font-size:14px; color:#6b7280; margin-bottom:16px; }
.main-article-meta .author-info span+span{ margin:0 8px; }
.main-article-title{ font-size:48px; font-weight:700; margin:0 0 16px; }
.main-article-excerpt{ font-size:20px; color:#6b7280; margin:0 0 24px; }
.main-article-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.main-article-tags .tag{ background:#e0f2fe; color:#0369a1; padding:4px 12px; border-radius:9999px; font-size:12px; font-weight:500; text-transform:uppercase; }

/* — SIDEBAR — */
.sidebar-articles{ display:flex; flex-direction:column; gap:20px; }
.sidebar-article{ display:flex; align-items:flex-start; gap:16px; background:#fff; border-radius:24px; overflow:hidden; padding:14px 0; height:190px; }
.sidebar-article-image{ flex-shrink:0; width:80px; height:80px; border-radius:12px; background:#c8b4a1; display:flex; align-items:center; justify-content:center; }
.sidebar-article-image img{ width:100%; height:100%; object-fit:cover; }
.sidebar-article-content{ flex:1; display:flex; flex-direction:column; padding:0 14px; }
.sidebar-article-title{ font-size:20px; font-weight:600; margin:0 0 8px; }
.sidebar-article-snippet{ font-size:16px; color:#6b7280; margin:0 0 auto; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sidebar-article-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.sidebar-article-tags .tag{ background:#e0f2fe; color:#0369a1; padding:4px 12px; border-radius:9999px; font-size:12px; font-weight:500; text-transform:uppercase; }

/* — RESPONSIVE — */
@media (max-width:1200px){
  .good-health-hero{ padding:40px 64px 48px; }
  .hawaa-blog-container{ padding:0 64px; }
}
@media (max-width:991px){
  :root{ --curtain-overlap:12vh; }
  .hawaa-blog-container{ grid-template-columns:1fr; padding:0 24px; }
  .main-article-title{ font-size:36px; }
  .main-article-excerpt{ font-size:18px; }
  .sidebar-article{ height:auto; }
  .sidebar-article-image{ width:70px; height:70px; }
}
@media (max-width:600px){
  /* Remove curtain reveal scroll */
  #scene1{ position:static; top:auto; margin-top:0; }
  #scene2{ margin-top:0; padding-top:0; }
  .curtain.is-crossing .good-health-hero{ box-shadow:none; }

  /* 16px side gutter, 32px vertical paddings */
  .curtain{ padding-inline:16px; }
  .good-health-hero{ padding:32px 0; min-height:auto; }
  .hawaa-blog-section{ padding:32px 0; }
  .hawaa-blog-container{ padding:0; grid-template-columns:1fr; gap:24px; }

  /* Hero chips always visible */
  .hero-content{ padding-right:0; }
  .category-chips{ gap:12px; flex-wrap:wrap; }

  /* Main article image: 200px on mobile */
  .main-article-image{ height:200px!important; min-height:200px!important; }

  /* Sidebar: image on right */
  .sidebar-article{ flex-direction:row-reverse; height:auto; }
  .sidebar-article-image{ width:72px; height:72px; }

  /* Text scaling */
  .hero-title{ font-size:32px; }
  .hero-subtitle{ font-size:18px; }
  .main-article-title{ font-size:28px; }
  .main-article-excerpt{ font-size:16px; }
  .sidebar-article-title{ font-size:16px; }
  .sidebar-article-snippet{ font-size:14px; }
}