/**
 * iGBInsider — Layout
 */

.container,
.site-container {
	width: 100%;
	max-width: var(--layout-max);
	margin-inline: auto;
	padding-inline: var(--layout-gutter);
}

.container-wide {
	width: 100%;
	max-width: var(--layout-max);
	margin-inline: auto;
}

/* Page outer — side ads + main content */
.page-outer {
	max-width: var(--layout-max);
	margin-inline: auto;
	display: flex;
	align-items: flex-start;
	padding: 18px 0 28px;
}

.main-col {
	flex: 1;
	min-width: 0;
	padding-inline: var(--layout-main-col-padding);
}

.content-inner {
	width: 100%;
}

/* Side ads */
.side-ad {
	width: var(--layout-side-ad);
	flex-shrink: 0;
	position: sticky;
	top: var(--height-sticky-header);
	align-self: flex-start;
	padding-inline: 8px;
}

.side-unit {
	background: var(--color-ink);
	border-radius: var(--radius-md);
	border: 1.5px solid rgba(200, 168, 75, 0.25);
	margin-bottom: 14px;
	overflow: hidden;
	cursor: pointer;
	transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.side-unit:hover {
	border-color: var(--color-gold);
	box-shadow: 0 0 0 3px rgba(200, 168, 75, 0.1);
}

.su-inner {
	padding: 15px 11px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
}

.su-tag {
	font-size: 9px;
	color: rgba(255, 255, 255, 0.25);
	letter-spacing: 1px;
	text-transform: uppercase;
	border: 1px solid rgba(255, 255, 255, 0.08);
	padding: 2px 6px;
	border-radius: 2px;
}

.su-badge {
	background: var(--color-gold);
	color: var(--color-ink);
	font-family: var(--font-heading);
	font-weight: var(--font-weight-extrabold);
	font-size: 10px;
	padding: 3px 9px;
	border-radius: var(--radius-full);
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.su-ico {
	line-height: 1;
	color: var(--color-gold);
}

.su-ico svg {
	width: 32px;
	height: 32px;
	margin-inline: auto;
}

.su-title {
	font-family: var(--font-heading);
	font-weight: var(--font-weight-extrabold);
	font-size: 17px;
	color: var(--color-white);
	line-height: 1.2;
	letter-spacing: 0.3px;
}

.su-sub {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.42);
	line-height: 1.5;
}

.su-btn {
	background: var(--color-gold);
	color: var(--color-ink);
	font-family: var(--font-heading);
	font-weight: var(--font-weight-extrabold);
	font-size: 11.5px;
	padding: 8px 0;
	border-radius: var(--radius-sm);
	text-transform: uppercase;
	letter-spacing: 0.4px;
	width: 100%;
	text-align: center;
	display: block;
	transition: background var(--transition-fast);
}

.su-btn:hover {
	background: var(--color-gold-bright);
	color: var(--color-ink);
}

/* Horizontal ad banner */
.h-banner,
.ad-strip {
	width: 100%;
	height: 90px;
	border-radius: var(--radius-md);
	border: 1px solid rgba(200, 168, 75, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	background: linear-gradient(100deg, var(--color-ink) 0%, var(--color-ink-3) 50%, var(--color-ink) 100%);
	margin-bottom: 0;
}

.h-banner::before,
.ad-strip::before {
	content: '';
	position: absolute;
	left: -100%;
	top: 0;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(200, 168, 75, 0.07), transparent);
	animation: sweep 4s infinite;
}

.hb-al,
.as-label {
	position: absolute;
	top: 4px;
	right: 9px;
	font-size: 9px;
	color: rgba(255, 255, 255, 0.18);
	letter-spacing: 0.7px;
	text-transform: uppercase;
}

.hb-chip,
.as-chip {
	background: var(--color-gold);
	color: var(--color-ink);
	font-family: var(--font-heading);
	font-weight: var(--font-weight-extrabold);
	font-size: 11px;
	padding: 4px 12px;
	border-radius: 3px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	flex-shrink: 0;
}

.hb-div,
.as-div {
	width: 1px;
	height: 44px;
	background: rgba(200, 168, 75, 0.18);
	flex-shrink: 0;
}

.hb-text,
.as-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hb-hl,
.as-headline {
	font-family: var(--font-heading);
	font-weight: var(--font-weight-extrabold);
	font-size: 21px;
	color: var(--color-white);
	letter-spacing: 0.3px;
}

.hb-sub,
.as-sub {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.42);
}

.hb-cta,
.as-cta {
	background: var(--color-gold);
	color: var(--color-ink);
	font-family: var(--font-heading);
	font-weight: var(--font-weight-extrabold);
	font-size: 12px;
	padding: 9px 18px;
	border-radius: var(--radius-sm);
	text-transform: uppercase;
	letter-spacing: 0.4px;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background var(--transition-fast);
}

.hb-cta:hover,
.as-cta:hover {
	background: var(--color-gold-bright);
}

/* Section wrapper */
.section {
	margin-bottom: 32px;
}

.page-body {
	max-width: var(--layout-max);
	margin-inline: auto;
	padding: 28px var(--layout-gutter-lg);
	display: grid;
	grid-template-columns: 1fr var(--layout-sidebar-lg);
	gap: 28px;
}

.page-sidebar {
	min-width: 0;
}

/* Grids */
.g2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.g3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.g4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.g5 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
}

.g-main-side {
	display: grid;
	grid-template-columns: 1fr var(--layout-sidebar);
	gap: 18px;
}

.stack {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.stack-lg {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

/* Placeholder image gradients */
.ph-ink {
	background: linear-gradient(145deg, var(--color-ink), var(--color-ink-3));
}

.ph-casino {
	background: linear-gradient(145deg, #0a1628, #1a2a45);
}

.ph-sports {
	background: linear-gradient(145deg, #0a2a10, #1a5020);
}

.ph-lottery {
	background: linear-gradient(145deg, #3a000e, #6a0020);
}

.ph-esports {
	background: linear-gradient(145deg, #1a003a, #380080);
}

.ph-biz {
	background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
}

.ph-reg {
	background: linear-gradient(145deg, #0a2040, #1a4070);
}

.ph-tech {
	background: linear-gradient(145deg, #001040, #002070);
}

.ph-fin {
	background: linear-gradient(145deg, #0a2a10, #1a5030);
}