/* ==========================================================================
   HailGeeks Blog — layout: containers, section rhythm, shared grids
   ========================================================================== */

.container {
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container--md { max-width: var(--container-md); }
.container--home { max-width: var(--container-home); padding: 0 clamp(18px, 4vw, 32px); }

/* Section surfaces */
.band-white { background: var(--color-surface); }
.band-page { background: var(--color-page); }
.band-pale { background: var(--color-pale-blue); }
.band-white + .band-white,
.band-top-divider { border-top: 1px solid var(--color-divider); }
.band-bottom-divider { border-bottom: 1px solid var(--color-divider); }

/* Shared card grids */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.grid-3--tight { gap: 18px; }

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .grid-3 { grid-template-columns: 1fr; }
}

/* Section heading row: title + "All guides →" link */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.section-head h2, .section-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--color-heading);
  margin: 0;
}

.section-title--sm { font-size: 20px; }

.arrow-link { color: var(--color-blue); font-weight: 700; }
.arrow-link:hover { color: var(--color-blue-hover); }
.arrow-link .fa-arrow-right { font-size: 11px; }

/* Hover lift shared by cards and pills */
.lift { transition: var(--ease-lift); }
.lift:hover { transform: translateY(-1px); }

/* ==========================================================================
   Homepage sections
   ========================================================================== */

.home-hero { background: linear-gradient(180deg, #eef4fb 0%, #f6f8fb 100%); }

.home-hero__inner {
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(32px, 4vw, 48px);
  text-align: center;
}

.home-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-blue);
  background: #e3eefc;
  border-radius: var(--radius-pill);
  padding: 8px 16px;
}

.home-hero__title {
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.06;
  color: var(--color-heading);
  margin: 20px auto 0;
  max-width: 820px;
  text-wrap: balance;
}

.home-hero__intro {
  font-size: clamp(16px, 2.1vw, 19px);
  line-height: 1.6;
  color: var(--color-home-body);
  margin: 16px auto 0;
  max-width: 620px;
}

/* Featured: lead article + side stack */
.feat-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 20px;
}

.side-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* "Smart moves after a storm" navy band */
.start-band {
  background: var(--color-navy);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 44px);
  color: #fff;
}

.start-band__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 24px;
}

.start-band__head h2 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
  color: #fff;
}

.start-band__note { font-size: 14.5px; color: #bcd0e3; }

.start-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.start-grid li {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-card);
  padding: 22px 22px 20px;
}

.start-grid__num {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
}

.start-grid h3 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 14px 0 0;
  color: #fff;
}

.start-grid p {
  font-size: 14.5px;
  line-height: 1.6;
  color: #cfe0f0;
  margin: 8px 0 16px;
}

.start-grid a {
  font-size: 14.5px;
  font-weight: 800;
  color: #7fbcff;
}

.start-grid a:hover { color: #fff; }
.start-grid a i { font-size: 12px; }

/* Category question grid */
.centered-head { text-align: center; margin-bottom: 26px; }

.centered-head h2 {
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--color-heading);
  margin: 0;
}

.centered-head p {
  font-size: 16px;
  color: var(--color-home-body);
  margin: 10px 0 0;
}

.q-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Latest + Recommended Guides two-column layout */
.read-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
}

.latest-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Recommended Guides (manually curated) */
.recommended-panel {
  background: var(--color-surface);
  border: 1px solid #e6ecf3;
  border-radius: var(--radius-lg);
  padding: 8px 20px;
}

.recommended-panel ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.recommended-panel li {
  display: flex;
  gap: 15px;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid #eef2f7;
}

.recommended-panel li:first-child { border-top: 0; }

.recommended-panel__num {
  font-size: 22px;
  font-weight: 900;
  color: #c3d3e6;
  line-height: 1;
  width: 26px;
  flex: none;
}

.recommended-panel a { min-width: 0; }

.recommended-panel .card__cat { display: block; }

.recommended-panel__title {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--color-heading);
  margin: 5px 0 0;
}

.recommended-panel a:hover .recommended-panel__title { color: var(--color-blue-hover); }

/* Homepage responsive */
@media (max-width: 920px) {
  .feat-grid { grid-template-columns: 1fr; }
  .start-grid { grid-template-columns: 1fr; }
  .q-grid { grid-template-columns: repeat(2, 1fr); }
  .read-grid { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 560px) {
  .q-grid { grid-template-columns: 1fr; }
  .latest-cards { grid-template-columns: 1fr; }
}