/* ===== HOPE Life Botanicals page ===== */

/* Hero */
.b-hero { position: relative; min-height: 78vh; display: flex; align-items: flex-end; overflow: hidden; padding-block: var(--space-20); }
.b-hero__bg { position: absolute; inset: 0; z-index: 0; }
.b-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.b-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,30,26,0.86) 6%, rgba(8,30,26,0.5) 45%, rgba(8,30,26,0.45) 100%); }
.b-hero__inner { position: relative; z-index: 2; max-width: 640px; color: #fff; padding-bottom: var(--space-6); }
.b-hero .eyebrow { color: var(--color-accent); }
.b-hero h1 { font-size: var(--text-3xl); color: #fff; letter-spacing: -0.02em; margin-block: var(--space-4) var(--space-5); }
.b-hero h1 em { font-style: italic; color: var(--color-accent); }
.b-hero__lead { font-size: var(--text-lg); color: rgba(255,255,255,0.9); max-width: 50ch; line-height: 1.55; margin-bottom: var(--space-8); }

/* Intro */
.b-intro { background: var(--color-bg); }
.b-intro__inner { text-align: center; }
.b-intro__inner .eyebrow { display: block; }
.b-intro__inner .section-title { margin-inline: auto; }
.b-intro p { color: var(--color-text-muted); font-size: var(--text-lg); line-height: 1.7; max-width: 58ch; margin-inline: auto; }
.b-intro p + p { margin-top: var(--space-5); }
.b-intro strong { color: var(--color-text); }

/* Gallery */
.b-gallery { background: var(--color-surface-2); }
.b-gallery__head { text-align: center; max-width: 60ch; margin: 0 auto var(--space-12); }
.b-gallery__head .eyebrow { display: block; }
.b-gallery__head .section-title { margin-inline: auto; }
.b-gallery__head .section-lead { color: var(--color-text-muted); font-size: var(--text-lg); margin-top: var(--space-3); }

.b-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: var(--space-5); max-width: 1080px; margin-inline: auto; }
.b-item { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--color-surface); display: flex; }
.b-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.16,1,0.3,1); }
.b-item:hover img { transform: scale(1.05); }
.b-item figcaption { position: absolute; inset: auto 0 0 0; padding: var(--space-12) var(--space-5) var(--space-5); background: linear-gradient(to top, rgba(8,30,26,0.92), rgba(8,30,26,0.0)); color: #fff; }
.b-item__tag { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.b-item h4 { font-size: var(--text-lg); margin-block: var(--space-1) var(--space-2); color: #fff; }
.b-item p { font-size: var(--text-sm); color: rgba(255,255,255,0.82); line-height: 1.5; }
/* Ingredients */
.b-ingredients { background: var(--color-bg); }
.b-ingredients__head { text-align: center; max-width: 60ch; margin: 0 auto var(--space-12); }
.b-ingredients__head .eyebrow { display: block; }
.b-ingredients__head .section-title { margin-inline: auto; }
.b-ingredients__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); max-width: 1080px; margin-inline: auto; }
.b-ing { text-align: center; }
.b-ing__icon { width: 56px; height: 56px; margin: 0 auto var(--space-4); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary); }
[data-theme='dark'] .b-ing__icon { color: var(--color-accent); background: var(--color-accent-soft); }
.b-ing h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-base); margin-bottom: var(--space-2); }
.b-ing p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; }

/* Impact */
.b-impact { background: var(--color-primary); color: #fff; }
[data-theme='dark'] .b-impact { background: var(--color-primary-soft); color: var(--color-text); }
.b-impact__inner { text-align: center; }
.b-impact .eyebrow { color: var(--color-accent); }
.b-impact .section-title { color: #fff; margin-inline: auto; }
[data-theme='dark'] .b-impact .section-title { color: var(--color-text); }
.b-impact p { color: rgba(255,255,255,0.88); font-size: var(--text-lg); line-height: 1.7; margin-block: var(--space-4) var(--space-8); }
[data-theme='dark'] .b-impact p { color: var(--color-text-muted); }
.b-impact .btn { margin-top: var(--space-2); }

/* Contact */
.b-contact { background: var(--color-surface-2); }
.b-contact__card { max-width: 640px; margin-inline: auto; text-align: center; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-2xl); padding: clamp(var(--space-10), 5vw, var(--space-16)) clamp(var(--space-6), 5vw, var(--space-12)); box-shadow: var(--shadow-md); }
.b-contact__card .eyebrow { display: block; }
.b-contact__card .section-title { margin-inline: auto; }
.b-contact__lead { color: var(--color-text-muted); font-size: var(--text-lg); line-height: 1.7; margin-block: var(--space-4) var(--space-8); }
.b-contact__rows { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-6); }
.b-contact__row { display: flex; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface-2); text-decoration: none; transition: transform var(--transition), box-shadow var(--transition); }
.b-contact__row:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.b-contact__icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary); flex-shrink: 0; }
[data-theme='dark'] .b-contact__icon { color: var(--color-accent); background: var(--color-accent-soft); }
.b-contact__row span { text-align: left; display: flex; flex-direction: column; }
.b-contact__row small { font-size: var(--text-xs); color: var(--color-text-faint); letter-spacing: 0.08em; text-transform: uppercase; }
.b-contact__row strong { font-size: var(--text-xl); color: var(--color-text); }
.b-contact__note { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-8); }
.b-contact__note strong { color: var(--color-text); }

/* Responsive */
@media (max-width: 940px) {
  .b-grid { grid-template-columns: repeat(2, 1fr); }
  .b-ingredients__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-5); }
}
@media (max-width: 720px) {
  .b-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .b-item figcaption { padding: var(--space-10) var(--space-4) var(--space-4); }
  .b-item p { display: none; }
}
@media (max-width: 460px) {
  .b-hero__cta { flex-direction: column; align-items: stretch; }
  .b-hero__cta .btn { width: 100%; }
}