/* ==========================================================
   Reload Insights — front-end.
   Two views:
     .reload-insight-stage    single-article page (peach bg + white card)
     .reload-insights-index   landing grid
   Uses the site brand tokens from reload-child.
   ========================================================== */

:root{
	--ri-ink:       var(--reload-ink,      #2E405B);   /* brand blue */
	--ri-indigo:    var(--reload-indigo,   #121948);   /* deep hero blue */
	--ri-ink-soft:  var(--reload-ink-soft, rgba(46,64,91,.65));
	--ri-melon:     var(--reload-melon-2,  #FFB08C);   /* brand melon (CTA fill) */
	--ri-melon-tint:#FFDDCC;
	--ri-cream:     var(--reload-cream,    #FDF4F0);
	--ri-ivory:     var(--reload-ivory,    #F4ECDD);   /* beige page bg */
	--ri-panel:     #ffffff;
	--ri-line:      rgba(46,64,91,.14);
	--ri-radius:    28px;
	--ri-font-display: var(--reload-font-display, "Erstoria", "Fraunces", serif);
	--ri-font-ui:      var(--reload-font-ui, "Work Sans", Inter, system-ui, sans-serif);
}

/* ==========================================================
   SINGLE ARTICLE STAGE
   ========================================================== */
.reload-insight-stage{
	position: relative;
	padding: clamp(28px, 6vw, 80px) clamp(16px, 4vw, 64px) clamp(60px, 10vw, 140px);
	background: var(--ri-peach-bg);
	background-image:
		radial-gradient(ellipse at 85% 20%, rgba(255,143,107,.35), transparent 55%),
		radial-gradient(ellipse at 15% 90%, rgba(255,215,198,.9), transparent 60%);
	overflow: hidden;
	min-height: 100vh;
	color: var(--ri-ink);
	font-family: var(--ri-font-ui);
}

/* Rotating icon behind the card.  Big, off to one side, but bright enough
   to read against the peach gradient. */
.reload-insight-mark{
	position: absolute;
	top: 50%;
	right: -14vw;
	transform: translateY(-50%);
	width: min(92vw, 960px);
	aspect-ratio: 1;
	opacity: .55;
	pointer-events: none;
	z-index: 0;
	animation: reload-insight-spin 60s linear infinite;
	will-change: transform;
	filter: saturate(1.1);
}
.reload-insight-mark img{ width: 100%; height: 100%; display: block; }
@media (max-width: 900px){
	.reload-insight-mark{ opacity: .35; right: -30vw; }
}
@keyframes reload-insight-spin{ to { transform: translateY(-50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
	.reload-insight-mark{ animation: none; }
}

/* Breadcrumbs / meta above the title */
.reload-insight-crumbs{
	position: relative; z-index: 1;
	max-width: 980px; margin: 0 auto 26px;
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
	color: rgba(20,20,26,.55);
}
.reload-insight-crumbs a{
	color: var(--ri-ink); text-decoration: none;
	border-bottom: 1px solid transparent;
}
.reload-insight-crumbs a:hover, .reload-insight-crumbs a:focus-visible{
	border-bottom-color: var(--ri-ink); outline: none;
}
.reload-insight-crumbs-cat{ color: var(--ri-ink); font-weight: 600; }
.reload-insight-crumbs-sep{ opacity: .5; }

/* Title block sits ABOVE the white card */
.reload-insight-title-block{
	position: relative; z-index: 1;
	max-width: 980px; margin: 0 auto 32px;
}
.reload-insight-title{
	margin: 0 0 20px;
	font-family: var(--ri-font-display);
	font-weight: 400;
	font-size: clamp(36px, 5vw, 68px);
	line-height: 1.03; letter-spacing: -.02em;
	color: var(--ri-ink);
	max-width: 22ch;
}
.reload-insight-intro{
	margin: 0 0 20px;
	font-family: var(--ri-font-ui);
	font-weight: 400;
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.5;
	color: rgba(20,20,26,.78);
	max-width: 68ch;
}
.reload-insight-byline{
	margin: 0;
	font-size: 14px; color: rgba(20,20,26,.65);
}
.reload-insight-byline strong{ color: var(--ri-ink); font-weight: 600; }

/* The white content card */
.reload-insight-card{
	position: relative; z-index: 1;
	max-width: 980px; margin: 0 auto;
	background: var(--ri-panel);
	border-radius: var(--ri-radius);
	padding: clamp(28px, 4.5vw, 64px);
	box-shadow:
		0 40px 80px -40px rgba(24,24,32,.28),
		0 8px 24px -18px rgba(24,24,32,.12);
}

.reload-insight-qa{ display: grid; gap: 32px; max-width: 76ch; }
.reload-insight-qa-row h3{
	margin: 0 0 12px;
	font-family: var(--ri-font-display);
	font-weight: 400;
	font-size: clamp(22px, 2.2vw, 28px);
	line-height: 1.2; letter-spacing: -.01em;
	color: var(--ri-ink);
}
.reload-insight-qa-row p{
	margin: 0;
	font-size: 17px; line-height: 1.65; color: #24242c;
}
.reload-insight-qa-row + .reload-insight-qa-row{
	padding-top: 32px;
	border-top: 1px solid var(--ri-line);
}

/* Author block — brand blue background, reversed copy */
.reload-insight-author{
	margin: 48px 0 0;
	display: grid;
	grid-template-columns: 128px 1fr;
	gap: 24px;
	padding: 32px;
	background: var(--ri-ink);
	background-image: linear-gradient(140deg, var(--ri-indigo) 0%, var(--ri-ink) 60%);
	border-radius: 20px;
	align-items: start;
	color: #fff;
	position: relative;
	overflow: hidden;
}
/* Subtle brand mark inside the panel for texture */
.reload-insight-author::after{
	content: "";
	position: absolute;
	top: -25%; right: -12%;
	width: 320px; height: 320px;
	background: radial-gradient(circle at center, rgba(255,176,140,.18) 0%, transparent 65%);
	pointer-events: none;
}
.reload-insight-author-photo{
	width: 128px; height: 128px; border-radius: 100px; overflow: hidden;
	background: color-mix(in srgb, var(--ri-melon) 25%, white);
	border: 3px solid rgba(255,255,255,.16);
	position: relative; z-index: 1;
}
.reload-insight-author-photo img{
	width: 100%; height: 100%; display: block; object-fit: cover;
}
.reload-insight-author-photo.is-placeholder{
	display: flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--ri-melon) 55%, var(--ri-ink));
	color: #fff;
	font-family: var(--ri-font-display);
	font-size: 54px; line-height: 1;
	border: 3px solid rgba(255,255,255,.16);
}
.reload-insight-author-body{ position: relative; z-index: 1; }
.reload-insight-author-eyebrow{
	margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--ri-melon);
}
.reload-insight-author-name{
	margin: 6px 0 2px;
	font-family: var(--ri-font-display); font-weight: 400;
	font-size: 28px; line-height: 1.1; letter-spacing: -.01em;
	color: #fff;
}
.reload-insight-author-role{ margin: 0 0 14px; font-size: 14px; color: rgba(255,255,255,.75); }
.reload-insight-author-bio{ font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.88); }
.reload-insight-author-bio p{ margin: 0 0 8px; }
.reload-insight-author-links{
	margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px;
	font-size: 14px;
}
.reload-insight-author-link{
	display: inline-flex; align-items: center; gap: 6px;
	color: #fff; text-decoration: none;
	padding: 8px 14px; border: 1px solid rgba(255,255,255,.28); border-radius: 100px;
	background: rgba(255,255,255,.06);
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.reload-insight-author-link:hover, .reload-insight-author-link:focus-visible{
	background: var(--ri-melon); border-color: var(--ri-melon); color: var(--ri-ink); outline: none;
}
.reload-insight-author-link .dashicons{ font-size: 15px; width: 15px; height: 15px; }

.reload-insight-foot{
	margin: 40px 0 0; padding-top: 28px;
	border-top: 1px solid var(--ri-line);
	display: flex; flex-wrap: wrap; gap: 12px;
}

/* Reuse the theme's brand buttons if present, otherwise render a sane default */
.reload-insight-foot .reload-btn,
.reload-insight-foot .reload-btn-outline{
	display: inline-flex; align-items: center; gap: 10px;
	padding: 12px 22px; border-radius: 100px;
	font: inherit; font-size: 14px; font-weight: 600;
	text-decoration: none;
	transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.reload-insight-foot .reload-btn{ background: var(--ri-ink); color: #fff; }
.reload-insight-foot .reload-btn:hover{ transform: translateY(-1px); background: #000; }
.reload-insight-foot .reload-btn-outline{ border: 1px solid var(--ri-ink); color: var(--ri-ink); }
.reload-insight-foot .reload-btn-outline:hover{ background: var(--ri-ink); color: #fff; }

@media (max-width: 640px){
	.reload-insight-author{ grid-template-columns: 1fr; }
	.reload-insight-author-photo{ width: 96px; height: 96px; }
}

/* ==========================================================
   LANDING PAGE INDEX
   ========================================================== */

/* Paint the whole page ivory when the shortcode is present,
   and let the wrapper go full-bleed even from inside an Elementor container. */
body.has-reload-insights-index{ background: var(--ri-ivory); }
body.has-reload-insights-index .site-main,
body.has-reload-insights-index main,
body.has-reload-insights-index .elementor-section-wrap{
	padding-left: 0 !important;
	padding-right: 0 !important;
	max-width: none !important;
	background: transparent !important;
}

.reload-insights-index{
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: var(--ri-font-ui);
	color: var(--ri-ink);
}

/* ---- Blue hero banner — matches the About page hero exactly ---- */
.reload-insights-hero{
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #2E405B;
	color: var(--reload-cream, #FDF4F0);
	padding: clamp(80px, 12vh, 140px) clamp(16px, 2vw, 40px);
	min-height: clamp(520px, 62vh, 720px);
	display: flex; align-items: center; justify-content: center;
}
.reload-insights-hero-mark{
	position: absolute; top: 50%; left: 50%;
	width: min(120vh, 120vw);
	aspect-ratio: 1;
	z-index: 0; pointer-events: none;
	transform: translate(-50%, -50%);
	opacity: .85;
	animation: reload-spin 120s linear infinite reverse;
	transform-origin: 50% 50%;
}
.reload-insights-hero-mark img{ width: 100%; height: 100%; display: block; }
.reload-insights-hero::before{
	content: "";
	position: absolute; inset: -20%;
	background: radial-gradient(closest-side at 50% 50%,
	            rgba(244,168,147,.18), rgba(244,168,147,0) 70%);
	z-index: 0; pointer-events: none;
}
.reload-insights-hero-inner{
	position: relative; z-index: 1;
	width: 95%;
	max-width: 1600px;
	display: flex; flex-direction: column; gap: 28px;
	align-items: center; text-align: center;
}
.reload-insights-hero-title{
	color: var(--reload-cream, #FDF4F0);
	font-family: var(--ri-font-display);
	font-weight: 400;
	/* Big enough that each line of "What the point / one per cent / are
	   reading." actually reaches near the edges of the 95% column. */
	font-size: clamp(56px, 10.5vw, 168px);
	line-height: 1;
	letter-spacing: -.025em;
	margin: 0;
	width: 100%;
	max-width: none;
}
.reload-insights-hero-lede{
	color: var(--reload-cream, #FDF4F0);
	font-family: var(--ri-font-ui);
	font-size: clamp(16px, 1.4vw, 20px);
	line-height: 1.55;
	max-width: 820px;
	margin: 12px 0 0;
	opacity: .92;
}

/* Fade-in for hero copy (matches the About page keyframes) */
.reload-insights-hero .reload-hero-fadein{
	opacity: 0; transform: translateY(20px);
	animation: reload-hero-text-in 1.2s cubic-bezier(.2,.7,.2,1) forwards;
}
.reload-insights-hero .reload-hero-fadein[data-step="1"]{ animation-delay: .15s; }
.reload-insights-hero .reload-hero-fadein[data-step="2"]{ animation-delay: .35s; }
@keyframes reload-hero-text-in { to { opacity: 1; transform: none; } }

/* Local fallback for the spin keyframes in case the theme's global
   `reload-spin` isn't registered (e.g. plugin-only environments). */
@keyframes reload-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
	.reload-insights-hero-mark{ animation: none; }
	.reload-insights-hero .reload-hero-fadein{ animation: none; opacity: 1; transform: none; }
}

/* ---- Body / rotating icon ---- */
.reload-insights-body{
	position: relative;
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(40px, 6vw, 80px) clamp(16px, 4vw, 60px) clamp(80px, 10vw, 140px);
	background: transparent;
}
.reload-insight-mark--index{
	position: absolute;
	top: 50%;                             /* halfway down the body */
	right: -18vw;                         /* peek in from the right edge */
	transform: translateY(-50%);
	width: min(85vw, 880px);
	opacity: .55;                         /* melon icon on beige — legible without being noisy */
	pointer-events: none;
	z-index: 0;
	animation: reload-insight-spin 80s linear infinite;
	filter: saturate(1.05);
}
@media (max-width: 900px){
	.reload-insight-mark--index{ opacity: .35; right: -35vw; }
}

/* ---- Filter panel: white card, left-aligned, brand-melon hover ---- */
.reload-insights-filter-panel{
	position: relative; z-index: 1;
	margin: 0 0 32px;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid var(--ri-line);
	border-radius: 18px;
	box-shadow: 0 12px 30px -22px rgba(46,64,91,.18);
}
.reload-insights-filter-label{
	margin: 0 0 12px;
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--ri-ink-soft); font-weight: 600;
}
.reload-insights-filter{
	display: flex; flex-wrap: wrap; gap: 8px;
	justify-content: flex-start;
}
.reload-insights-filter button{
	appearance: none;
	display: inline-flex; align-items: center; gap: 8px;
	border: 1px solid var(--ri-line);
	background: #fff; color: var(--ri-ink);
	padding: 8px 14px 8px 12px; border-radius: 100px;
	font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.reload-insights-filter button .dot{
	width: 8px; height: 8px; border-radius: 100px;
	background: var(--ri-melon); flex: 0 0 8px;
}
.reload-insights-filter button .count{
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 22px; height: 20px; padding: 0 6px;
	background: rgba(46,64,91,.08);
	border-radius: 100px;
	font-size: 11px; font-weight: 600; color: var(--ri-ink);
}
.reload-insights-filter button:hover,
.reload-insights-filter button:focus-visible{
	background: var(--ri-melon) !important;
	border-color: var(--ri-melon) !important;
	color: var(--ri-ink) !important;
	outline: none;
}
.reload-insights-filter button:hover .count,
.reload-insights-filter button:focus-visible .count{
	background: rgba(46,64,91,.14);
}
.reload-insights-filter button.is-active{
	background: var(--ri-ink); color: #fff; border-color: var(--ri-ink);
}
.reload-insights-filter button.is-active .dot{ background: var(--ri-melon); }
.reload-insights-filter button.is-active .count{
	background: rgba(255,255,255,.18); color: #fff;
}

/* ---- Card grid ---- */
.reload-insights-grid{
	position: relative; z-index: 1;
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 20px;
}
.reload-insights-item[hidden]{ display: none; }

.reload-insights-card{
	display: flex; flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--ri-line);
	border-radius: 22px;
	padding: 26px 26px 22px;
	color: var(--ri-ink);
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.reload-insights-card:hover, .reload-insights-card:focus-visible{
	transform: translateY(-2px);
	box-shadow: 0 24px 48px -32px rgba(46,64,91,.35);
	border-color: rgba(46,64,91,.24);
	outline: none;
}
.reload-insights-card-cat{
	display: inline-block;
	padding: 4px 10px; border-radius: 100px;
	background: color-mix(in srgb, var(--ri-melon) 22%, white);
	color: var(--ri-ink);
	font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
	margin: 0 0 14px; align-self: flex-start;
}
.reload-insights-card-title{
	margin: 0 0 12px;
	font-family: var(--ri-font-display); font-weight: 400;
	font-size: clamp(20px, 2vw, 24px);
	line-height: 1.2; letter-spacing: -.01em;
	color: var(--ri-ink);
}
.reload-insights-card-excerpt{
	margin: 0 0 20px;
	font-size: 15px; line-height: 1.55; color: var(--ri-ink-soft);
	flex: 1 1 auto;
}
.reload-insights-card-author{
	display: flex; align-items: center; gap: 10px;
	padding-top: 14px;
	border-top: 1px solid var(--ri-line);
}
.reload-insights-card-photo{
	width: 36px; height: 36px; border-radius: 100px; object-fit: cover;
	background: color-mix(in srgb, var(--ri-melon) 30%, white);
}
.reload-insights-card-photo.is-placeholder{ display: inline-block; }
.reload-insights-card-name{
	font-size: 13px; font-weight: 600; color: var(--ri-ink);
}
.reload-insights-card-cta{
	margin-top: 14px; font-size: 13px; color: var(--ri-ink); font-weight: 600;
	opacity: 0; transform: translateX(-4px);
	transition: opacity .15s ease, transform .15s ease;
}
.reload-insights-card:hover .reload-insights-card-cta,
.reload-insights-card:focus-visible .reload-insights-card-cta{ opacity: 1; transform: none; }

.reload-insights-empty{
	max-width: 720px; margin: 40px auto; text-align: center;
	padding: 40px; background: #fff; border: 1px dashed var(--ri-line); border-radius: 22px;
	color: var(--ri-ink-soft);
}