/* Raiden Insight - site adjustments on top of the scoped template stylesheet (ri-insight.css). */

/* The template sizes its text in em on a 16px body; the wrapper would otherwise inherit the
   Kaju body's 13px and every text would be 81% of the template's size. */
.ri-insight { font-size: 16px; }
/* Kaju's Bootstrap shrinks any ".small" to 85%; the template uses "small" as a variant class
   (calendar, buttons ...) and sizes those itself. :where() keeps this below the template's rules. */
.ri-insight :where(.small) { font-size: 100%; }

/* The template turns .liquid images into backgrounds with its imgLiquid script; CSS does it here. */
.ri-insight .liquid { overflow: hidden; }
.ri-insight .liquid > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Green banner: 50px taller than the template's 260px (user, 2026-10-14). */
.ri-insight .banner-wrap .banner { min-height: 310px; padding-top: 127px; padding-bottom: 115px; }
.ri-insight .banner .banner-sections a.banner-section { color: #fff; }
.ri-insight .banner .banner-sections a.banner-section:hover { text-decoration: underline; }

/* Category icon in place of the author avatar (initials on the category colour). */
.ri-insight .ri-cat-icon-link { display: inline-block; vertical-align: middle; }
.ri-insight .post-author-info-wrap .user-avatar.ri-cat-icon {
	display: flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%;
	color: #fff; font-family: "Exo", sans-serif; font-size: 10px; font-weight: 800; line-height: 1;
}

/* "Post Categories" list (replaces the template's Popular Posts). */
.ri-insight .ri-cat-list { margin: 0; padding: 0; list-style: none; }
.ri-insight .ri-cat-list .ri-cat-item + .ri-cat-item { border-top: 1px solid #ebebeb; }
.ri-insight .ri-cat-list a { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: #363636; font-family: "Exo", sans-serif; font-size: .875em; font-weight: 700; text-transform: uppercase; transition: color .2s ease; }
.ri-insight .ri-cat-list .ri-cat-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 800; }
.ri-insight .ri-cat-list .ri-cat-name { flex: 1 1 auto; line-height: 1.3em; }
.ri-insight .ri-cat-list .ri-cat-count { flex: none; min-width: 28px; padding: 3px 7px; border-radius: 10px; background: #f1f1f1; color: #6b6b6b; font-family: "Roboto", sans-serif; font-size: 11px; text-align: center; }
.ri-insight .ri-cat-list a:hover { color: #1c95f3; }
.ri-insight .ri-cat-list .ri-cat-item.active a { color: #1c95f3; }
.ri-insight .ri-cat-list .ri-cat-item.active .ri-cat-count { background: #1c95f3; color: #fff; }

/* "Follow Us": networks the template has no colour for, and no follower counts. */
.ri-insight .bubble-ornament.ri-pin { background-color: #e60023; }
.ri-insight .bubble-ornament.ri-in { background-color: #0a66c2; }
.ri-insight .bubble-ornament.ri-yt { background-color: #ff0000; }
.ri-insight .social-links .bubble-ornament.big { display: inline-flex; align-items: center; justify-content: center; padding-top: 0; }
.ri-insight .social-links .bubble-ornament svg { fill: #fff; width: 16px; height: 16px; }

/* Pagination: links wrap the template's arrow controls. */
.ri-insight .page-navigation > a:not(.page-navigation-item) { display: inline-block; vertical-align: middle; }
.ri-insight .page-navigation span.page-navigation-item { cursor: default; }

.ri-insight .ri-no-posts { padding: 40px 0; color: #6b6b6b; font-size: 1em; }

/* Single post: the post's own content inside the template's post body. The template's reset
   (no margins, no list bullets, line-height 1em) is undone here so ordinary content reads well. */
/* Text as the template's post text (.post-open-text: 14px / 26px, #777); the template's
   global "p { font-size: .8125em }" would shrink the paragraphs to 13px of this. */
.ri-insight .ri-post-content { color: #777; font-family: "Roboto", sans-serif; font-size: 14px; line-height: 26px; }
.ri-insight .ri-post-content > * + * { margin-top: 1.1em; }
.ri-insight .ri-post-content p, .ri-insight .ri-post-content li, .ri-insight .ri-post-content td,
.ri-insight .ri-post-content th, .ri-insight .ri-post-content blockquote p { font-size: inherit; line-height: inherit; }
.ri-insight .ri-post-content a { color: #1c95f3; }
.ri-insight .ri-post-content a:hover { text-decoration: underline; }
.ri-insight .ri-post-content h1, .ri-insight .ri-post-content h2, .ri-insight .ri-post-content h3,
.ri-insight .ri-post-content h4, .ri-insight .ri-post-content h5, .ri-insight .ri-post-content h6 {
	margin-top: 1.6em; color: #363636; font-family: "Exo", sans-serif; font-weight: 700; line-height: 1.25em; text-transform: uppercase;
}
.ri-insight .ri-post-content h1 { font-size: 1.75em; }
.ri-insight .ri-post-content h2 { font-size: 1.5em; }
.ri-insight .ri-post-content h3 { font-size: 1.25em; }
.ri-insight .ri-post-content h4, .ri-insight .ri-post-content h5, .ri-insight .ri-post-content h6 { font-size: 1.05em; }
.ri-insight .ri-post-content ul, .ri-insight .ri-post-content ol { padding-left: 1.4em; }
.ri-insight .ri-post-content ul { list-style: disc; }
.ri-insight .ri-post-content ol { list-style: decimal; }
.ri-insight .ri-post-content li + li { margin-top: .35em; }
.ri-insight .ri-post-content strong, .ri-insight .ri-post-content b { color: #363636; font-weight: 700; }
.ri-insight .ri-post-content img { max-width: 100%; height: auto; }
.ri-insight .ri-post-content figure { margin-left: 0; margin-right: 0; }
.ri-insight .ri-post-content figure > figcaption { display: block; margin-top: .5em; font-size: .85em; color: #9a9a9a; }
.ri-insight .ri-post-content iframe, .ri-insight .ri-post-content video { max-width: 100%; }
.ri-insight .ri-post-content blockquote { padding: 12px 20px; border-left: 4px solid #1c95f3; background: #f7f7f7; color: #363636; font-style: italic; }
.ri-insight .ri-post-content table { width: 100%; border-collapse: collapse; }
.ri-insight .ri-post-content th, .ri-insight .ri-post-content td { padding: 8px 10px; border: 1px solid #ebebeb; text-align: left; }
.ri-insight .ri-post-content .wp-block-image, .ri-insight .ri-post-content .wp-block-embed { margin-left: 0; margin-right: 0; }

/* Post side box: the category icon in place of the author's photo. */
.ri-insight .post-open-sidebar .user-avatar.ri-cat-icon {
	display: flex; align-items: center; justify-content: center;
	width: 50px; height: 50px; border-radius: 50%;
	color: #fff; font-family: "Exo", sans-serif; font-size: 15px; font-weight: 800; line-height: 1;
}

/* Insight Videos: the YouTube thumbnail, then the player in its place. */
.ri-insight .post-preview.video .post-preview-img-wrap.ri-video-playing { position: relative; padding-top: 56.25%; height: auto; background: #000; }
.ri-insight .post-preview-img-wrap.ri-video-playing .ri-video-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Category name in the cards' author line. Not .post-author: the site hides every
   .post-author (authors hidden site-wide), so the template's author styles are repeated here. */
.ri-insight .post-author-info .ri-post-cat { font-weight: 700; }
.ri-insight .post-preview.gaming-news .ri-post-cat { color: #1c95f3; }
.ri-insight .post-preview.movie-news .ri-post-cat { color: #58d819; }
.ri-insight .post-preview.game-review .ri-post-cat { color: #f30a5c; }
.ri-insight .post-preview.geeky-news .ri-post-cat { color: #ffb400; }
.ri-insight .post-preview.e-sport .ri-post-cat { color: #7442ce; }

/* ===== Insights main page (/insights/) ===== */
.ri-insight .ri-hidden { display: none !important; }

/* Twitch box -> Insight Videos: the video thumbnail under a dark shade, a play button
   where the template had its streamer picture. */
.ri-insight .stream-preview .stream-preview-streamer.ri-stream-video { background-color: #1d1d1d; background-repeat: no-repeat; background-position: center; background-size: cover; cursor: pointer; }
.ri-insight .stream-preview .stream-preview-streamer.ri-stream-video::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.3) 100%); }
.ri-insight .stream-preview .stream-preview-streamer.ri-stream-video > * { position: relative; }
.ri-insight .stream-preview .stream-preview-streamer.ri-stream-video .ri-stream-play { position: absolute; top: 50%; right: 24px; margin-top: -16px; }
.ri-insight .stream-preview .stream-preview-streamer.ri-stream-video:hover .ri-stream-play { transform: scale(1.1); }
.ri-insight .stream-preview .widget-media iframe { display: block; width: 100%; border: 0; }

/* Upcoming event: countdown and details. */
.ri-insight .ri-countdown { display: flex; justify-content: space-between; gap: 8px; padding: 22px 0 6px; }
.ri-insight .ri-countdown-item { flex: 1 1 0; padding: 12px 0 10px; border-radius: 4px; background: linear-gradient(135deg, #713fcb, #00b3d0); text-align: center; }
.ri-insight .ri-countdown-value { color: #fff; font-family: "Exo", sans-serif; font-size: 1.375em; font-weight: 800; line-height: 1em; }
.ri-insight .ri-countdown-label { margin-top: 6px; color: rgba(255,255,255,.85); font-family: "Exo", sans-serif; font-size: .5625em; font-weight: 700; text-transform: uppercase; }
.ri-insight .ri-countdown-ended { padding: 18px 0 4px; color: #7442ce; font-family: "Exo", sans-serif; font-size: .875em; font-weight: 700; }
.ri-insight .ri-event-details { padding-top: 16px; }
.ri-insight .ri-event-place { color: #363636; font-family: "Exo", sans-serif; font-size: .875em; font-weight: 700; }
.ri-insight .ri-event-label { display: inline-block; margin-right: 8px; color: #7442ce; font-size: .75em; text-transform: uppercase; }
.ri-insight .ri-event-text { margin-top: 10px; color: #6b6b6b; font-size: .8125em; line-height: 1.6em; }
.ri-insight .ri-event-button { margin-top: 16px; }

/* Poll: the vote form first, the results after a vote (or "Results"). */
.ri-insight .poll-widget .ri-poll-form .radio-item { height: auto; min-height: 16px; }
.ri-insight .poll-widget .ri-poll-form .rl-label { display: block; padding-top: 1px; color: #363636; font-size: .75em; line-height: 1.3em; }
.ri-insight .poll-widget .ri-poll-form .radio-circle { width: 16px; height: 16px; border: 1px solid #dbdbdb; border-radius: 50%; background: #fff; }
.ri-insight .poll-widget .ri-poll-results { display: none; margin-top: 30px; }
.ri-insight .poll-widget.ri-poll-show-results .ri-poll-results { display: block; }
.ri-insight .poll-widget.ri-poll-show-results .ri-poll-form { display: none; }
.ri-insight .ri-poll-result { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; margin-bottom: 22px; }
.ri-insight .ri-poll-result .bar-progress-info { grid-column: 1 / -1; color: #363636; font-family: "Exo", sans-serif; font-size: .625em; font-weight: 700; }
.ri-insight .ri-poll-bar { height: 6px; border-radius: 3px; background: #ebebeb; overflow: hidden; }
.ri-insight .ri-poll-bar span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #f30a5c, #1c95f3); transition: width .8s ease; }
.ri-insight .ri-poll-percent { min-width: 36px; color: #363636; font-family: "Exo", sans-serif; font-size: .75em; font-weight: 800; text-align: right; }
.ri-insight .ri-poll-result.ri-poll-mine .bar-progress-info { color: #f30a5c; }
.ri-insight .ri-poll-total { color: #8b8b8b; font-size: .75em; }

/* Video section: the playing video in the list. */
.ri-insight .post-preview.video.ri-video-active .post-preview-title { color: #00e3d0; }
.ri-insight .ri-video-main .post-open-media iframe { border: 0; }

/* Banner slider: post titles run to 2 lines (the template's are 1), so the title and the
   text are clamped to 2 lines each and the hover reveal moves by the text's height
   (2 lines of 22px + 10px margin = 54px) instead of the template's 106px. */
.ri-insight .banner-slider.v3 .post-preview .post-preview-overlay .post-preview-title,
.ri-insight .banner-slider.v3 .post-preview .post-preview-overlay .post-preview-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ri-insight .banner-slider.v3 .post-preview .tag-ornament,
.ri-insight .banner-slider.v3 .post-preview .post-preview-overlay .post-preview-title,
.ri-insight .banner-slider.v3 .post-preview .post-preview-overlay .post-preview-text { transform: translate(0, 54px); }
.ri-insight .banner-slider.v3 .post-preview:hover .tag-ornament,
.ri-insight .banner-slider.v3 .post-preview:hover .post-preview-overlay .post-preview-title,
.ri-insight .banner-slider.v3 .post-preview:hover .post-preview-overlay .post-preview-text { transform: translate(0, 0); }
.ri-insight .ri-nowrap { white-space: nowrap; }
.ri-insight .post-open.gaming-news .ri-post-cat { color: #1c95f3; font-weight: 700; }
.ri-insight .post-open.movie-news .ri-post-cat { color: #58d819; font-weight: 700; }
.ri-insight .post-open.game-review .ri-post-cat { color: #f30a5c; font-weight: 700; }
.ri-insight .post-open.geeky-news .ri-post-cat { color: #ffb400; font-weight: 700; }
.ri-insight .post-open.e-sport .ri-post-cat { color: #7442ce; font-weight: 700; }
/* Video list: long category names wrap to a normal second line (the template line-height is for one line). */
.ri-insight .post-preview.video.tiny .post-author-info { line-height: 1.5em; }

/* Sidebars on tablets and phones (user 2026-10-14): the template hides them below 1260px;
   here they show under the posts (the template's grid already puts them there), their
   widgets side by side as far as the width allows (270px+ each), one per row on phones. */
@media screen and (max-width: 1260px) {
	.ri-insight .layout-sidebar,
	.ri-insight .layout-sidebar2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); align-items: start; }
	/* The widgets' lists (270px in the template) fill their cell. */
	.ri-insight .layout-sidebar .post-preview-showcase,
	.ri-insight .layout-sidebar2 .post-preview-showcase,
	.ri-insight .layout-sidebar2 .stream-preview-showcase { grid-template-columns: 100%; }
	/* Video section: its list under the player, cards side by side. */
	.ri-insight .section-bg .layout-sidebar { grid-template-columns: 100%; }
	.ri-insight .section-bg .layout-sidebar .post-preview-showcase { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
}
@media screen and (max-width: 1260px) {
	/* The videos box player (270px in the template) fills its cell, 16:9. */
	.ri-insight .layout-sidebar2 .stream-preview .widget-media { width: 100%; height: auto; }
	.ri-insight .layout-sidebar2 .stream-preview .widget-media iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}

/* At the template's text size the video names and texts run longer than its streamer names:
   one line each, cut with "...". The event's name and date wrap instead of crowding. */
.ri-insight .stream-preview .ri-stream-video .stream-preview-streamer-name,
.ri-insight .stream-preview .ri-stream-video .stream-preview-streamer-topic { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ri-insight .stream-preview .ri-stream-video .stream-preview-streamer-topic { line-height: 1.3em; }
.ri-insight .widget-match-box .widget-title-wrap { height: auto; min-height: 40px; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 0; }
.ri-insight .widget-match-box .widget-title-wrap .widget-title, .ri-insight .widget-match-box .widget-title-wrap .widget-text { line-height: 1.4em; }

/* Live News bar: the template's red (left) and blue (right) halves run to the screen edges as
   ::before/::after with z-index -1. Inside the Kaju page a white ancestor background covered
   them; a stacking context on the bar keeps them right behind the bar. */
.ri-insight .live-news-widget-wrap { z-index: 0; }

/* Green banner (category and single views): from 768px the Kaju header (122px, absolute) lies
   over the banner's top, so the title and path sat 5px under the menu. Same 310px banner, the
   title and path centred in the green below the header (60px above and below). Below 768px the
   header sits above the banner (in the page flow) and the template spacing stays. */
@media screen and (min-width: 768px) {
	.ri-insight .banner-wrap .banner { padding-top: 182px; padding-bottom: 60px; }
}

/* Post side box, below 1260px: the template shows the avatar there as inline-block, which
   left the category initials in the icon's top corner; centred like everywhere else. */
@media screen and (max-width: 1260px) {
	.ri-insight .post-open .post-open-content.v4 .post-open-sidebar .user-avatar.ri-cat-icon { display: flex; }
}

/* Live News bar: the 1170px bar sits at a fraction of a pixel (e.g. 127.4px-1297.4px at 1440px),
   so its dark background's edge pixel showed as a thin line between the red/blue steps and the
   red/blue that runs to the screen edges. The bar's outer 2px are painted red (left) and blue
   (right) instead, so that edge pixel blends into the same colour. */
.ri-insight .live-news-widget-wrap .live-news-widget {
	background: linear-gradient(to right, #f30a5c 0, #f30a5c 2px, #252627 2px, #252627 calc(100% - 2px), #1c95f3 calc(100% - 2px), #1c95f3 100%);
}

/* Live News bar, blue steps: the template draws them by turning the red steps upside down
   (rotate 180deg). A rotated layer at a fractional position is resampled, which left hairlines
   between its 5px rows. Same shape without the rotation: the rows bottom-up, aligned right. */
.ri-insight .live-news-widget .live-news-widget-stairs.right {
	transform: none;
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-end;
}

/* Post side box on desktop (the template's v3 layout): its rule makes the avatar inline-block,
   which put the category initials in the icon's top corner (user 2026-10-15). Centred here too,
   and the link no longer adds a baseline gap under the icon. */
.ri-insight .post-open .post-open-content.v3 > .post-open-sidebar .user-avatar.ri-cat-icon { display: flex; }
.ri-insight .post-open .post-open-sidebar .ri-cat-icon-link { display: block; width: 50px; line-height: 0; }
.ri-insight .post-open .post-open-sidebar .ri-cat-icon-link .ri-cat-icon { line-height: 1; }

/* Post side box icons in one line (user 2026-10-15): the category icon and the share buttons
   in one vertical line on desktop and in one horizontal line on tablets and phones. The icon
   takes the share buttons' size (48px) and spacing (16px apart vertically). */
.ri-insight .post-open .post-open-sidebar .user-avatar.ri-cat-icon { width: 48px; height: 48px; }
.ri-insight .post-open .post-open-sidebar .ri-cat-icon-link { width: 48px; }
.ri-insight .post-open .post-open-content.v3 > .post-open-sidebar .social-links { margin-top: 16px; }
@media screen and (max-width: 1260px) {
	.ri-insight .post-open .post-open-content.v4 .post-open-sidebar { display: flex; flex-wrap: wrap; align-items: center; }
	.ri-insight .post-open .post-open-content.v4 .post-open-sidebar .ri-cat-icon-link { flex: none; margin-right: 16px; }
	.ri-insight .post-open .post-open-content.v4 .post-open-sidebar .social-links.vertical { display: flex; flex: none; align-items: center; margin-top: 0; }
	.ri-insight .post-open .post-open-content.v4 .post-open-sidebar .feature-list { flex: 0 0 100%; }
}

/* Alignment audit fixes (user 2026-10-15). */
/* Videos box play buttons: the template centres the triangle of its small play buttons with a
   padding set only for the video list; the box's buttons are centred with flex instead. */
.ri-insight .stream-preview .ri-stream-play { display: flex; align-items: center; justify-content: center; padding: 0; line-height: 0; }
.ri-insight .stream-preview .ri-stream-play svg { display: block; }
/* Video list: a long category name wrapped and pushed the date into its second line; the
   category now sits on its own line with the date below it. */
.ri-insight .post-preview.video.tiny .post-author-info .ri-post-cat { display: block; }
.ri-insight .post-preview.video.tiny .post-author-info .separator { display: none; }

/* Banner photo (a post's "Banner image", user 2026-10-15): fills the banner behind the shade
   given inline; without one the template's green stays. */
.ri-insight .banner-wrap.ri-banner-photo { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* Insights top slider (#banner-slider-3): the slides are a third of the container wide
   (e.g. 474.925px at 1440) but XM_Slider places them by the rounded offsetWidth (475px),
   which left a 0.075px seam between them; while the slider moved the white wrapper showed
   through as a thin white line (user 2026-10-20). Each slide's picture reaches 1px past its
   right edge, under the next slide, so no seam is left. The slide width (and the slider's
   own sums) stay as they are. */
.ri-insight .banner-slider.v3 .post-preview .post-preview-img-wrap { margin-right: -1px; }

/* Travel guide posts (2026-10-23, first: Colombo): the post content is wrapped in
   <div class="travel-guide"> and these rules are its design, kept inside that box so the
   site header, footer and Insights sidebar are not touched (the guide used to carry its own
   page-wide <style>). The post's featured image is the hero picture above it. */
.ri-insight .ri-post-content .travel-guide {
	--tg-ink: #1f2a24; --tg-sub: #5b6b60; --tg-accent: #0e6b52; --tg-accent-light: #e6f2ee;
	--tg-gold: #c99a3a; --tg-bg: #fbfaf6; --tg-card: #fff; --tg-border: #e4e0d4;
	background: var(--tg-bg); color: var(--tg-ink); font-family: Georgia, "Times New Roman", serif;
	line-height: 1.7; padding: 26px 24px 30px; border-radius: 10px;
}
.ri-insight .ri-post-content .travel-guide * { box-sizing: border-box; }
.ri-insight .ri-post-content .travel-guide .tg-intro { margin: 0 0 6px; }
.ri-insight .ri-post-content .travel-guide .tg-kicker {
	font-family: "Helvetica Neue", Arial, sans-serif; letter-spacing: 3px; text-transform: uppercase;
	font-size: 12px; color: var(--tg-gold); font-weight: 700; margin-bottom: 10px;
}
.ri-insight .ri-post-content .travel-guide h1 {
	font-family: "Helvetica Neue", Arial, sans-serif; font-size: clamp(28px, 5vw, 42px); line-height: 1.2;
	font-weight: 800; color: var(--tg-ink); margin: 0 0 8px;
}
.ri-insight .ri-post-content .travel-guide .tg-tagline {
	font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 300; font-size: 17px; color: var(--tg-sub); margin: 0; max-width: 640px;
}
.ri-insight .ri-post-content .travel-guide .tg-meta-strip {
	display: flex; flex-wrap: wrap; gap: 10px; font-family: "Helvetica Neue", Arial, sans-serif; font-size: 13px;
	color: var(--tg-sub); padding: 14px 0 22px; border-bottom: 1px solid var(--tg-border); margin: 0 0 26px;
}
.ri-insight .ri-post-content .travel-guide .tg-meta-strip span {
	background: var(--tg-accent-light); color: var(--tg-accent); padding: 5px 12px; border-radius: 20px; font-weight: 600;
}
.ri-insight .ri-post-content .travel-guide h2 {
	font-family: "Helvetica Neue", Arial, sans-serif; font-size: 26px; line-height: 1.3; color: var(--tg-accent);
	border-left: 5px solid var(--tg-gold); padding-left: 14px; margin: 44px 0 16px;
}
.ri-insight .ri-post-content .travel-guide h3 {
	font-family: "Helvetica Neue", Arial, sans-serif; font-size: 19px; line-height: 1.35; color: var(--tg-ink); margin: 26px 0 8px;
}
.ri-insight .ri-post-content .travel-guide p { margin: 0 0 16px; font-size: 17px; line-height: 1.7; color: #31392f; }
.ri-insight .ri-post-content .travel-guide .tg-lede { font-size: 19px; color: #2b352e; border-bottom: 1px solid var(--tg-border); padding-bottom: 24px; }
.ri-insight .ri-post-content .travel-guide .tg-figure { margin: 22px 0; }
.ri-insight .ri-post-content .travel-guide .tg-figure img {
	width: 100%; height: auto; border-radius: 8px; display: block; box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.ri-insight .ri-post-content .travel-guide figcaption {
	font-family: "Helvetica Neue", Arial, sans-serif; font-size: 12.5px; color: var(--tg-sub); margin-top: 8px; text-align: center;
}
.ri-insight .ri-post-content .travel-guide .tg-quickfacts {
	background: var(--tg-card); border: 1px solid var(--tg-border); border-radius: 10px; padding: 20px 24px; margin: 28px 0;
	font-family: "Helvetica Neue", Arial, sans-serif;
}
.ri-insight .ri-post-content .travel-guide .tg-quickfacts h4 {
	margin: 0 0 12px; color: var(--tg-accent); font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase;
}
.ri-insight .ri-post-content .travel-guide .tg-quickfacts table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.ri-insight .ri-post-content .travel-guide .tg-quickfacts td { padding: 7px 6px; border-bottom: 1px solid var(--tg-border); vertical-align: top; color: var(--tg-ink); }
.ri-insight .ri-post-content .travel-guide .tg-quickfacts td:first-child { color: var(--tg-sub); width: 36%; font-weight: 600; }
.ri-insight .ri-post-content .travel-guide .tg-keyword-row {
	font-family: "Helvetica Neue", Arial, sans-serif; font-size: 13px; color: var(--tg-sub); background: var(--tg-accent-light);
	padding: 12px 18px; border-radius: 8px; margin: 18px 0 30px;
}
.ri-insight .ri-post-content .travel-guide .tg-keyword-row b { color: var(--tg-accent); }
.ri-insight .ri-post-content .travel-guide .tg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ri-insight .ri-post-content .travel-guide .tg-sight-card {
	background: var(--tg-card); border: 1px solid var(--tg-border); border-radius: 10px; padding: 20px 22px; margin: 0;
}
.ri-insight .ri-post-content .travel-guide .tg-sight-card h3 { margin-top: 0; color: var(--tg-accent); }
.ri-insight .ri-post-content .travel-guide .tg-sight-card p:last-child { margin-bottom: 0; }
.ri-insight .ri-post-content .travel-guide ul { padding-left: 20px; margin: 0 0 16px; list-style: disc; }
.ri-insight .ri-post-content .travel-guide li { margin-bottom: 8px; font-size: 16.5px; line-height: 1.6; color: #31392f; }
.ri-insight .ri-post-content .travel-guide .tg-map-wrap {
	border-radius: 10px; overflow: hidden; border: 1px solid var(--tg-border); box-shadow: 0 6px 18px rgba(0, 0, 0, .10); margin: 18px 0 8px;
}
.ri-insight .ri-post-content .travel-guide .tg-map-wrap iframe { width: 100%; height: 420px; border: 0; display: block; }
.ri-insight .ri-post-content .travel-guide .tg-map-caption {
	font-family: "Helvetica Neue", Arial, sans-serif; font-size: 13px; color: var(--tg-sub);
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 30px;
}
.ri-insight .ri-post-content .travel-guide .tg-map-caption a { color: var(--tg-accent); text-decoration: none; font-weight: 700; }
.ri-insight .ri-post-content .travel-guide .tg-faq { border-top: 1px solid var(--tg-border); padding-top: 6px; }
.ri-insight .ri-post-content .travel-guide .tg-faq details { border-bottom: 1px solid var(--tg-border); padding: 14px 0; }
.ri-insight .ri-post-content .travel-guide .tg-faq summary {
	font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: 16px; color: var(--tg-ink); cursor: pointer;
}
.ri-insight .ri-post-content .travel-guide .tg-faq p { margin: 10px 0 0; font-size: 15.5px; }
.ri-insight .ri-post-content .travel-guide .tg-sources {
	margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--tg-border);
	font-family: "Helvetica Neue", Arial, sans-serif; font-size: 12.5px; color: var(--tg-sub);
}
.ri-insight .ri-post-content .travel-guide .tg-sources p { font-size: 12.5px; line-height: 1.6; color: var(--tg-sub); margin: 0; }
.ri-insight .ri-post-content .travel-guide .tg-source-note { font-size: 12px; color: #8b8b7d; margin-top: 6px; }
@media (max-width: 640px) {
	.ri-insight .ri-post-content .travel-guide { padding: 20px 14px 24px; }
	.ri-insight .ri-post-content .travel-guide .tg-grid2 { grid-template-columns: 1fr; }
	.ri-insight .ri-post-content .travel-guide .tg-map-wrap iframe { height: 320px; }
}

/* "Post Categories": the sub-categories of the viewed main category, under it and lined up
   with the category names (32px icon + 12px gap); quieter than the main rows (2026-10-23). */
.ri-insight .ri-cat-list .ri-cat-sublist { margin: -4px 0 10px 44px; padding: 0; list-style: none; }
.ri-insight .ri-cat-list .ri-cat-sublist a,
.ri-insight .ri-cat-list .ri-cat-item.active .ri-cat-sublist a { gap: 10px; padding: 6px 0; color: #6b6b6b; font-size: .8em; font-weight: 600; }
.ri-insight .ri-cat-list .ri-cat-sublist .ri-cat-count,
.ri-insight .ri-cat-list .ri-cat-item.active .ri-cat-sublist .ri-cat-count { background: #f1f1f1; color: #6b6b6b; }
.ri-insight .ri-cat-list .ri-cat-sublist a:hover,
.ri-insight .ri-cat-list .ri-cat-item.active .ri-cat-sublist a:hover,
.ri-insight .ri-cat-list .ri-cat-item.active .ri-cat-sublist .ri-cat-subitem.active a { color: #1c95f3; }
.ri-insight .ri-cat-list .ri-cat-item.active .ri-cat-sublist .ri-cat-subitem.active .ri-cat-count { background: #1c95f3; color: #fff; }

/* Travel guide: the "Sri Lanka: The Complete Guide" contents post (regions with their places). */
.ri-insight .ri-post-content .travel-guide .tg-stat {
	font-family: "Helvetica Neue", Arial, sans-serif; font-size: 14px; color: var(--tg-gold); font-weight: 700; margin: 14px 0 0;
}
.ri-insight .ri-post-content .travel-guide .tg-region-nav {
	display: flex; flex-wrap: wrap; gap: 8px; padding: 22px 0 30px; border-bottom: 1px solid var(--tg-border); margin-bottom: 10px;
	font-family: "Helvetica Neue", Arial, sans-serif;
}
.ri-insight .ri-post-content .travel-guide .tg-region-nav a {
	font-size: 13px; font-weight: 700; color: var(--tg-accent); background: var(--tg-accent-light); padding: 8px 14px; border-radius: 20px; text-decoration: none;
}
.ri-insight .ri-post-content .travel-guide .tg-region-nav a:hover { background: var(--tg-accent); color: #fff; }
.ri-insight .ri-post-content .travel-guide .tg-region { padding: 36px 0 10px; border-bottom: 1px solid var(--tg-border); scroll-margin-top: 20px; }
.ri-insight .ri-post-content .travel-guide .tg-region h2 { margin: 0 0 8px; font-size: 28px; }
.ri-insight .ri-post-content .travel-guide .tg-region-tagline { font-size: 16px; margin: 0 0 4px; max-width: 680px; }
.ri-insight .ri-post-content .travel-guide .tg-region-count {
	font-family: "Helvetica Neue", Arial, sans-serif; font-size: 12.5px; color: var(--tg-sub); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin: 0 0 18px;
}
.ri-insight .ri-post-content .travel-guide .tg-subhead {
	font-family: "Helvetica Neue", Arial, sans-serif; font-size: 13px; color: var(--tg-gold); text-transform: uppercase; letter-spacing: 1px; margin: 20px 0 8px; font-weight: 700;
}
.ri-insight .ri-post-content .travel-guide ul.tg-toc-list {
	list-style: none; margin: 0 0 4px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 20px;
}
.ri-insight .ri-post-content .travel-guide ul.tg-toc-list li { margin: 0; font-size: 15.5px; }
.ri-insight .ri-post-content .travel-guide ul.tg-toc-list a {
	color: var(--tg-ink); text-decoration: none; display: block; padding: 6px 0; border-bottom: 1px solid transparent;
}
.ri-insight .ri-post-content .travel-guide ul.tg-toc-list a:hover { color: var(--tg-accent); border-bottom-color: var(--tg-accent); }

/* Travel guide: every place's link back to its region in the contents post (user 2026-10-24). */
.ri-insight .ri-post-content .travel-guide .tg-back-to-guide {
	margin: 40px 0 0; padding: 14px 18px; border-radius: 8px; background: var(--tg-accent-light);
	font-family: "Helvetica Neue", Arial, sans-serif; font-size: 14px; color: var(--tg-sub);
}
.ri-insight .ri-post-content .travel-guide .tg-back-to-guide a { color: var(--tg-accent); font-weight: 700; text-decoration: none; }
.ri-insight .ri-post-content .travel-guide .tg-back-to-guide a:hover { text-decoration: underline; }

/* B2B articles (Dsigngo_B2B_Service_Provider_Content.docx, user 2026-10-31):
   the "Get a Free Quote" style call to action, in the header's FREE QUOTE red. */
.ri-insight .ri-post-content .b2b-cta { margin: 24px 0 8px; }
.ri-insight .ri-post-content .b2b-cta-btn {
	display: inline-block; padding: 12px 28px; border-radius: 4px; background: #cd2122; color: #fff;
	font-family: "Exo", sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
	text-decoration: none; transition: background 0.2s ease;
}
.ri-insight .ri-post-content .b2b-cta-btn:hover { background: #a8191a; color: #fff; text-decoration: none; }

/* Tables in the docx articles (2026-11-01): wide tables scroll sideways on phones
   instead of widening the page; a light header row. */
.ri-insight .ri-post-content .ri-table-wrap { overflow-x: auto; margin: 20px 0; -webkit-overflow-scrolling: touch; }
/* width 0 + min-width 100%: the table's min-width must not widen the post's grid column on phones */
.ri-insight .ri-post-content .ri-table-wrap { width: 0; min-width: 100%; }
.ri-insight .ri-post-content .ri-table-wrap table { margin: 0; min-width: 480px; font-size: 15px; line-height: 1.5; }
.ri-insight .ri-post-content .ri-table-wrap th { background: #f7f7f7; color: #363636; font-weight: 700; }

/* Tea & coffee article diagrams (2026-11-08, Hakgala tea / Desco coffee articles): the figures of the
   user's HTML articles (CSS diagrams + tea grade photos) are kept in the posts; their styles, from the
   articles' own <style>, scoped to the post. Tea = green, coffee = brown (class on the figure). */
.ri-insight .ri-post-content .dsg-fig { --dsg-accent: #2f6b3a; --dsg-accent-soft: #e8f1e9; --dsg-gold: #b8892a; --dsg-ink: #1d1d1f; --dsg-muted: #5f6368; --dsg-line: #e3e3e6; --dsg-soft: #f6f6f8; margin: 24px 0 28px; }
.ri-insight .ri-post-content .dsg-fig.dsg-coffee { --dsg-accent: #6b4226; --dsg-accent-soft: #f4ece4; --dsg-gold: #b5793a; }
.ri-insight .ri-post-content .dsg-fig.dsg-it { --dsg-accent: #0d47a1; --dsg-accent-soft: #e8eef8; --dsg-gold: #1565c0; } /* Raiden IT articles (2026-11-09) */
.ri-insight .ri-post-content .dsg-fig.dsg-ayu { --dsg-accent: #1f6b45; --dsg-accent-soft: #eaf4ee; --dsg-gold: #c8961e; } /* Hakgala Herbal Cosmetics articles (2026-11-11) */
.ri-insight .ri-post-content .dsg-fig.dsg-udari { --dsg-accent: #9a3b12; --dsg-accent-soft: #fbefe6; --dsg-gold: #c8961e; } /* Udari Nuts & Spices articles (2026-11-11) */
.ri-insight .ri-post-content .dsg-fig.dsg-nwb { --dsg-accent: #1f5fa6; --dsg-accent-soft: #e9f1fb; --dsg-gold: #e2b31c; } /* Non-woven bag articles (2026-11-13) */
.ri-insight .ri-post-content .dsg-fig * { box-sizing: border-box; }
.ri-insight .ri-post-content .dsg-fig img.dsg-photo { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--dsg-line); background: #fff; }
.ri-insight .ri-post-content .dsg-fig > figcaption { font-size: 13px; color: var(--dsg-muted); margin-top: 8px; line-height: 1.5; }
.ri-insight .ri-post-content .dsg-fig .dsg-diagram { border: 1px solid var(--dsg-line); border-radius: 12px; padding: 18px; background: #fff; color: var(--dsg-ink); font-size: 15px; line-height: 1.5; }
.ri-insight .ri-post-content .dsg-fig .dsg-fig-title { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dsg-muted); margin: 0 0 12px; }
.ri-insight .ri-post-content .dsg-fig .dsg-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ri-insight .ri-post-content .dsg-fig .dsg-steps li { margin: 0; background: var(--dsg-accent-soft); border-radius: 10px; padding: 12px; position: relative; font-size: 15px; line-height: 1.4; list-style: none; }
.ri-insight .ri-post-content .dsg-fig .dsg-steps li::before { content: none; }
.ri-insight .ri-post-content .dsg-fig .dsg-steps li b { display: block; margin-bottom: 4px; }
.ri-insight .ri-post-content .dsg-fig .dsg-steps li span { color: var(--dsg-muted); font-size: 13.5px; }
.ri-insight .ri-post-content .dsg-fig .dsg-steps li i { font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--dsg-accent); color: #fff; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.ri-insight .ri-post-content .dsg-fig .dsg-flowrow { margin: 0 0 14px; }
.ri-insight .ri-post-content .dsg-fig .dsg-flowrow:last-child { margin: 0; }
.ri-insight .ri-post-content .dsg-fig .dsg-flowrow > b { display: block; margin: 0 0 6px; }
.ri-insight .ri-post-content .dsg-fig .dsg-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ri-insight .ri-post-content .dsg-fig .dsg-chips span { background: var(--dsg-accent-soft); border-radius: 999px; padding: 4px 10px; font-size: 14px; }
.ri-insight .ri-post-content .dsg-fig .dsg-chips em { font-style: normal; color: var(--dsg-muted); }
.ri-insight .ri-post-content .dsg-fig .dsg-rows { display: grid; gap: 10px; }
.ri-insight .ri-post-content .dsg-fig .dsg-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; font-size: 14.5px; }
.ri-insight .ri-post-content .dsg-fig .dsg-track { position: relative; height: 22px; background: var(--dsg-soft); border-radius: 4px; }
.ri-insight .ri-post-content .dsg-fig .dsg-band { position: absolute; top: 0; bottom: 0; background: var(--dsg-accent); border-radius: 4px; min-width: 6px; }
.ri-insight .ri-post-content .dsg-fig .dsg-band:hover { filter: brightness(1.15); }
.ri-insight .ri-post-content .dsg-fig .dsg-val { display: block; font-size: 13px; color: var(--dsg-muted); margin-top: 2px; }
.ri-insight .ri-post-content .dsg-fig .dsg-axis { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: 12px; color: var(--dsg-muted); margin-top: 6px; }
.ri-insight .ri-post-content .dsg-fig .dsg-axis div { display: flex; justify-content: space-between; }
.ri-insight .ri-post-content .dsg-fig .dsg-grad { height: 10px; border-radius: 5px; background: linear-gradient(90deg, #7fae4f, #c9a24a, #9a5b2e, #5a2f17); }
.ri-insight .ri-post-content .dsg-fig .dsg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ri-insight .ri-post-content .dsg-fig .dsg-bands3 > div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 10px; margin: 0 0 8px; }
.ri-insight .ri-post-content .dsg-fig .dsg-bands3 > div:nth-child(1) { background: var(--dsg-accent); color: #fff; }
.ri-insight .ri-post-content .dsg-fig .dsg-bands3 > div:nth-child(1) .dsg-chips span { background: rgba(255, 255, 255, .18); }
.ri-insight .ri-post-content .dsg-fig .dsg-bands3 > div:nth-child(2) { background: var(--dsg-accent-soft); }
.ri-insight .ri-post-content .dsg-fig .dsg-bands3 > div:nth-child(2) .dsg-chips span,
.ri-insight .ri-post-content .dsg-fig .dsg-bands3 > div:nth-child(3) .dsg-chips span { background: #fff; }
.ri-insight .ri-post-content .dsg-fig .dsg-bands3 > div:nth-child(3) { background: var(--dsg-soft); }
.ri-insight .ri-post-content .dsg-fig .dsg-bands3 small { display: block; opacity: .8; }
.ri-insight .ri-post-content .dsg-fig .dsg-cherry { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: center; }
.ri-insight .ri-post-content .dsg-fig .dsg-cherry ol { margin: 0; font-size: 15px; }
.ri-insight .ri-post-content .dsg-fig .dsg-beans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center; font-size: 14px; }
.ri-insight .ri-post-content .dsg-fig .dsg-beans div { background: var(--dsg-soft); border-radius: 10px; padding: 12px 6px; }
.ri-insight .ri-post-content .dsg-fig .dsg-beans svg { display: block; margin: 0 auto 6px; height: 80px; width: auto; }
/* the matrix table scrolls inside its box on phones (width 0 + min-width 100%, as .ri-table-wrap) */
.ri-insight .ri-post-content .dsg-fig .dsg-table-wrap { overflow-x: auto; width: 0; min-width: 100%; -webkit-overflow-scrolling: touch; }
.ri-insight .ri-post-content .dsg-fig .dsg-matrix { margin: 0; min-width: 420px; font-size: 14px; }
.ri-insight .ri-post-content .dsg-fig .dsg-matrix td, .ri-insight .ri-post-content .dsg-fig .dsg-matrix th { text-align: center; }
.ri-insight .ri-post-content .dsg-fig .dsg-matrix td:first-child, .ri-insight .ri-post-content .dsg-fig .dsg-matrix th:first-child { text-align: left; }
@media (max-width: 640px) {
	.ri-insight .ri-post-content .dsg-fig .dsg-two { grid-template-columns: 1fr; }
	.ri-insight .ri-post-content .dsg-fig .dsg-row, .ri-insight .ri-post-content .dsg-fig .dsg-axis { grid-template-columns: 80px 1fr; }
	.ri-insight .ri-post-content .dsg-fig .dsg-bands3 > div { grid-template-columns: 1fr; }
	.ri-insight .ri-post-content .dsg-fig .dsg-cherry { grid-template-columns: 1fr; }
	.ri-insight .ri-post-content .dsg-fig .dsg-cherry svg { max-width: 220px; margin: 0 auto; display: block; }
	.ri-insight .ri-post-content .dsg-fig .dsg-beans { grid-template-columns: repeat(2, 1fr); }
}

/* Long links (source URLs) may break anywhere (2026-11-08): an unbroken URL in a "Sources" list made the
   post column wider than a phone screen (Arabica article 525px at 375). */
.ri-insight .ri-post-content a { overflow-wrap: anywhere; }

/* More Posts (2026-11-13): a card whose long title leaves no room for the excerpt shows none
   (class set by ri-home.js when the text would end below the 270px card). */
.ri-insight .ri-fit-excerpt .post-preview.ri-no-excerpt .post-preview-text { display: none; }