/* brewing.com — component styles. Depends on tokens in base.css. */

/* ---------- Type helpers ---------- */
.brewing-eyebrow {
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--copper);
	margin: 0 0 var(--sp-2);
}
.brewing-eyebrow--green { color: var(--hop-green); }
.brewing-meta { font-size: var(--fs-meta); color: var(--ash); margin: 0; }
.brewing-card-title { font-family: var(--font-display); font-size: var(--fs-card-title); font-weight: 500; line-height: 1.3; margin: 0 0 var(--sp-2); }
.brewing-card-small { font-family: var(--font-display); font-size: var(--fs-card-sm); font-weight: 500; margin: 0 0 var(--sp-1); }
.brewing-body-sm { font-size: var(--fs-ui); color: var(--ash); line-height: 1.5; margin: 0; }
.brewing-label-placeholder { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--ash); }

/* ---------- Buttons ---------- */
.brewing-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
	min-height: 48px; padding: 0 22px; border-radius: var(--radius);
	font-family: var(--font-body); font-size: var(--fs-ui); font-weight: 600;
	border: none; cursor: pointer; text-decoration: none; white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.brewing-btn--dense { min-height: 44px; }
.brewing-btn--primary { background: var(--copper); color: var(--paper); }
.brewing-btn--primary:hover, .brewing-btn--primary:focus-visible { background: var(--copper-hover); }
.brewing-btn--commerce { background: var(--charcoal); color: var(--paper); }
.brewing-btn--commerce:hover, .brewing-btn--commerce:focus-visible { background: var(--copper); }
.brewing-btn--directory { background: var(--hop-green); color: var(--paper); }
.brewing-btn--directory:hover, .brewing-btn--directory:focus-visible { background: var(--hop-green-hover); }
.brewing-btn--outline { background: transparent; color: var(--charcoal); border: 1.5px solid var(--charcoal); }
.brewing-btn--outline:hover, .brewing-btn--outline:focus-visible { background: var(--charcoal); color: var(--paper); }
.brewing-btn--full { width: 100%; }

.brewing-pill {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--sp-4);
	border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--paper);
	font-size: var(--fs-ui); font-weight: 500; color: var(--charcoal); cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.brewing-pill[aria-pressed="true"], .brewing-pill--active { background: var(--charcoal); color: var(--paper); border-color: var(--charcoal); }
.brewing-pill:hover:not([aria-pressed="true"]) { border-color: var(--charcoal); }

/* ---------- Cards ---------- */
.brewing-card {
	display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
	padding: var(--sp-5); transition: border-color 0.15s ease;
}
a.brewing-card:hover, a.brewing-card:focus-visible { border-color: var(--copper); }

.brewing-editorial-card { padding: 0; overflow: hidden; }
.brewing-editorial-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--parchment); overflow: hidden; }
.brewing-editorial-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brewing-editorial-card__body { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
.brewing-card-excerpt { font-size: var(--fs-ui); color: var(--ash); line-height: 1.55; margin: var(--sp-2) 0 0; }
.brewing-card-cta { display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-3); font-size: var(--fs-ui); font-weight: 600; color: var(--copper); }
.brewing-card-cta svg { width: 16px; height: 16px; }

/* ---------- Badges ---------- */
.brewing-badge {
	position: absolute; top: var(--sp-3); left: var(--sp-3);
	padding: var(--sp-1) var(--sp-3); border-radius: var(--radius);
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
	color: var(--paper);
}
.brewing-badge--copper { background: var(--copper); }
.brewing-badge--charcoal { background: var(--charcoal); }
.brewing-badge--hop-green { background: var(--hop-green); }

/* ---------- Photo placeholders (dev/staging only; production always uses real images) ---------- */
.brewing-photo-placeholder {
	width: 100%; height: 100%; min-height: 80px;
	background: repeating-linear-gradient(45deg, var(--parchment), var(--parchment) 10px, var(--paper) 10px, var(--paper) 20px);
	display: flex; align-items: center; justify-content: center;
	color: var(--ash); font-family: var(--font-mono); font-size: var(--fs-label);
}
.brewing-photo-placeholder--square { aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; }

/* ---------- Disclosure ---------- */
.brewing-disclosure-sentence { font-size: var(--fs-meta); color: var(--ash); }
.brewing-disclosure-sentence a { text-decoration: underline; }
.brewing-disclosure-chip {
	display: inline-block; background: var(--parchment); border-radius: var(--radius);
	padding: var(--sp-3) var(--sp-4); font-size: 13px; color: var(--ash);
}
.brewing-disclosure-chip a { text-decoration: underline; color: var(--charcoal); }

/* ---------- Product modules ---------- */
.brewing-product-compact {
	display: grid; grid-template-columns: 88px 1fr auto; gap: var(--sp-4); align-items: center;
	background: var(--paper); border-left: 3px solid var(--copper); border-radius: var(--radius);
	padding: var(--sp-4); margin: var(--sp-5) 0;
}
.brewing-product-compact__media img,
.brewing-product-compact__media .brewing-photo-placeholder { width: 88px; height: 88px; border-radius: var(--radius); object-fit: contain; background: var(--parchment); }
@media (max-width: 640px) {
	.brewing-product-compact { grid-template-columns: 64px 1fr; }
	.brewing-product-compact .brewing-btn { grid-column: 1 / -1; }
}

/* ---------- Single post layout ---------- */
@media (max-width: 900px) {
	.brewing-single-layout { grid-template-columns: 1fr !important; gap: var(--sp-6) !important; }
	.brewing-single-sidebar { order: 2; }
}

/* ---------- Product module, full ---------- */
.brewing-product-full {
	display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-5);
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
	padding: var(--sp-5); margin: var(--sp-5) 0;
}
.brewing-product-full__media { display: flex; align-items: flex-start; justify-content: center; }
.brewing-product-full__media img { width: 100%; max-width: 220px; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: var(--radius); }
.brewing-product-full__name { font-family: var(--font-display); font-size: var(--fs-section-sm); font-weight: 500; line-height: 1.25; margin: 0 0 var(--sp-4); }
.brewing-product-full__reasons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.brewing-label { font-size: var(--fs-eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ash); margin: 0 0 var(--sp-1); }
.brewing-label--green { color: var(--green-text); }
.brewing-product-full__action { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: var(--sp-4); }
.brewing-product-full__price { display: flex; flex-direction: column; }
.brewing-price { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.brewing-price-sub { font-size: var(--fs-eyebrow); color: var(--ash); }
.brewing-product-full__direct { margin: var(--sp-3) 0 0; font-size: var(--fs-meta); }
.brewing-product-full__direct a { text-decoration: underline; }
@media (max-width: 768px) {
	.brewing-product-full { grid-template-columns: 1fr; }
	.brewing-product-full__media img { max-width: 160px; }
	.brewing-product-full__reasons { grid-template-columns: 1fr; gap: var(--sp-4); }
	.brewing-product-full__action { flex-direction: column; align-items: stretch; }
	.brewing-product-full__action .brewing-btn { width: 100%; }
}

.brewing-featured-slot .brewing-product-full,
.brewing-single-sidebar .brewing-product-full { grid-template-columns: 1fr; }
.brewing-featured-slot .brewing-product-full__reasons { grid-template-columns: 1fr; }
.brewing-featured-slot .brewing-product-full__media img { max-width: 180px; margin: 0 auto; }

/* ---------- Article body ---------- */
.brewing-article { max-width: 68ch; }
.brewing-article p { font-size: var(--fs-body); line-height: 1.65; }
.brewing-article h2 { font-size: var(--fs-section-sm); margin: var(--sp-6) 0 var(--sp-3); }
.brewing-article h3 { font-size: var(--fs-card-title); margin: var(--sp-5) 0 var(--sp-2); }
.brewing-article ul, .brewing-article ol { padding-left: var(--sp-5); }
.brewing-article li { margin-bottom: var(--sp-2); }
.brewing-article a { color: var(--copper); text-decoration: underline; }
.brewing-article img { border-radius: var(--radius); }

.brewing-breadcrumb { font-size: var(--fs-meta); color: var(--ash); margin-bottom: var(--sp-3); }
.brewing-breadcrumb a { text-decoration: none; }
.brewing-breadcrumb a:hover { text-decoration: underline; }

.brewing-details-row {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-4);
	border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
	padding: var(--sp-4) 0; margin: var(--sp-5) 0;
}
.brewing-details-row dt { font-size: var(--fs-eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ash); }
.brewing-details-row dd { margin: var(--sp-1) 0 0; font-size: 17px; }

/* ---------- Filter bar (browse) ---------- */
.brewing-filter-bar {
	position: sticky; top: 0; z-index: 30; background: var(--cream);
	border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
	padding: var(--sp-3) 0; margin-bottom: var(--sp-5);
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
}
.brewing-filter-pills { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.brewing-filter-pills .brewing-pill { min-height: 40px; font-size: var(--fs-meta); }
.brewing-filter-pills .brewing-pill span { color: var(--ash); margin-left: var(--sp-1); }
.brewing-filter-pills .brewing-pill--active span { color: inherit; opacity: 0.7; }

/* ---------- Brewery finder ---------- */
.brewing-finder-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; }
.brewing-finder-map { height: 620px; border-radius: var(--radius); border: 1px solid var(--line); position: sticky; top: var(--sp-5); background: var(--green-tint); }
.brewing-finder-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.brewing-brewery-card { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-4); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); }
.brewing-brewery-card__photo { width: 96px; height: 96px; border-radius: var(--radius); background: var(--parchment); display: flex; align-items: center; justify-content: center; color: var(--ash); font-size: 28px; }
.brewing-brewery-card h3 { font-family: var(--font-display); font-size: var(--fs-card-title); margin: 0 0 var(--sp-1); }
.brewing-tag-chip { display: inline-block; background: var(--green-tint); color: var(--green-text); border-radius: var(--radius-pill); padding: 2px var(--sp-3); font-size: var(--fs-eyebrow); font-weight: 600; margin-right: var(--sp-1); }
.brewing-brewery-card__links { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); font-size: var(--fs-meta); }
.brewing-brewery-card__links a { color: var(--green-text); text-decoration: underline; font-weight: 600; }
@media (max-width: 900px) {
	.brewing-finder-layout { grid-template-columns: 1fr; }
	.brewing-finder-map { height: 340px; position: static; order: -1; }
	.brewing-brewery-card { grid-template-columns: 64px 1fr; }
	.brewing-brewery-card__photo { width: 64px; height: 64px; font-size: 22px; }
}

/* ---------- Email capture ---------- */
.brewing-email-form { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.brewing-email-form input[type="email"] {
	flex: 1; min-width: 0; height: 48px; padding: 0 var(--sp-4);
	border: 1px solid var(--input-border); border-radius: var(--radius);
	font-size: var(--fs-ui); font-family: var(--font-body); background: var(--paper); color: var(--charcoal);
}
.brewing-email-form__status { font-size: var(--fs-meta); margin-top: var(--sp-2); min-height: 1.2em; }
.brewing-email-form__status[data-state="ok"] { color: var(--hop-green); }
.brewing-email-form__status[data-state="error"] { color: var(--copper); }
@media (max-width: 480px) { .brewing-email-form { flex-direction: column; } }

/* ---------- Header ---------- */
.brewing-site-header { background: var(--cream); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.brewing-site-header__bar {
	max-width: var(--content-max); margin: 0 auto; padding: var(--sp-3) var(--sp-5);
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
}
.brewing-wordmark { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--charcoal); }
.brewing-wordmark span { color: var(--copper); }
.brewing-primary-nav { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.brewing-primary-nav a {
	display: inline-flex; align-items: center; height: 44px; padding: 0 var(--sp-3);
	border-radius: var(--radius); font-size: var(--fs-ui); font-weight: 500; color: var(--charcoal);
}
.brewing-primary-nav a:hover, .brewing-primary-nav a:focus-visible { background: var(--parchment); }
.brewing-header-actions { display: flex; align-items: center; gap: var(--sp-2); }
.brewing-icon-btn {
	width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); color: var(--charcoal);
}
.brewing-icon-btn:hover, .brewing-icon-btn:focus-visible { border-color: var(--copper); }
.brewing-menu-toggle { display: none; }
.brewing-mobile-menu { display: none; }

@media (max-width: 768px) {
	.brewing-primary-nav { display: none; }
	.brewing-menu-toggle { display: inline-flex; }
	.brewing-mobile-menu.is-open { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
	.brewing-mobile-menu a { display: flex; align-items: center; height: 44px; padding: 0 var(--sp-5); font-size: var(--fs-ui); border-bottom: 1px solid var(--line); }
}

/* ---------- Footer ---------- */
.brewing-site-footer { background: var(--parchment); border-top: 1px solid var(--line); padding-block: var(--sp-7); }
.brewing-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--sp-6); }
.brewing-footer-grid h4 { font-family: var(--font-body); font-size: var(--fs-meta); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ash); margin-bottom: var(--sp-3); }
.brewing-footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.brewing-footer-grid a { font-size: var(--fs-ui); color: var(--charcoal); }
.brewing-footer-grid a:hover { color: var(--copper); }
.brewing-footer-legal { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); font-size: var(--fs-meta); color: var(--ash); }
@media (max-width: 768px) { .brewing-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .brewing-footer-grid { grid-template-columns: 1fr; } }

/* ---------- Homepage sections (inline 2-col grids collapse to 1 col on mobile) ---------- */
@media (max-width: 768px) {
	.brewing-hero { grid-template-columns: 1fr !important; }
	.brewing-hero form { flex-direction: column; }
	.brewing-hero form button { width: 100%; }
	.brewing-container[style*="grid-template-columns:1.4fr"],
	.brewing-container[style*="grid-template-columns:1.2fr"] {
		grid-template-columns: 1fr !important;
	}
}

/* ---------- Editor placeholder (wp-admin only) ---------- */
.brewing-editor-placeholder {
	border: 1px dashed var(--input-border); border-radius: var(--radius); padding: var(--sp-4);
	background: var(--parchment); font-family: var(--font-body); font-size: var(--fs-ui);
}