/**
 * Guide single (rcm_guide): top and section dividers use shared .rcm-section-border (accent + track).
 */

/* Elementor Container Responsive - elementor-element-a462109 */
.elementor-340 .elementor-element.elementor-element-a462109 {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.elementor-340 .elementor-element.elementor-element-a462109 .e-con-inner {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Tablet Responsive (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 768px) {
    .elementor-340 .elementor-element.elementor-element-a462109 {
        --display: flex;
        --padding-top: 0px;
        --padding-bottom: 0px;
        --padding-left: 0px;
        --padding-right: 0px;
        width: 100%;
        max-width: 100%;
    }

    .elementor-340 .elementor-element.elementor-element-a462109 .e-con-inner {
        max-width: 100%;
        padding: 0 30px;
    }
}

/* Mobile Responsive (< 767px) */
@media (max-width: 767px) {
    .elementor-340 .elementor-element.elementor-element-a462109 {
        --display: flex;
        --padding-top: 0px;
        --padding-bottom: 0px;
        --padding-left: 0px;
        --padding-right: 0px;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .elementor-340 .elementor-element.elementor-element-a462109 .e-con-inner {
        width: 100%;
        max-width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }

    /* Box model on shell only — avoid * { max-width:100% } (breaks flex cross-size → 1-char “columns”). */
    .elementor-340 .elementor-element.elementor-element-a462109,
    .elementor-340 .elementor-element.elementor-element-a462109 .e-con-inner,
    .elementor-340 .elementor-element.elementor-element-a462109 .elementor-widget-container {
        box-sizing: border-box;
    }

    /* Flex containers should wrap on mobile */
    .elementor-340 .elementor-element.elementor-element-a462109 .e-con,
    .elementor-340 .elementor-element.elementor-element-a462109 .e-con-inner {
        flex-wrap: wrap;
    }

    /* Images and media should be responsive */
    .elementor-340 .elementor-element.elementor-element-a462109 img,
    .elementor-340 .elementor-element.elementor-element-a462109 video,
    .elementor-340 .elementor-element.elementor-element-a462109 iframe {
        max-width: 100%;
        height: auto;
    }

    /* Text elements should wrap properly */
    .elementor-340 .elementor-element.elementor-element-a462109 h1,
    .elementor-340 .elementor-element.elementor-element-a462109 h2,
    .elementor-340 .elementor-element.elementor-element-a462109 h3,
    .elementor-340 .elementor-element.elementor-element-a462109 h4,
    .elementor-340 .elementor-element.elementor-element-a462109 h5,
    .elementor-340 .elementor-element.elementor-element-a462109 h6,
    .elementor-340 .elementor-element.elementor-element-a462109 p,
    .elementor-340 .elementor-element.elementor-element-a462109 span {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /*
     * Guide single template (.elementor-340): Elementor flex + height:100% chains can inflate the
     * shortcode widget to thousands of px on mobile (empty band under content). Same fix as home (7) / guides (270).
     */
    .elementor.elementor-340 .e-con.e-flex > .e-con-inner:has(.rcm-guide-single),
    .elementor.elementor-340 .e-con.e-flex > .e-con-inner:has([data-rcm-shortcode="guide_single"]) {
        justify-content: flex-start !important;
        align-content: flex-start !important;
        /* stretch = full column width; flex-start shrinks widgets → max-width:100% cascades to ~0 width text */
        align-items: stretch !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .elementor.elementor-340 .e-con:has(.rcm-guide-single) > .e-con-inner {
        height: auto !important;
        min-height: 0 !important;
        flex-grow: 0 !important;
    }

    .elementor.elementor-340 .elementor-widget.elementor-widget-shortcode:has(.rcm-guide-single) > .elementor-widget-container,
    .elementor.elementor-340 .elementor-widget.elementor-widget-shortcode:has([data-rcm-shortcode="guide_single"]) > .elementor-widget-container {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .elementor.elementor-340 .elementor-widget.elementor-widget-shortcode:has(.rcm-guide-single) .elementor-shortcode,
    .elementor.elementor-340 .elementor-widget.elementor-widget-shortcode:has([data-rcm-shortcode="guide_single"]) .elementor-shortcode {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .elementor.elementor-340 .elementor-widget.elementor-widget-shortcode:has(.rcm-guide-single),
    .elementor.elementor-340 .elementor-widget.elementor-widget-shortcode:has([data-rcm-shortcode="guide_single"]) {
        width: 100% !important;
        max-width: 100% !important;
        height: fit-content !important;
        min-height: 0 !important;
        flex-grow: 0 !important;
        align-self: stretch !important;
    }
}

/* Extra Small Screens (< 480px) */
@media (max-width: 480px) {
    .elementor-340 .elementor-element.elementor-element-a462109 .e-con-inner {
        padding: 0 12px;
    }

    /* Force full width for all containers */
    .elementor-340 .elementor-element.elementor-element-a462109 .e-con-boxed {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Adjust flex direction for better mobile layout */
    .elementor-340 .elementor-element.elementor-element-a462109.e-flex {
        flex-direction: column;
    }
}

/*
 * Hero dead band: plugin stretches the gray panel to match min-height 438px image column
 * and uses margin-top:auto on SPONSORED — huge empty gap when the shortcode column is narrow.
 * @container catches Elementor-narrow columns; 1024px media covers viewports where CQ is absent
 * or inner width is still "desktop" in px but the column is effectively mobile.
 */
@container (max-width: 720px) {
	.rcm-guide-single .rcm-guide-single__hero:not(.rcm-guide-single__hero--no-image) {
		align-items: flex-start !important;
		min-height: 0 !important;
		height: auto !important;
	}

	.rcm-guide-single .rcm-guide-single__hero:not(.rcm-guide-single__hero--no-image) .rcm-guide-single__hero-panel {
		align-self: flex-start !important;
		height: auto !important;
		min-height: 0 !important;
	}

	.rcm-guide-single .rcm-guide-single__hero:not(.rcm-guide-single__hero--no-image) .rcm-guide-single__hero-visual {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		align-self: stretch !important;
		min-height: clamp(180px, 40cqi, 240px) !important;
		max-height: none !important;
	}

	.rcm-guide-single .rcm-guide-single__sponsored {
		margin-top: 16px !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.rcm-guide-single .rcm-guide-single__hero:not(.rcm-guide-single__hero--no-image) {
		align-items: flex-start !important;
		min-height: 0 !important;
		height: auto !important;
	}

	.rcm-guide-single .rcm-guide-single__hero:not(.rcm-guide-single__hero--no-image) .rcm-guide-single__hero-panel {
		align-self: flex-start !important;
		height: auto !important;
		min-height: 0 !important;
	}

	.rcm-guide-single .rcm-guide-single__hero:not(.rcm-guide-single__hero--no-image) .rcm-guide-single__hero-visual {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		align-self: stretch !important;
		max-height: none !important;
	}

	.rcm-guide-single .rcm-guide-single__sponsored {
		margin-top: 16px !important;
	}
}

.elementor-widget-shortcode:has([data-rcm-shortcode="guide_single"]) > .elementor-widget-container,
.elementor-widget-shortcode:has([data-rcm-shortcode="guide_single"]) .elementor-shortcode,
.elementor-widget-shortcode:has(.rcm-guide-single) > .elementor-widget-container,
.elementor-widget-shortcode:has(.rcm-guide-single) .elementor-shortcode {
	width: 100% !important;
	max-width: 100% !important;
	min-height: 0 !important;
	height: auto !important;
}

.elementor-widget-shortcode:has([data-rcm-shortcode="guide_single"]),
.elementor-widget-shortcode:has(.rcm-guide-single) {
	width: 100% !important;
	max-width: 100% !important;
	flex-grow: 0 !important;
	min-height: 0 !important;
}

/* Match article / directory single: 48px topic accent + flex gray track */
.rcm-guide-single .rcm-guide-single__section-border.rcm-section-border {
	width: 100% !important;
	margin-bottom: 20px !important;
	margin-top: 0 !important;
	box-sizing: border-box !important;
	height: 6px !important;
	background-image: none !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	position: relative !important;
}

.rcm-guide-single .rcm-guide-single__section-border.rcm-section-border .rcm-section-border__accent {
	flex: 0 0 48px !important;
	width: 48px !important;
	min-width: 48px !important;
	max-width: 48px !important;
	height: 6px !important;
}

.rcm-guide-single .rcm-guide-single__section-border.rcm-section-border .rcm-section-border__accent svg {
	width: 48px !important;
	height: 6px !important;
}

.rcm-guide-single .rcm-guide-single__section-border.rcm-section-border .rcm-section-border__track {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: 6px !important;
}

.rcm-guide-single .rcm-guide-single__section-border.rcm-section-border .rcm-section-border__track svg {
	width: 100% !important;
	height: 6px !important;
	display: block;
}

/* Top-of-page line only (legacy target was .rcm-guide-single__rule inside this wrapper). */
.rcm-guide-single .rcm-guide-single__container > .rcm-guide-single__section-border.rcm-section-border {
	margin-top: 20px !important;
}

/* Same asset as sections when older PHP still outputs __top-divider */
.rcm-guide-single .rcm-guide-single__top-divider {
	width: 100% !important;
	height: 6px !important;
	margin-top: 0 !important;
	background-color: transparent !important;
	background-image: none !important;
	background-repeat: no-repeat !important;
	background-position: left center !important;
	background-size: 100% 6px !important;
	border: none !important;
	box-shadow: none !important;
	position: relative !important;
}

.rcm-guide-single .rcm-guide-single__top-divider-active {
	display: none !important;
}

/* All assigned topics (icon + label), aligned with article/directory singles + header Topics */
.rcm-guide-single .rcm-guide-single__topics-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	padding: 35px 0 33px;
	box-sizing: border-box;
}

.rcm-guide-single .rcm-guide-single__topic-chip {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	max-width: 100%;
	text-decoration: none;
	color: inherit;
}

.rcm-guide-single .rcm-guide-single__topic-chip:hover .rcm-guide-single__breadcrumb-label {
	text-decoration: underline;
}

.rcm-guide-single .rcm-guide-single__topic-chip .rcm-guide-single__breadcrumb-icon {
	background-color: var(--chip-topic-color, var(--rcm-topic-color, #7153b0)) !important;
	background-image: none !important;
}

/* Topics row only: smaller disc + glyph so icons don’t outweigh the label (plugin default ~29px / full-bleed img) */
.rcm-guide-single .rcm-guide-single__topics-row .rcm-guide-single__topic-chip {
	gap: 10px;
}

.rcm-guide-single .rcm-guide-single__topics-row .rcm-guide-single__breadcrumb-icon {
	width: 22px !important;
	height: 22px !important;
	border-radius: 11px !important;
	flex-shrink: 0;
}

.rcm-guide-single .rcm-guide-single__topics-row .rcm-guide-single__breadcrumb-icon svg {
	width: 10px !important;
	height: 10px !important;
}

.rcm-guide-single .rcm-guide-single__topics-row .rcm-guide-single__breadcrumb-icon img {
	width: 58% !important;
	height: 58% !important;
	max-width: 58% !important;
	max-height: 58% !important;
	object-fit: contain !important;
}

/* Lets hero stack when the shortcode column is narrow (not only the viewport) */
.rcm-guide-single__container {
	container-type: inline-size;
}

/* Hero image: full-bleed in column; stretch to panel height in row. Beats inline height:fit-content. */
.rcm-guide-single__hero-visual {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	align-self: stretch !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

/* Mobile Responsive Enhancements */
@media (max-width: 767px) {
	/* Container adjustments for narrow screens */
	.rcm-guide-single {
		padding-bottom: 24px !important;
	}

	.rcm-guide-single__container {
		padding: 0 16px !important;
	}

	/* Topics row - better wrapping on mobile */
	.rcm-guide-single .rcm-guide-single__topics-row {
		padding: 20px 0 16px !important;
		gap: 10px 16px !important;
	}

	.rcm-guide-single .rcm-guide-single__topics-row .rcm-guide-single__breadcrumb-icon {
		width: 20px !important;
		height: 20px !important;
		border-radius: 10px !important;
	}

	.rcm-guide-single .rcm-guide-single__topics-row .rcm-guide-single__breadcrumb-icon svg {
		width: 9px !important;
		height: 9px !important;
	}

	.rcm-guide-single .rcm-guide-single__topic-chip {
		gap: 8px !important;
	}

	/* Breadcrumb adjustments */
	.rcm-guide-single__breadcrumb {
		padding: 20px 0 16px !important;
		gap: 10px !important;
		flex-wrap: wrap !important;
	}

	.rcm-guide-single__breadcrumb-icon {
		width: 24px !important;
		height: 24px !important;
		border-radius: 12px !important;
	}

	.rcm-guide-single__breadcrumb-icon svg {
		width: 12px !important;
		height: 12px !important;
	}

	.rcm-guide-single__breadcrumb-label {
		font-size: 13px !important;
		line-height: 1.3 !important;
	}

	/* Hero — Figma split layout; mobile stacks (image under copy via column-reverse in plugin) */
	.rcm-guide-single__hero {
		width: 100% !important;
		margin: 12px 0 16px !important;
		min-height: 0 !important;
		height: auto !important;
		padding: 0 !important;
		border-radius: 12px !important;
		flex-direction: column-reverse !important;
		justify-content: flex-start !important;
		background-color: transparent !important;
		background-image: none !important;
		border: none !important;
		box-shadow: none !important;
	}

	.rcm-guide-single__hero::after {
		display: none !important;
		content: none !important;
	}

	.rcm-guide-single__hero-panel {
		padding: 20px 16px 0 !important;
		max-width: none !important;
		width: 100% !important;
		flex: 1 1 auto !important;
		background: #f5f5f5 !important;
		border-radius: 0 0 12px 12px !important;
	}

	.rcm-guide-single__hero-visual {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		align-self: stretch !important;
		min-height: 200px !important;
		max-height: none !important;
		border-radius: 12px 12px 0 0 !important;
	}

	.rcm-guide-single__hero-content {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		bottom: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		align-items: flex-start !important;
		text-align: left !important;
		z-index: 2 !important;
	}

	.rcm-guide-single__hero:has(.rcm-guide-single__sponsored) .rcm-guide-single__hero-content {
		bottom: auto !important;
	}

	.rcm-guide-single__hero-content:has(.rcm-guide-single__hero-subtitle) .rcm-guide-single__hero-title {
		margin-bottom: 12px !important;
	}

	.rcm-guide-single__hero-title {
		font-size: 22px !important;
		line-height: 1.3 !important;
		margin-bottom: 12px !important;
		text-align: left !important;
	}

	.rcm-guide-single__hero-subtitle {
		font-size: 14px !important;
		line-height: 1.5 !important;
		text-align: left !important;
		margin: 0 0 16px !important;
	}

	.rcm-guide-single__sponsored {
		position: relative !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: 60px !important;
		padding: 12px 16px !important;
		border-radius: 0 0 12px 12px !important;
		margin-top: 0 !important;
		margin-left: 0 !important;
		z-index: 3 !important;
	}

	.rcm-guide-single__sponsored-text {
		width: 100% !important;
		font-size: 12px !important;
		line-height: 1.4 !important;
	}

	/* Meta section mobile - improved styling */
	.rcm-guide-single__meta {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: flex-end !important;
		gap: 12px 16px !important;
		padding: 16px !important;
		margin-left: 0 !important;
		margin-bottom: 24px !important;
		background: #f8f9fa !important;
		border-radius: 8px !important;
		border: none !important;
		box-shadow: none !important;
	}

	.rcm-guide-single__meta-right {
		width: auto !important;
		justify-content: flex-end !important;
		gap: 8px !important;
	}

	.rcm-guide-single__action-btn {
		padding: 8px 16px !important;
		font-size: 13px !important;
		background: #ffffff !important;
		border: 1px solid #dee2e6 !important;
		border-radius: 6px !important;
		box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
		transition: all 0.2s ease !important;
	}

	.rcm-guide-single__action-btn:hover {
		background: var(--rcm-topic-color, #7153b0) !important;
		color: #ffffff !important;
		border-color: var(--rcm-topic-color, #7153b0) !important;
	}

	.rcm-guide-single__action-btn svg {
		width: 14px !important;
		height: 14px !important;
	}

	/* Intro layout mobile - improved styling */
	.rcm-guide-single__intro-layout {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
		padding: 0 !important;
		margin-bottom: 20px !important;
		background: transparent !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		border: none !important;
	}

	.rcm-guide-single__intro-main {
		max-width: 100% !important;
	}

	.rcm-guide-single__intro-title {
		font-size: 22px !important;
		line-height: 1.4 !important;
		margin-bottom: 16px !important;
		width: 100% !important;
		color: #183354 !important;
		font-weight: 700 !important;
	}

	.rcm-guide-single__intro-content {
		font-size: 15px !important;
		line-height: 1.7 !important;
		width: 100% !important;
		text-align: left !important;
		color: #495057 !important;
	}

	.rcm-guide-single__intro-content p {
		margin-bottom: 16px !important;
	}

	.rcm-guide-single__intro-content p:last-child {
		margin-bottom: 0 !important;
	}

	.rcm-guide-single__intro-content h2,
	.rcm-guide-single__intro-content h3 {
		font-size: 18px !important;
		margin-bottom: 12px !important;
		margin-top: 20px !important;
		color: var(--rcm-topic-color, #7153b0) !important;
	}

	.rcm-guide-single__intro-sidebar {
		max-width: 100% !important;
		justify-self: center !important;
		padding-top: 20px !important;
		border-top: 1px solid #e9ecef !important;
	}

	/* Ad sidebar mobile */
	.rcm-guide-single__ad-sidebar {
		width: 100% !important;
		max-width: 300px !important;
		margin: 0 auto !important;
	}

	.rcm-guide-single__ad-placeholder {
		width: 100% !important;
		max-width: 300px !important;
	}

	/* Section mobile */
	.rcm-guide-single__section {
		margin-bottom: 30px !important;
	}

	.rcm-guide-single__section-title {
		font-size: 20px !important;
	}

	.rcm-guide-single__section-desc {
		font-size: 14px !important;
		margin-bottom: 20px !important;
	}

	/* Articles grid mobile */
	.rcm-guide-single__articles-grid {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}

	.rcm-guide-single__article-card {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 12px !important;
	}

	.rcm-guide-single__article-thumb {
		width: 100% !important;
		height: 180px !important;
	}

	.rcm-guide-single__article-content {
		width: 100% !important;
	}

	.rcm-guide-single__article-tag {
		font-size: 11px !important;
	}

	.rcm-guide-single__article-title {
		font-size: 16px !important;
	}

	/* Leaderboard ad mobile */
	.rcm-guide-single__ad-placeholder-leaderboard {
		height: auto !important;
		min-height: 60px !important;
		aspect-ratio: 728 / 90 !important;
		margin-top: 20px !important;
		border-radius: 4px !important;
	}

	.rcm-guide-single .rcm-guide-single__section-border.rcm-section-border {
		margin-bottom: 24px !important;
	}
}

/* Extra small screens */
@media (max-width: 480px) {
	.rcm-guide-single__container {
		padding: 0 12px !important;
	}

	.rcm-guide-single__hero-panel {
		padding: 20px 12px 0 !important;
	}

	.rcm-guide-single__hero-visual {
		width: 100% !important;
		height: auto !important;
		align-self: stretch !important;
		min-height: 180px !important;
		max-height: none !important;
	}

	.rcm-guide-single__hero-title {
		font-size: 18px !important;
	}

	.rcm-guide-single__hero-subtitle {
		font-size: 13px !important;
	}

	.rcm-guide-single__breadcrumb-label {
		font-size: 12px !important;
	}

	.rcm-guide-single__meta {
		padding: 12px !important;
		gap: 10px !important;
		justify-content: flex-end !important;
	}

	.rcm-guide-single__meta-right {
		width: auto !important;
		justify-content: flex-end !important;
	}

	.rcm-guide-single__action-btn {
		font-size: 12px !important;
		padding: 6px 12px !important;
		flex: 0 0 auto !important;
		justify-content: center !important;
	}

	.rcm-guide-single__intro-layout {
		padding: 16px !important;
		gap: 20px !important;
	}

	.rcm-guide-single__intro-title {
		font-size: 18px !important;
	}

	.rcm-guide-single__intro-content {
		font-size: 14px !important;
		line-height: 1.6 !important;
	}

	.rcm-guide-single__article-thumb {
		height: 160px !important;
	}

}