/* =========================================================
   InsuraBeat — Components: cards, hero, scroll rails
   ========================================================= */

/* ---------- Article card (used in rails & grids) ---------- */
.ib-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--ib-line);
	border-radius: var(--ib-radius);
	overflow: hidden;
	transition: transform var(--ib-dur) var(--ib-ease), box-shadow var(--ib-dur) var(--ib-ease), border-color var(--ib-dur) var(--ib-ease);
	height: 100%;
}

.ib-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--ib-shadow);
	border-color: var(--ib-navy-200);
}

.ib-card__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--ib-navy-100);
}

.ib-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ib-ease);
}

.ib-card:hover .ib-card__media img { transform: scale(1.04); }

.ib-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--ib-sp-3);
	padding: var(--ib-sp-4);
	flex: 1;
}

.ib-card__meta {
	display: flex;
	align-items: center;
	gap: var(--ib-sp-2);
	font-family: var(--ib-font-sans);
	font-size: var(--ib-fs-xs);
	color: var(--ib-ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ib-card__meta a { color: var(--ib-navy-800); font-weight: 600; }
.ib-card__meta a:hover { color: var(--ib-accent); }

.ib-card__meta__sep::before { content: "•"; margin: 0 .35rem; opacity: .5; }

.ib-card__title {
	font-family: var(--ib-font-serif);
	font-size: var(--ib-fs-md);
	font-weight: 700;
	line-height: 1.3;
	color: var(--ib-navy-900);
	margin: 0;
	letter-spacing: -0.005em;
}

.ib-card__title a { color: inherit; }
.ib-card__title a:hover { color: var(--ib-accent); }

.ib-card__excerpt {
	font-size: var(--ib-fs-sm);
	color: var(--ib-ink-muted);
	line-height: 1.5;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ib-card__footer {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--ib-fs-xs);
	color: var(--ib-ink-soft);
	font-family: var(--ib-font-sans);
}

/* Compact variant — used in dense rails */
.ib-card--compact .ib-card__body { padding: var(--ib-sp-3); gap: var(--ib-sp-2); }
.ib-card--compact .ib-card__title { font-size: var(--ib-fs-base); }
.ib-card--compact .ib-card__excerpt { display: none; }

/* ---------- Hero carousel ---------- */
.ib-hero {
	position: relative;
	background: var(--ib-navy-900);
	overflow: hidden;
}

.ib-hero__viewport {
	position: relative;
	overflow: hidden;
}

.ib-hero__track {
	display: flex;
	transition: transform .6s var(--ib-ease);
	will-change: transform;
}

.ib-hero__slide {
	flex: 0 0 100%;
	min-width: 0;
	position: relative;
	min-height: 540px;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	background: var(--ib-navy-900);
	color: #fff;
}

.ib-hero__media {
	position: relative;
	overflow: hidden;
}

.ib-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ib-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(14, 34, 64, 0) 60%, rgba(14, 34, 64, .85));
	pointer-events: none;
}

.ib-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--ib-sp-4);
	padding: var(--ib-sp-7) var(--ib-sp-7);
	background: linear-gradient(180deg, var(--ib-navy-900), #0a182d);
}

.ib-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--ib-sp-2);
	font-family: var(--ib-font-sans);
	font-size: var(--ib-fs-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .75);
}

.ib-hero__eyebrow .ib-tag { background: var(--ib-accent); color: #fff; }

.ib-hero__title {
	font-family: var(--ib-font-serif);
	font-size: clamp(1.75rem, 3.4vw, var(--ib-fs-3xl));
	line-height: 1.1;
	color: #fff;
	margin: 0;
	letter-spacing: -0.015em;
}

.ib-hero__title a { color: inherit; }
.ib-hero__title a:hover { color: var(--ib-accent); }

.ib-hero__excerpt {
	font-size: var(--ib-fs-md);
	color: rgba(255, 255, 255, .82);
	line-height: 1.55;
	max-width: 56ch;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ib-hero__meta {
	display: flex;
	align-items: center;
	gap: var(--ib-sp-3);
	font-family: var(--ib-font-sans);
	font-size: var(--ib-fs-xs);
	color: rgba(255, 255, 255, .6);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ib-hero__cta { margin-top: var(--ib-sp-3); }

/* Hero controls */
.ib-hero__nav {
	position: absolute;
	bottom: var(--ib-sp-5);
	right: var(--ib-sp-5);
	display: flex;
	gap: var(--ib-sp-2);
	z-index: 4;
}

.ib-hero__btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .25);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: all var(--ib-dur) var(--ib-ease);
}

.ib-hero__btn:hover { background: var(--ib-accent); border-color: var(--ib-accent); }

.ib-hero__btn svg { width: 18px; height: 18px; }

.ib-hero__dots {
	position: absolute;
	bottom: var(--ib-sp-5);
	left: var(--ib-sp-7);
	display: flex;
	gap: var(--ib-sp-2);
	z-index: 4;
}

.ib-hero__dot {
	height: 4px;
	width: 36px;
	background: rgba(255, 255, 255, .3);
	border: 0;
	cursor: pointer;
	padding: 0;
	border-radius: 2px;
	overflow: hidden;
	position: relative;
	transition: background var(--ib-dur) var(--ib-ease);
}

.ib-hero__dot[aria-current="true"]::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ib-accent);
	transform-origin: left;
	animation: ib-hero-progress 6s linear forwards;
}

@keyframes ib-hero-progress {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

@media (max-width: 860px) {
	.ib-hero__slide { grid-template-columns: 1fr; min-height: 0; }
	.ib-hero__media { aspect-ratio: 16 / 9; }
	.ib-hero__content { padding: var(--ib-sp-5); }
	.ib-hero__dots { left: var(--ib-sp-5); }
}

/* ---------- Horizontal scroll rail (thematic sections) ---------- */
.ib-rail {
	position: relative;
	padding: var(--ib-sp-7) 0;
}

.ib-rail--alt { background: var(--ib-bg-alt); }

.ib-rail__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ib-sp-4);
	margin-bottom: var(--ib-sp-5);
}

.ib-rail__title {
	font-family: var(--ib-font-serif);
	font-size: var(--ib-fs-xl);
	color: var(--ib-navy-900);
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: var(--ib-sp-3);
}

.ib-rail__title::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 22px;
	background: var(--ib-accent);
	border-radius: 2px;
	transform: translateY(3px);
}

.ib-rail__more {
	font-family: var(--ib-font-sans);
	font-size: var(--ib-fs-sm);
	font-weight: 600;
	color: var(--ib-navy-800);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ib-rail__more:hover { color: var(--ib-accent); }

.ib-rail__viewport {
	position: relative;
}

.ib-rail__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(280px, 1fr);
	gap: var(--ib-sp-4);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--ib-sp-5);
	-webkit-overflow-scrolling: touch;
	padding-bottom: var(--ib-sp-3);
	scrollbar-width: thin;
	scrollbar-color: var(--ib-navy-200) transparent;
}

.ib-rail__track::-webkit-scrollbar { height: 6px; }
.ib-rail__track::-webkit-scrollbar-track { background: transparent; }
.ib-rail__track::-webkit-scrollbar-thumb { background: var(--ib-navy-200); border-radius: 3px; }

@media (min-width: 720px) {
	.ib-rail__track { grid-auto-columns: minmax(320px, calc((100% - 3 * var(--ib-sp-4)) / 4)); }
}

.ib-rail__track > * {
	scroll-snap-align: start;
	min-width: 0;
}

/* Rail nav arrows */
.ib-rail__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	color: var(--ib-navy-900);
	border: 1px solid var(--ib-line);
	box-shadow: var(--ib-shadow);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all var(--ib-dur) var(--ib-ease);
	z-index: 3;
	opacity: 0;
	pointer-events: none;
}

.ib-rail__nav svg { width: 20px; height: 20px; }
.ib-rail__nav:hover { background: var(--ib-accent); color: #fff; border-color: var(--ib-accent); }
.ib-rail__nav--prev { left: -22px; }
.ib-rail__nav--next { right: -22px; }

.ib-rail__viewport:hover .ib-rail__nav,
.ib-rail__nav:focus-visible {
	opacity: 1;
	pointer-events: auto;
}

.ib-rail__nav[disabled] { opacity: 0 !important; pointer-events: none; }

@media (max-width: 860px) {
	.ib-rail__nav { display: none; }
}

/* ---------- Empty rail placeholder ---------- */
.ib-rail--empty .ib-rail__track {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ib-sp-6) var(--ib-sp-4);
	color: var(--ib-ink-soft);
	font-size: var(--ib-fs-sm);
	border: 1px dashed var(--ib-line);
	border-radius: var(--ib-radius);
	background: #fff;
}