/* Lore — awards / banners / carousel / badges / stats (round 2, task 5 + 8).
   Enqueued conditionally (see functions.php); reuses base.css tokens. */

/* ---------------- Hero carousel ---------------- */
.lore-carousel {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--paper-alt);
	aspect-ratio: 16 / 6;
	min-height: 220px;
	margin-bottom: var(--space-8);
}
@media (max-width: 640px) {
	.lore-carousel { aspect-ratio: 4 / 5; border-radius: var(--radius-md); }
}
.lore-carousel__track { position: relative; width: 100%; height: 100%; }
.lore-carousel__slide {
	position: absolute; inset: 0; width: 100%; height: 100%;
	transition: transform .5s ease;
}
@media (prefers-reduced-motion: reduce) {
	.lore-carousel__slide { transition: none; }
}
.lore-carousel__link { display: block; width: 100%; height: 100%; position: relative; color: var(--white); text-decoration: none; }
.lore-carousel__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lore-carousel__img--fallback { width: 100%; height: 100%; background: linear-gradient(135deg, var(--ember), var(--teal)); }
.lore-carousel__copy {
	position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-6) var(--space-8);
	background: linear-gradient(0deg, rgba(0,0,0,.62), rgba(0,0,0,0));
	color: #fff;
}
.lore-carousel__headline { margin: 0 0 var(--space-1); font-size: 1.6rem; font-family: Georgia, 'Source Serif 4', serif; }
.lore-carousel__subline { margin: 0; opacity: .92; font-size: .95rem; max-width: 560px; }
@media (max-width: 640px) { .lore-carousel__copy { padding: var(--space-4); } .lore-carousel__headline { font-size: 1.2rem; } }

.lore-carousel__arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 38px; height: 38px; border-radius: var(--radius-pill);
	background: rgba(0,0,0,.45); color: #fff; border: 0; display: grid; place-items: center; cursor: pointer;
}
.lore-carousel__arrow--prev { left: var(--space-3); }
.lore-carousel__arrow--next { right: var(--space-3); }
.lore-carousel__arrow:hover, .lore-carousel__arrow:focus-visible { background: rgba(0,0,0,.7); }

.lore-carousel__dots { position: absolute; bottom: var(--space-3); left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.lore-carousel__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); border: 0; padding: 0; cursor: pointer; }
.lore-carousel__dot.is-active { background: #fff; width: 20px; border-radius: 4px; }
.lore-carousel__playpause {
	position: absolute; top: var(--space-3); right: var(--space-3);
	width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; border: 0; cursor: pointer; display: grid; place-items: center;
}

/* ---------------- Award ribbon (story card corner) ---------------- */
.lore-award-ribbon {
	position: absolute; top: var(--space-2); left: var(--space-2);
	display: inline-flex; align-items: center; gap: 4px;
	background: var(--ember); color: #fff; font-size: .68rem; font-weight: 700;
	padding: 3px 8px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
	text-transform: uppercase; letter-spacing: .02em;
}
.lore-award-ribbon--shortlist { background: var(--teal); }
.lore-award-ribbon--honourable-mention { background: var(--ink-soft); }
.lore-award-ribbon span:last-child { white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }

/* ---------------- Award block (story page) ---------------- */
.lore-award-block { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); margin: var(--space-5) 0; background: var(--ember-light); }
.lore-award-block__title { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--space-3); font-size: 1.05rem; color: var(--ember-dark); }
.lore-award-block__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.lore-award-block__item { display: flex; align-items: center; gap: var(--space-2); font-size: .92rem; }
.lore-award-block__badge { font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--ember); color: #fff; font-size: .72rem; text-transform: uppercase; }
.lore-award-block__item--shortlist .lore-award-block__badge { background: var(--teal); }
.lore-award-block__item--honourable-mention .lore-award-block__badge { background: var(--ink-soft); }
.lore-award-block__year { color: var(--ink-faint); margin-left: auto; }

/* ---------------- Profile badges (trophy shelf) ---------------- */
/* Named .lore-profile-badge (NOT .lore-badge) — base.css already defines
   .lore-badge as the small absolutely-positioned notification-count dot
   (position:absolute;top:4px;right:4px;height:18px). Reusing that class name
   here made every trophy-shelf chip inherit those properties (cascade is
   per-property, not per-rule), collapsing the flex row to zero height and
   stacking all chips invisibly in a corner — caught live in QA
   (qa/r2/shots/awards_qa_badges_crop.py: "element is not visible"). */
.lore-profile-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.lore-profile-badge {
	display: inline-flex; align-items: center; gap: 5px;
	border: 1px solid var(--line); border-radius: var(--radius-pill);
	padding: 4px 10px; font-size: .78rem; font-weight: 600; background: var(--white);
	position: static; min-width: 0; height: auto;
}
.lore-profile-badge--verified-writer { color: var(--teal-dark); border-color: var(--teal); }
.lore-profile-badge--award-winner, .lore-profile-badge--featured-writer { color: var(--ember-dark); border-color: var(--ember); }
.lore-profile-badge--staff, .lore-profile-badge--ambassador { color: #3D5A80; border-color: #3D5A80; }
.lore-profile-badge--premium { color: #8E5572; border-color: #8E5572; }

/* ---------------- Reading-list banner ---------------- */
.lore-reading-list-banner { margin-bottom: var(--space-8); }
.lore-reading-list-banner__head {
	border-radius: var(--radius-lg); background-color: var(--paper-alt); background-size: cover; background-position: center;
	padding: var(--space-8) var(--space-6); margin-bottom: var(--space-3); min-height: 120px; display: flex; align-items: flex-end;
}
.lore-reading-list-banner__title { color: #fff; margin: 0; font-family: Georgia, 'Source Serif 4', serif; font-size: 1.4rem; text-shadow: 0 1px 6px rgba(0,0,0,.4); }

/* ---------------- Public Awards page ---------------- */
.lore-awards-hero { text-align: center; padding: var(--space-10) var(--space-4); background: linear-gradient(135deg, var(--ember-light), var(--paper-alt)); border-radius: var(--radius-lg); margin-bottom: var(--space-6); }
.lore-awards-hero h1 { font-family: Georgia, 'Source Serif 4', serif; font-size: 2.1rem; margin: 0 0 var(--space-2); }
.lore-awards-hero p { max-width: 560px; margin: 0 auto; color: var(--ink-soft); }
.lore-awards-editions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-5); }
.lore-awards-category { margin-bottom: var(--space-8); }
.lore-awards-category__title { font-size: 1.2rem; border-bottom: 2px solid var(--ember); display: inline-block; padding-bottom: 4px; margin-bottom: var(--space-4); }
.lore-awards-entry { position: relative; }
.lore-awards-entry__status { display: block; margin-top: var(--space-1); font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--ember-dark); }
.lore-awards-entry--shortlist .lore-awards-entry__status { color: var(--teal-dark); }
.lore-awards-entry--honourable-mention .lore-awards-entry__status { color: var(--ink-faint); }

/* ---------------- Stats dashboard ---------------- */
.lore-stats { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); background: var(--white); }
.lore-stats__toolbar { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-bottom: var(--space-4); }
.lore-stats__group { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.lore-stats__toggle {
	border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft);
	border-radius: var(--radius-pill); padding: 5px 12px; font-size: .82rem; cursor: pointer;
}
.lore-stats__toggle[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.lore-stats__series-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; border-radius: var(--radius-pill); padding: 4px 10px; border: 1px solid var(--line); }
.lore-stats__series-toggle--reads { color: var(--ember-dark); }
.lore-stats__series-toggle--votes { color: var(--teal-dark); }
.lore-stats__series-toggle--comments { color: var(--ink-soft); }

.lore-stats__totals { display: flex; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-4); }
.lore-stats__stat { display: flex; flex-direction: column; }
.lore-stats__stat-val { font-size: 1.5rem; font-weight: 700; }
.lore-stats__stat-label { font-size: .78rem; color: var(--ink-faint); }

.lore-stats__chart-wrap { position: relative; margin-bottom: var(--space-5); }
.lore-stats__svg { width: 100%; height: auto; display: block; }
.lore-stats__gridline { stroke: var(--line); stroke-width: 1; }
.lore-stats__axis-label { font-size: 9px; fill: var(--ink-faint); }
.lore-stats__point { cursor: pointer; }
.lore-stats__point:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.lore-stats__tooltip {
	position: absolute; transform: translate(-50%, -100%);
	background: var(--ink); color: #fff; font-size: .78rem; padding: 4px 8px; border-radius: 4px; pointer-events: none; white-space: nowrap;
}
.lore-stats__empty, .lore-stats__error { color: var(--ink-faint); font-size: .9rem; padding: var(--space-6) 0; text-align: center; }

.lore-stats__table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-5); font-size: .88rem; }
.lore-stats__table th, .lore-stats__table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }

.lore-stats__demo { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
@media (max-width: 640px) { .lore-stats__demo { grid-template-columns: 1fr; } .lore-stats__toolbar { flex-direction: column; align-items: flex-start; } }
.lore-stats__demo-block h3 { font-size: .9rem; margin: 0 0 var(--space-2); }
.lore-stats__bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lore-stats__bars li { display: grid; grid-template-columns: 90px 1fr 40px; align-items: center; gap: 8px; font-size: .8rem; }
.lore-stats__bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lore-stats__bar-track { background: var(--paper-alt); border-radius: var(--radius-pill); height: 8px; overflow: hidden; }
.lore-stats__bar-fill { display: block; height: 100%; background: var(--teal); border-radius: var(--radius-pill); }
.lore-stats__bar-count { text-align: right; color: var(--ink-faint); }
.lore-stats__attribution { font-size: .74rem; color: var(--ink-faint); margin-top: var(--space-4); }
.lore-stats__attribution a { color: inherit; }