/* ------------------------------------------------------------------
   hqt-botanical.css — Botanical Library + seasonal landers
   Purpose : styles for page-botanical.php (hub + 6 ingredient pages) and
             page-season.php (Monsoon / Diwali). Token-driven, matches the
             approved mockups/ingredient-seasonal.html contract.
   Refs    : hqt-tokens.css variables · docs/TRACKING_LEDGER.md row 47.
   ------------------------------------------------------------------ */

.hqt-bot__hero { background: linear-gradient(180deg, var(--hqt-cream), var(--hqt-white)); padding: 56px 0 44px; }
.hqt-bot__herogrid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; }
.hqt-bot__kicker { font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--hqt-forest); }
.hqt-bot__kicker a { color: inherit; text-decoration: none; }
.hqt-bot__hero h1 { font-family: var(--hqt-ff-display); font-size: clamp(30px, 4vw, 44px); font-weight: 600; color: var(--hqt-forest); line-height: 1.15; margin: 8px 0 0; }
.hqt-bot__latin { font-style: italic; color: var(--hqt-forest); font-size: 15px; margin-top: 6px; }
.hqt-bot__lead { margin-top: 16px; font-size: 16px; line-height: 1.7; max-width: 560px; }
.hqt-bot__photo img { width: 100%; height: auto; border-radius: 50%; aspect-ratio: 1; object-fit: cover; box-shadow: var(--hqt-shadow); }
.hqt-bot__facts { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.hqt-bot__fact { background: var(--hqt-white); border: 1px solid var(--hqt-line); border-radius: 12px; padding: 10px 16px; font-size: 12.5px; font-weight: 600; color: var(--hqt-forest); }
.hqt-bot__fact b { display: block; font-size: 14px; color: var(--hqt-forest); }

.hqt-bot__sec { padding: 44px 0; border-top: 1px solid var(--hqt-line); }
.hqt-bot__sec--mist { background: var(--hqt-cream); border-top: none; }
.hqt-bot__sec h2 { font-family: var(--hqt-ff-display); font-size: clamp(20px, 2.6vw, 28px); font-weight: 600; color: var(--hqt-forest); margin-bottom: 14px; }
.hqt-bot__what { font-size: 15px; line-height: 1.75; max-width: 680px; }
.hqt-bot__qa { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
.hqt-bot__qa h3 { font-family: var(--hqt-ff-display); font-size: 17px; color: var(--hqt-forest); margin-bottom: 8px; }
.hqt-bot__qa p { font-size: 14px; line-height: 1.65; }

.hqt-bot__prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.hqt-bot__prod { border: 1px solid var(--hqt-line); border-radius: 14px; padding: 18px; text-align: center; background: var(--hqt-white); text-decoration: none; color: var(--hqt-ink); transition: box-shadow .25s ease; }
.hqt-bot__prod:hover { box-shadow: var(--hqt-shadow-hover); }
.hqt-bot__prod img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; margin-bottom: 12px; }
.hqt-bot__prod b { display: block; font-family: var(--hqt-ff-display); color: var(--hqt-forest); }
.hqt-bot__pr { display: block; font-size: 14px; font-weight: 700; margin: 6px 0 12px; }
.hqt-bot__pr s { color: var(--hqt-forest); font-weight: 500; margin-left: 6px; }
.hqt-bot__blogs a { display: block; color: var(--hqt-forest); font-weight: 600; font-size: 14px; padding: 8px 0; text-decoration: none; border-bottom: 1px dashed var(--hqt-line); }

.hqt-bot__hubgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 34px; padding-bottom: 54px; }
.hqt-bot__hubcard { border: 1px solid var(--hqt-line); border-radius: 14px; padding: 18px; text-align: center; text-decoration: none; color: var(--hqt-ink); background: var(--hqt-white); transition: box-shadow .25s ease; }
.hqt-bot__hubcard:hover { box-shadow: var(--hqt-shadow-hover); }
.hqt-bot__hubcard img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; margin-bottom: 12px; }
.hqt-bot__hubcard b { display: block; font-family: var(--hqt-ff-display); font-size: 18px; color: var(--hqt-forest); }
.hqt-bot__hubcard span { font-size: 12.5px; font-style: italic; color: var(--hqt-forest); }

.hqt-sea__hero { background: var(--hqt-deep); color: #f2f5ec; padding: 64px 0; }
.hqt-sea__kicker { font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--hqt-gold, #e2a93b); }
.hqt-sea__hero h1 { font-family: var(--hqt-ff-display); font-size: clamp(30px, 4vw, 46px); font-weight: 600; line-height: 1.15; margin-top: 10px; color: #fff; }
.hqt-sea__hero p { margin-top: 14px; font-size: 16px; line-height: 1.7; color: #c9d4bb; max-width: 600px; }
.hqt-sea__sub { color: var(--hqt-forest); font-size: 14px; }
.hqt-sea__cta { margin-top: 26px; }

@media (max-width: 760px) {
	.hqt-bot__herogrid { grid-template-columns: 1fr; }
	.hqt-bot__qa { grid-template-columns: 1fr; }
	.hqt-bot__prods, .hqt-bot__hubgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .hqt-bot__prods, .hqt-bot__hubgrid { grid-template-columns: 1fr; } }