/* ============================================================
   Exchanged Timeline — Work Page Styles (work.css)
   Used by the [et_work] shortcode
   ============================================================ */

/* ── Wrapper ─────────────────────────────────────────────── */
.et-work-page {
	max-width: 820px;
	margin: 0 auto;
	font-family: inherit;
	color: inherit;
	line-height: 1.7;
}

/* ── Header ──────────────────────────────────────────────── */
.et-work-header {
	margin-bottom: 2rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid #e5e5e5;
}

.et-work-name {
	margin: 0 0 .3rem;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.25;
}

.et-work-subtitle {
	margin: 0 0 .6rem;
	font-size: 1.05rem;
	color: #646970;
	font-style: italic;
}

.et-work-byline {
	margin: 0 0 .9rem;
	font-size: .95rem;
	color: #3c434a;
}

.et-work-byline a {
	color: #2271b1;
	text-decoration: none;
}
.et-work-byline a:hover { text-decoration: underline; }

.et-work-meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.2rem;
	font-size: .85rem;
	color: #646970;
}

.et-work-meta li { margin: 0; }

.et-meta-label {
	display: inline-block;
	font-weight: 600;
	color: #3c434a;
	margin-right: .35rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .72rem;
}

/* ── Description ─────────────────────────────────────────── */
.et-work-description-section {
	margin-bottom: 2.25rem;
}

.et-work-description {
	position: relative;
	overflow: hidden;
	transition: max-height .3s ease;
}

.et-work-description--collapsed {
	max-height: 240px;
}

.et-work-description--collapsed::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4em;
	background: linear-gradient( to bottom, rgba(255,255,255,0), rgba(255,255,255,1) );
	pointer-events: none;
}

.et-work-description p {
	margin-top: 0;
	margin-bottom: 1.1em;
}

.et-work-description h2 {
	font-size: 1.15rem;
	font-weight: 600;
	margin: 1.6em 0 .55em;
	padding-bottom: .25em;
	border-bottom: 1px solid #e5e5e5;
}

.et-work-description-toggle {
	display: inline-block;
	margin-top: .35rem;
	padding: .35rem .8rem;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	background: #fff;
	color: #2271b1;
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .12s, border-color .12s;
}
.et-work-description-toggle:hover {
	background: #f0f6fc;
	border-color: #2271b1;
}

/* ── Section heading (reused) ────────────────────────────── */
.et-section-heading {
	font-size: 1.1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #3c434a;
	margin: 0 0 1rem;
	padding-bottom: .4rem;
	border-bottom: 2px solid #e5e5e5;
}

/* ── Editions ────────────────────────────────────────────── */
.et-work-editions {
	margin-bottom: 2.5rem;
}

.et-edition-group {
	margin-bottom: 1.75rem;
}

.et-edition-group:last-child { margin-bottom: 0; }

.et-group-heading {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0 0 .65rem;
	font-size: .95rem;
	font-weight: 600;
}

.et-group-tag {
	display: inline-block;
	padding: .15rem .55rem;
	border-radius: 3px;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.et-group-tag--local {
	background: #e7f1fb;
	color: #134e7a;
	border: 1px solid #b5d6f0;
}

.et-group-tag--external {
	background: #fcf2e3;
	color: #784d09;
	border: 1px solid #ecd49a;
}

.et-group-host {
	font-size: .78rem;
	color: #8c8f94;
	font-weight: 400;
	font-style: italic;
}

.et-edition-subgroup {
	margin: 0 0 .75rem;
	padding: .25rem 0 0 .85rem;
	border-left: 2px solid #e5e5e5;
}

.et-edition-subgroup:last-child { margin-bottom: 0; }

.et-subgroup-heading {
	margin: 0 0 .4rem;
	font-size: .78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #646970;
}

/* ── Edition list ────────────────────────────────────────── */
.et-edition-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.et-edition-item {
	display: flex;
	gap: .85rem;
	padding: .65rem .8rem;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	background: #fafafa;
	transition: box-shadow .15s, border-color .15s;
}

.et-edition-item:hover {
	box-shadow: 0 2px 6px rgba(0,0,0,.06);
	border-color: #dcdcde;
}

.et-edition-thumb {
	flex-shrink: 0;
	width: 56px;
	height: 80px;
	border-radius: 3px;
	overflow: hidden;
	border: 1px solid #e0e0e0;
	background: #fff;
}

.et-edition-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.et-edition-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .15rem;
}

.et-edition-head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .4rem;
}

.et-edition-format {
	display: inline-block;
	padding: .08rem .45rem;
	border-radius: 3px;
	background: #e8edf4;
	color: #134e7a;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .04em;
	flex-shrink: 0;
}

.et-edition-title {
	font-weight: 600;
	font-size: .9rem;
	color: #1d2327;
}

.et-edition-pd {
	display: inline-block;
	padding: .05rem .35rem;
	border-radius: 3px;
	background: #e8f4ea;
	color: #1a7a2a;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .03em;
}

.et-edition-diff {
	font-size: .72rem;
	color: #2271b1;
	letter-spacing: .1em;
}

.et-edition-lineage,
.et-edition-source,
.et-edition-price,
.et-edition-notes {
	font-size: .8rem;
	color: #646970;
}

.et-edition-source a {
	color: #2271b1;
	text-decoration: none;
}
.et-edition-source a:hover { text-decoration: underline; }

.et-edition-price {
	font-weight: 600;
	color: #1a7a2a;
}

.et-edition-notes {
	font-style: italic;
}

.et-edition-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: .35rem;
}

/* Buttons reuse the author page button styles where possible */
.et-work-btn {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .3rem .7rem;
	border-radius: 4px;
	font-size: .8rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s, border-color .15s;
}

.et-work-btn--free {
	background: #e8f4ea;
	color: #1a7a2a;
	border: 1px solid #b5debb;
}
.et-work-btn--free:hover {
	background: #d0ecda;
	border-color: #8fcfa0;
	color: #1a7a2a;
}

.et-work-btn--store {
	background: #2271b1;
	color: #fff;
	border: 1px solid #2271b1;
}
.et-work-btn--store:hover {
	background: #135e96;
	border-color: #135e96;
	color: #fff;
}

.et-work-btn--product {
	background: #fff;
	color: #2271b1;
	border: 1px solid #c3c4c7;
}
.et-work-btn--product:hover {
	background: #f0f6fc;
	border-color: #2271b1;
}

/* ── Action bar: Report (left) + Add to reading list (right) ── */
.et-work-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 1.5rem 0;
}

.et-work-actions .et-work-feedback,
.et-work-actions .et-work-reading-list {
	margin: 0;
}

/* Legacy rule — kept for any custom CSS that still targets this class. */
.et-work-feedback {
	margin-bottom: 1.5rem;
	text-align: right;
}

.et-feedback-btn {
	display: inline-block;
	padding: .35rem .85rem;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	background: #f6f7f7;
	color: #646970;
	font-size: .8rem;
	text-decoration: none;
	transition: border-color .15s, color .15s, background .15s;
}
.et-feedback-btn:hover {
	border-color: #8c8f94;
	color: #3c434a;
	background: #ececed;
	text-decoration: none;
}

/* ── Disclosure ──────────────────────────────────────────── */
.et-work-disclosure {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid #e5e5e5;
}

.et-work-disclosure p {
	font-size: .8rem;
	color: #8c8f94;
	margin: 0;
	font-style: italic;
	line-height: 1.6;
}

/* ── Error (admin only) ──────────────────────────────────── */
.et-work-error {
	background: #fcf0f1;
	border: 1px solid #f0b5b7;
	border-radius: 4px;
	padding: .75rem 1rem;
	color: #8a1f24;
	font-size: .9rem;
}

/* ── Responsive ──────────────────────────────────────────── */
@media ( max-width: 540px ) {
	.et-edition-item { flex-direction: column; }
	.et-edition-thumb { width: 72px; height: 100px; }
	.et-work-name { font-size: 1.45rem; }
}