/* Coffee Beans page (templates/coffee_beans_page.html). Builds on spices_page.css (.sp-* layout) and home_stitch.css;
   only the coffee-specific components live here. */

.cb-page .sp-hero-img { object-position: center; }
/* tighter vertical rhythm than the shared .sp-section default (5.5rem / 3.75rem on mobile) */
.cb-page .sp-section { padding: 4rem 0; }
@media (max-width: 767.98px) { .cb-page .sp-section { padding: 2.75rem 0; } }
.cb-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; }
.cb-hero-actions .st-btn { height: 54px; padding: 0 2rem; font-size: .95rem; }
.cb-hero-actions .st-btn-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.cb-hero-actions .st-btn-secondary:hover { background: #fff; color: var(--st-ink); border-color: #fff; }

/* history */
.cb-history { background: var(--st-ivory-2); }
.cb-history-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.cb-history-media { display: grid; gap: 1.25rem; }
.cb-history-media figure { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; box-shadow: 0 20px 44px -18px rgba(36, 36, 36, .35); }
.cb-history-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-history-media figcaption { position: absolute; top: .8rem; left: .8rem; padding: .3rem .65rem; background: rgba(36, 36, 36, .78); color: #fff; font-size: .65rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-radius: 2px; }
@media (max-width: 991.98px) { .cb-history-grid { grid-template-columns: 1fr; } }

/* four stages */
.cb-steps { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.cb-steps::before { left: 12.5%; right: 12.5%; }
@media (max-width: 1199.98px) { .cb-steps { grid-template-columns: repeat(2, 1fr); padding-top: 0; } .cb-steps::before, .cb-steps .sp-step::before, .cb-steps .sp-step::after { display: none; } }
@media (max-width: 575.98px) { .cb-steps { grid-template-columns: 1fr; } }

/* cards */
.cb-cards { display: grid; gap: 1.5rem; }
.cb-cards-3 { grid-template-columns: repeat(3, 1fr); }
.cb-card { padding: 1.75rem 1.75rem 1.9rem; background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 4px; box-shadow: 0 8px 24px -6px rgba(36, 36, 36, .08); }
.cb-card h3 { margin: 0 0 .6rem; font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; color: var(--st-ink); }
.cb-card p { margin: 0; font-size: .95rem; line-height: 1.7; color: var(--st-muted); }
.cb-card > i { display: block; margin-bottom: 1rem; font-size: 1.15rem; color: #755b00; }
@media (max-width: 991.98px) { .cb-cards-3 { grid-template-columns: 1fr; } }

/* understanding beans: two editorial species cards */
.cb-understand { background: #f4eedf; }
.cb-page .cb-understand { padding: 2.5rem 0; }
.cb-understand .sp-center { margin-bottom: 1.75rem; }
.cb-understand .sp-italic { margin-top: .5rem; }
@media (max-width: 767.98px) { .cb-page .cb-understand { padding: 2rem 0; } }
.cb-understand .cb-types { max-width: 1120px; margin: 0 auto; }
.cb-understand .cb-type { padding: 1.625rem; text-align: left; background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 6px; box-shadow: 0 2px 8px -4px rgba(36, 36, 36, .08); }
.cb-understand .cb-type h3 { margin: 0 0 .25rem; font-size: 1.3rem; font-weight: 500; line-height: 1.25; letter-spacing: 0; color: var(--st-ink); }
.cb-understand .cb-type .cb-type-sub { margin: 0 0 .8rem; font-size: .72rem; font-weight: 500; line-height: 1.4; letter-spacing: .9px; text-transform: uppercase; color: #8a6a1c; }
.cb-understand .cb-type p { margin: 0; font-size: .875rem; font-weight: 400; line-height: 1.6; color: var(--st-muted); }

/* product showcase */
.cb-shop .sp-center { margin-bottom: 2.5rem; }
/* the cards are styled by products_page.css; undo the .st-home fonts so they match the Our Products page */
.cb-shop .shop-card { font-family: 'Poppins', sans-serif; }
.cb-shop .shop-card h2, .cb-shop .shop-card h3, .cb-shop .shop-card strong { font-family: inherit; }
.cb-shop-cta { margin-top: 2.5rem; text-align: center; }

/* brewing guide: text left, one image right */
.cb-brew { background: var(--st-ivory-2); }
.cb-brew-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: stretch; }
.cb-brew-intro { margin: 0 0 1.75rem; font-size: 1.05rem; line-height: 1.75; color: var(--st-muted); }
.cb-process { margin: 0 0 1.75rem; padding: 0; display: grid; gap: 1rem; }
.cb-process li { display: flex; gap: 1rem; align-items: flex-start; }
.cb-num { flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--st-primary); color: var(--st-ink); font-size: .9rem; font-weight: 700; }
.cb-process p { margin: .2rem 0 0; font-size: .95rem; line-height: 1.7; color: var(--st-muted); }
.cb-process strong { color: var(--st-ink); }
.cb-brew-tip { margin: 0; padding-left: 1rem; border-left: 3px solid var(--st-primary); font-size: .95rem; line-height: 1.7; color: var(--st-muted); }
.cb-brew-tip strong { color: var(--st-ink); }
.cb-brew-media { margin: 0; min-height: 360px; overflow: hidden; border-radius: 4px; box-shadow: 0 20px 44px -18px rgba(36, 36, 36, .35); }
.cb-brew-media img { width: 100%; height: 100%; object-fit: cover; object-position: 35% center; display: block; }
@media (max-width: 991.98px) { .cb-brew-grid { grid-template-columns: 1fr; } .cb-brew-media { min-height: 0; aspect-ratio: 3 / 2; } }

/* faq: Bootstrap accordion, tinted to match the solar page */
.cb-faq-wrap { max-width: 860px; }
/* Bootstrap's accordion defaults are blue (expanded bg/text, focus border, expanded chevron); map them to the EYD palette */
.cb-faq {
    --bs-accordion-active-bg: var(--st-ivory-2);
    --bs-accordion-active-color: var(--st-ink);
    --bs-accordion-btn-focus-border-color: var(--st-primary);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(244, 196, 48, .5);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23242424'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.cb-faq .accordion-item { border-color: var(--st-line); }
.cb-faq .accordion-button { font-weight: 600; font-size: 1rem; color: var(--st-ink); }
.cb-faq .accordion-button:not(.collapsed) { box-shadow: none; }
.cb-faq .accordion-button:focus { box-shadow: var(--bs-accordion-btn-focus-box-shadow); }
.cb-faq .accordion-body { line-height: 1.75; color: var(--st-muted); }

/* closing */
.cb-final { position: relative; padding: 7.5rem 0; min-height: 440px; display: flex; align-items: center; text-align: center; background: #1d1510; overflow: hidden; }
.cb-final-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .4; }
.cb-final-inner { position: relative; z-index: 1; width: 100%; }
.cb-final h2 { margin: 0 0 1.25rem; line-height: 1.15; font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -.03em; color: #fff; }
.cb-final p { margin: 0 auto 2.25rem; max-width: 520px; font-size: 1.05rem; color: rgba(255, 255, 255, .88); }
@media (max-width: 767.98px) { .cb-final { padding: 5rem 0; min-height: 0; } .cb-final .st-btn, .cb-hero-actions .st-btn { width: 100%; } }