/* =================================================================
   The Bowl — review styles
   Score cards, star ratings, browse hubs, review grids and
   comparison tables. Markup comes from the TailMetric Core plugin
   and the review block patterns.
   ================================================================= */

:root {
	--bowl-star: #e8a317;
	--bowl-star-empty: var(--bowl-bark-200);
}

/* ---- Stars ------------------------------------------------------ */
.bowl-stars { display: inline-flex; gap: 2px; line-height: 1; }

.bowl-star { display: inline-block; font-size: 1.15em; line-height: 1; }
.bowl-star::before { content: "\2605"; }

.bowl-star.is-full::before { color: var(--bowl-star); }
.bowl-star.is-empty::before { color: var(--bowl-star-empty); }
.bowl-star.is-half::before {
	background: linear-gradient( 90deg, var(--bowl-star) 50%, var(--bowl-star-empty) 50% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---- Score card (single review) --------------------------------- */
.bowl-scorecard {
	background: #fff;
	border: 1px solid var(--bowl-bark-100);
	border-radius: 16px;
	padding: 24px;
	margin-bottom: 32px;
	box-shadow: 0 1px 2px rgba(77,56,44,.04), 0 8px 24px rgba(77,56,44,.06);
}

.bowl-scorecard__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.bowl-scorecard__rating { display: flex; align-items: baseline; gap: 4px; }
.bowl-scorecard__number {
	font-family: 'Fraunces', ui-serif, Georgia, serif;
	font-size: 2.6rem; font-weight: 900; line-height: 1;
	color: var(--bowl-bark-900);
}
.bowl-scorecard__outof { font-size: 1rem; font-weight: 600; color: var(--bowl-bark-500); }
.bowl-scorecard__head .bowl-stars { font-size: 1.25rem; }

.bowl-scorecard__verdict {
	margin: 14px 0 0;
	font-size: 1.05rem; line-height: 1.6;
	color: var(--bowl-bark-800);
}

.bowl-scorecard__rows { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.bowl-scorecard__row { display: grid; grid-template-columns: 110px 1fr 42px; align-items: center; gap: 12px; }
.bowl-scorecard__row::marker { content: none; }

.bowl-scorecard__label { font-size: .85rem; font-weight: 600; color: var(--bowl-bark-700); }
.bowl-scorecard__bar { height: 8px; border-radius: 999px; background: var(--bowl-bark-100); overflow: hidden; }
.bowl-scorecard__fill { display: block; height: 100%; border-radius: 999px; background: var(--bowl-leaf-500); }
.bowl-scorecard__value { font-size: .85rem; font-weight: 700; color: var(--bowl-bark-900); text-align: right; }

.bowl-scorecard__cost {
	margin: 18px 0 0; padding-top: 16px;
	border-top: 1px solid var(--bowl-bark-100);
	font-size: .95rem; color: var(--bowl-bark-700);
}
.bowl-scorecard__cost strong { font-size: 1.4rem; color: var(--bowl-leaf-700); }

.bowl-scorecard__cta { margin: 16px 0 0; }
.bowl-scorecard__disclosure { margin: 10px 0 0; font-size: .78rem; color: var(--bowl-bark-500); }

/* ---- Browse hubs ------------------------------------------------ */
.bowl-browse {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(240px, 1fr) );
	gap: 20px;
	margin: 32px 0;
}

.bowl-browse__card {
	background: #fff;
	border: 1px solid var(--bowl-bark-100);
	border-radius: 16px;
	padding: 20px;
	transition: transform .25s ease, box-shadow .25s ease;
}
.bowl-browse__card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(77,56,44,.1); }

.bowl-browse__title { margin: 0 0 10px; font-size: 1.15rem; }
.bowl-browse__title a { text-decoration: none; color: var(--bowl-bark-900); }
.bowl-browse__title a:hover { color: var(--bowl-leaf-700); }

.bowl-browse__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bowl-browse__list li { margin: 0; }
.bowl-browse__list a {
	display: inline-block;
	padding: 4px 10px; border-radius: 999px;
	background: var(--bowl-bark-50);
	font-size: .82rem; color: var(--bowl-bark-700); text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.bowl-browse__list a:hover { background: var(--bowl-leaf-100); color: var(--bowl-leaf-800); }

/* ---- Review grid ------------------------------------------------ */
.bowl-review-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax(260px, 1fr) );
	gap: 24px;
	margin: 32px 0;
}

.bowl-review-card {
	background: #fff;
	border: 1px solid var(--bowl-bark-100);
	border-radius: 16px;
	overflow: hidden;
	display: flex; flex-direction: column;
	box-shadow: 0 1px 2px rgba(77,56,44,.04), 0 8px 24px rgba(77,56,44,.06);
	transition: transform .25s ease, box-shadow .25s ease;
}
.bowl-review-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(77,56,44,.14); }

.bowl-review-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.bowl-review-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bowl-review-card__body { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.bowl-review-card__title { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.bowl-review-card__title a { text-decoration: none; color: var(--bowl-bark-900); }
.bowl-review-card__title a:hover { color: var(--bowl-leaf-700); }

.bowl-review-card__rating { display: flex; align-items: center; gap: 8px; }
.bowl-review-card__score { font-size: .85rem; font-weight: 700; color: var(--bowl-bark-700); }
.bowl-review-card__cost { margin: 0; font-size: .85rem; font-weight: 600; color: var(--bowl-leaf-700); }

/* ---- Comparison table ------------------------------------------- */
.bowl-compare { margin: 32px 0; overflow-x: auto; }
.bowl-compare table {
	width: 100%; border-collapse: collapse;
	background: #fff; border-radius: 12px; overflow: hidden;
	font-size: .92rem;
}
.bowl-compare th, .bowl-compare td {
	padding: 12px 14px; text-align: left;
	border-bottom: 1px solid var(--bowl-bark-100);
}
.bowl-compare thead th {
	background: var(--bowl-bark-50);
	font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
	color: var(--bowl-bark-700);
}
.bowl-compare tbody tr:last-child th,
.bowl-compare tbody tr:last-child td { border-bottom: 0; }
.bowl-compare tbody tr:hover { background: var(--bowl-bark-50); }

/* ---- Narrow screens --------------------------------------------- */
@media (max-width: 600px) {
	.bowl-scorecard { padding: 18px; }
	.bowl-scorecard__number { font-size: 2.1rem; }
	.bowl-scorecard__row { grid-template-columns: 92px 1fr 36px; gap: 8px; }
	.bowl-browse { gap: 14px; }
	.bowl-review-grid { gap: 16px; }
}