/* ==========================================================================
   Adult OT — Page-level composition (homepage hero, news, sidebar cards)
   ========================================================================== */

/* ============================================================== hero ===== */

.aot-hero {
	position: relative;
	isolation: isolate;
	margin-bottom: var(--aot-space-6);
	border: 1px solid var(--aot-border);
	border-radius: var(--aot-radius-lg);
	overflow: hidden;
	background-color: var(--aot-bg);
}

.aot-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.aot-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 65% 50%;
	display: block;
}

/* Copy never sits directly on high-detail architecture: a directional veil
   darkens the left where the text lives, per VIS-0.5 section 9. */
.aot-hero__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg,
			var(--aot-veil-strong) 0%,
			var(--aot-veil) 38%,
			rgba(14, 16, 18, .55) 62%,
			rgba(14, 16, 18, .35) 100%),
		linear-gradient(180deg,
			rgba(14, 16, 18, .35) 0%,
			transparent 35%,
			rgba(14, 16, 18, .65) 100%);
}

/* WEB-1.1: the hero was pushing the real news content well below the fold.
   Vertical padding tightened (was 32-72px) so the latest news starts higher
   while the artwork keeps its presence. */
.aot-hero__inner {
	position: relative;
	max-width: 620px;
	padding: clamp(28px, 4vw, 52px) clamp(20px, 4vw, 56px);
}

.aot-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--aot-space-2);
	margin-bottom: var(--aot-space-4);
	font-size: var(--aot-caption);
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--aot-bronze-hi);
}

.aot-hero__eyebrow::before {
	content: "";
	width: 26px;
	height: 1px;
	background: var(--aot-bronze);
}

.aot-hero__title {
	margin: 0 0 var(--aot-space-4);
	font-family: var(--aot-font-display);
	font-size: clamp(30px, 5vw, var(--aot-h1));
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: .02em;
	color: var(--aot-text);
	text-shadow: 0 2px 18px rgba(0, 0, 0, .8);
}

.aot-hero__lede {
	margin: 0 0 var(--aot-space-5);
	max-width: 52ch;
	font-size: 16px;
	line-height: 1.6;
	color: var(--aot-text-secondary);
}

.aot-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aot-space-3);
}

.aot-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aot-space-5);
	margin-top: var(--aot-space-5);
	padding-top: var(--aot-space-4);
	border-top: 1px solid rgba(85, 64, 42, .5);
}

.aot-fact__value {
	display: block;
	font-family: var(--aot-font-display);
	font-size: 22px;
	font-weight: 600;
	color: var(--aot-text);
	line-height: 1.2;
}

.aot-fact__label {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--aot-text-muted);
}

@media (max-width: 860px) {
	.aot-hero__inner { max-width: none; }

	.aot-hero__veil {
		background:
			linear-gradient(180deg,
				rgba(14, 16, 18, .72) 0%,
				rgba(14, 16, 18, .86) 55%,
				var(--aot-veil-strong) 100%);
	}

	.aot-hero__actions .aot-btn { flex: 1 1 100%; }
	.aot-hero__facts { gap: var(--aot-space-4); }
}

/* ============================================================== news ===== */

.aot-news {
	background: var(--aot-surface);
	border: 1px solid var(--aot-border);
	border-radius: var(--aot-radius-md);
	margin-bottom: var(--aot-space-5);
	overflow: hidden;
}

.aot-news__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--aot-space-3);
	padding: var(--aot-space-3) var(--aot-space-4);
	background: linear-gradient(180deg, rgba(32, 36, 42, .92), rgba(23, 26, 30, .92));
	border-bottom: 1px solid var(--aot-border-accent);
}

.aot-news__title {
	margin: 0;
	font-family: var(--aot-font-display);
	font-size: 19px;
	font-weight: 600;
	color: var(--aot-text);
	flex: 1 1 auto;
	min-width: 0;
}

.aot-news__date {
	font-size: var(--aot-caption);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--aot-bronze-hi);
	white-space: nowrap;
}

.aot-news__author {
	font-size: var(--aot-caption);
	color: var(--aot-text-muted);
}

.aot-news__body {
	padding: var(--aot-space-4);
	color: var(--aot-text-secondary);
	line-height: 1.65;
}

.aot-news__body a { color: var(--aot-bronze); }
.aot-news__body img { border-radius: var(--aot-radius-sm); }

.aot-news__foot {
	padding: 0 var(--aot-space-4) var(--aot-space-4);
	text-align: right;
}

/* Announcement strip above the news (see news.tickers.html.twig). */
.aot-ticker {
	margin-bottom: var(--aot-space-5);
	border: 1px solid var(--aot-border);
	border-left: 3px solid var(--aot-bronze);
	border-radius: var(--aot-radius-sm);
	background: var(--aot-surface);
	overflow: hidden;
}

.aot-ticker__row {
	display: flex;
	align-items: baseline;
	gap: var(--aot-space-3);
	padding: 10px var(--aot-space-4);
	border-bottom: 1px solid var(--aot-border);
	font-size: 14px;
	color: var(--aot-text-secondary);
}

.aot-ticker__row:last-child { border-bottom: 0; }

.aot-ticker__icon {
	flex: 0 0 auto;
	align-self: center;
	opacity: .8;
}

.aot-ticker__date {
	flex: 0 0 auto;
	font-size: var(--aot-caption);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--aot-text-muted);
	white-space: nowrap;
}

.aot-ticker__body { min-width: 0; }
.aot-ticker__body a { color: var(--aot-bronze); }

@media (max-width: 560px) {
	.aot-ticker__row { flex-wrap: wrap; }
	.aot-ticker__body { flex: 1 1 100%; }
}

/* =========================================================== sidebar ===== */

.aot-card {
	background: var(--aot-surface);
	border: 1px solid var(--aot-border);
	border-radius: var(--aot-radius-md);
	overflow: hidden;
}

.aot-card--accent { border-color: var(--aot-border-accent); }

.aot-card__head {
	padding: var(--aot-space-3) var(--aot-space-4);
	font-family: var(--aot-font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--aot-bronze-hi);
	background: linear-gradient(180deg, rgba(32, 36, 42, .9), rgba(23, 26, 30, .9));
	border-bottom: 1px solid var(--aot-border);
}

.aot-card__body {
	padding: var(--aot-space-4);
	font-size: 14px;
	color: var(--aot-text-secondary);
}

.aot-stat-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.aot-stat-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--aot-space-3);
	padding: 8px 0;
	border-bottom: 1px solid var(--aot-border);
}

.aot-stat-list li:last-child { border-bottom: 0; }

.aot-stat-list dt,
.aot-stat-list .aot-stat__k { color: var(--aot-text-muted); font-size: 13px; }

.aot-stat-list .aot-stat__v { color: var(--aot-text); font-weight: 600; }

.aot-quick-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.aot-quick-links li { border-bottom: 1px solid var(--aot-border); }
.aot-quick-links li:last-child { border-bottom: 0; }

.aot-quick-links a {
	display: block;
	padding: 10px var(--aot-space-4);
	color: var(--aot-text-secondary);
	border-left: 2px solid transparent;
	font-size: 14px;
}

.aot-quick-links a:hover {
	color: var(--aot-text);
	background: var(--aot-bronze-subtle);
	border-left-color: var(--aot-bronze);
	text-decoration: none;
}

/* =============================================== MyAAC content wrappers === */

/* Core pages render into these. Neutralise legacy chrome so the theme's own
   surfaces are what the player sees. */
#ContentHelper,
.Content { background: transparent; border: 0; }

.aot-content > table:not(.aot-table) { margin-bottom: var(--aot-space-4); }

/* MyAAC outputs bare <b>/<h1> headings inside page content */
.aot-content h1:first-child,
.aot-content h2:first-child { margin-top: 0; }

/* ====================================== long-form content (WEB-2) ======== */

/* Rules and other editorial pages are prose, not data. Constrain the measure
   and give headings/lists room, so a long page does not become one wide block
   of text stretched across the full card. */
.aot-prose {
	max-width: 68ch;
}

.aot-prose h2 {
	margin: var(--aot-space-6) 0 var(--aot-space-3);
	font-size: var(--aot-h4);
	letter-spacing: .04em;
	color: var(--aot-bronze-hi);
}

.aot-prose h2:first-child { margin-top: 0; }

.aot-prose h3 {
	margin: var(--aot-space-5) 0 var(--aot-space-2);
	font-size: 16px;
}

.aot-prose p {
	margin: 0 0 var(--aot-space-4);
	color: var(--aot-text-secondary);
	line-height: 1.7;
}

.aot-prose ul,
.aot-prose ol {
	margin: 0 0 var(--aot-space-4);
	padding-left: var(--aot-space-5);
	color: var(--aot-text-secondary);
	line-height: 1.7;
}

.aot-prose li { margin-bottom: var(--aot-space-2); }

.aot-prose .aot-table { max-width: 100%; margin-bottom: var(--aot-space-4); }

/* Editorial pages read better when they are not stretched full width. */
.aot-page--rules .aot-content,
.aot-page--downloads .aot-content {
	max-width: 820px;
}

/* ========================================== fact lists (Server Info) ===== */

.aot-serverinfo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--aot-space-4);
	align-items: start;
}

.aot-serverinfo > .aot-meta {
	grid-column: 1 / -1;
	margin: 0;
}

.aot-facts { margin: 0; }

.aot-facts__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--aot-space-4);
	padding: 9px 0;
	border-bottom: 1px solid var(--aot-border);
}

.aot-facts__row:last-child { border-bottom: 0; }

.aot-facts dt {
	color: var(--aot-text-muted);
	font-size: var(--aot-small);
}

.aot-facts dd {
	margin: 0;
	color: var(--aot-text);
	font-weight: 600;
	text-align: right;
}

.aot-facts__note {
	margin: var(--aot-space-4) 0 0;
	padding-top: var(--aot-space-3);
	border-top: 1px solid var(--aot-border);
}

@media (max-width: 560px) {
	.aot-serverinfo { grid-template-columns: 1fr; }
	.aot-prose { max-width: none; }
}

/* --------------------------------------------------------------- VIP ----
   VIP & Loyalty.

   A single column of panels rather than the two-column grid Server Info uses:
   the page is read top to bottom as an explanation, and the benefit and ladder
   tables need the full width. Everything else is the theme's own components,
   so there is no second visual language here to maintain. */

.aot-vip {
	display: flex;
	flex-direction: column;
	gap: var(--aot-space-4);
}

.aot-vip .aot-section-title { margin-top: 0; }

/* The benefit name and its value carry the scanning weight; the explanation
   is deliberately quieter so the table can be skimmed in one pass. */
.aot-vip__benefits th[scope="row"],
.aot-vip__ladder th[scope="row"],
.aot-vip__vocations th[scope="row"],
.aot-vip__offers th[scope="row"] {
	white-space: nowrap;
	text-align: left;
	color: var(--aot-text);
}

.aot-vip__benefits td:last-child { color: var(--aot-text-secondary); }

/* Mounts have no artwork yet, so the cards are named plates rather than empty
   image frames. They keep their shape when art arrives. */
.aot-vip__mounts {
	list-style: none;
	margin: var(--aot-space-3) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--aot-space-3);
}

.aot-vip__mounts .aot-card {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 76px;
	text-align: center;
}

.aot-vip__mount-name {
	font-family: var(--aot-font-display);
	font-size: 1.05rem;
	color: var(--aot-text);
}

.aot-vip__faq dt { color: var(--aot-text); }

@media (max-width: 560px) {
	.aot-vip__mounts { grid-template-columns: 1fr; }

	/* Nowrap is what keeps the tables scannable on a wide screen; on a phone it
	   is what makes them overflow instead. */
	.aot-vip__benefits th[scope="row"],
	.aot-vip__ladder th[scope="row"],
	.aot-vip__vocations th[scope="row"],
	.aot-vip__offers th[scope="row"] {
		white-space: normal;
	}
}