/* Masculine Elementor Widgets — Most Liked Articles
   Base styles. Layout-specific values (columns, gap, radius, typography,
   colors, shadows, etc.) are injected inline by Elementor's control
   selectors, so this file only covers structural defaults and hover/
   responsive behavior that isn't already handled by a control. */

.mew-widget * {
	box-sizing: border-box;
}

.mew-see-all-header {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 24px;
}

.mew-see-all-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	transition: opacity 300ms ease;
}

.mew-see-all-link:hover {
	opacity: 0.8;
}

.mew-see-all-arrow {
	display: inline-block;
	font-size: 1em;
	line-height: 1;
}

.mew-articles {
	display: grid;
	width: 100%;
}

.mew-articles-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.mew-articles-cards {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
}

.mew-articles-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mew-card {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
	transition-property: box-shadow, transform;
	transition-duration: 300ms;
	transition-timing-function: ease;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.mew-card:hover {
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.mew-card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.mew-card-link:hover,
.mew-card-link:focus,
.mew-card-link:active {
	color: inherit;
	text-decoration: none;
}

/* List / Cards layouts support a left or right image position. Grid layout
   always stacks the image on top, regardless of the image_position setting. */
.mew-card.mew-image-left .mew-card-link,
.mew-card.mew-image-right .mew-card-link {
	flex-direction: row;
	align-items: stretch;
}

.mew-card.mew-image-right .mew-card-link {
	flex-direction: row-reverse;
}

.mew-card.mew-image-left .mew-card-image,
.mew-card.mew-image-right .mew-card-image {
	flex: 0 0 38%;
	max-width: 38%;
}

.mew-card.mew-image-left .mew-card-body,
.mew-card.mew-image-right .mew-card-body {
	flex: 1 1 auto;
}

.mew-card-image {
	position: relative;
	overflow: hidden;
	background: #f1f5f9;
}

.mew-card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition-property: transform;
	transition-duration: 300ms;
	transition-timing-function: ease;
}

.mew-zoom-enabled:hover .mew-card-image img {
	transform: scale(1.08);
}

.mew-ratio-1-1 {
	aspect-ratio: 1 / 1;
}

.mew-ratio-4-3 {
	aspect-ratio: 4 / 3;
}

.mew-ratio-16-9 {
	aspect-ratio: 16 / 9;
}

.mew-ratio-3-2 {
	aspect-ratio: 3 / 2;
}

.mew-ratio-auto {
	aspect-ratio: auto;
}

.mew-card-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px;
	flex: 0 0 auto;
	box-sizing: border-box;
	overflow: hidden;
}

.mew-card-category {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #2563eb;
}

.mew-card-title {
	margin: 0;
	font-size: 18px;
	line-height: 1.35;
	font-weight: 700;
	color: #0f172a;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.mew-card-title-container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex: 1 1 auto;
	min-height: 0;
	overflow: visible;
	width: 100%;
}

.mew-card-title-container .mew-card-title {
	width: 100%;
	word-break: break-word;
	white-space: normal;
	margin: 0;
	padding: 0;
}

.mew-card-title-auto-fit {
	/* Font size will be dynamically set by JavaScript to fit container */
	overflow: visible;
	white-space: normal;
	word-break: break-word;
}

.mew-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-size: 13px;
	color: #64748b;
}

.mew-card-meta span::after {
	content: none;
}

.mew-card-excerpt {
	font-size: 14px;
	line-height: 1.6;
	color: #475569;
}

.mew-card-footer {
	margin-top: auto;
	padding-top: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.mew-like-count {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: 14px;
	color: #e11d48;
}

.mew-heart-icon {
	color: #e11d48;
	font-size: 14px;
	line-height: 1;
}

.mew-total-reads {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: 14px;
	color: #0369a1;
}

.mew-eye-icon {
	font-size: 14px;
	line-height: 1;
}

.mew-analytics-notice {
	margin: 0;
	padding: 16px 18px;
	border: 1px dashed #cbd5e1;
	border-radius: 10px;
	background: #f8fafc;
	color: #475569;
	font-size: 14px;
	line-height: 1.6;
}

.mew-analytics-notice strong {
	display: block;
	margin-bottom: 4px;
	color: #0f172a;
}

.mew-read-more {
	font-weight: 600;
	font-size: 14px;
	color: #0f172a;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.mew-no-results {
	padding: 24px;
	text-align: center;
	color: #64748b;
}

/* Pagination — Numbers */
.mew-pagination {
	margin-top: 28px;
}

.mew-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: center;
}

.mew-pagination a,
.mew-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	color: #0f172a;
	text-decoration: none;
	font-size: 14px;
}

.mew-pagination a:hover {
	background: #f1f5f9;
}

.mew-pagination .current {
	background: #0f172a;
	border-color: #0f172a;
	color: #ffffff;
}

/* Pagination — Load More */
.mew-load-more-wrap {
	text-align: center;
	margin-top: 28px;
}

.mew-load-more-btn {
	appearance: none;
	border: 0;
	border-radius: 8px;
	background: #0f172a;
	color: #ffffff;
	font-weight: 600;
	font-size: 14px;
	padding: 12px 28px;
	cursor: pointer;
	transition: opacity 200ms ease;
}

.mew-load-more-btn:hover {
	opacity: 0.9;
}

.mew-load-more-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

.mew-load-more-wrap.mew-loading .mew-load-more-btn {
	opacity: 0.7;
}

.mew-load-more-end {
	margin-top: 12px;
	font-size: 13px;
	color: #94a3b8;
}

/* Responsive fallbacks. Columns/gap themselves come from Elementor's
   responsive controls, but layouts using a side-by-side image need to
   stack on narrow screens regardless of the configured image position. */
@media (max-width: 1024px) {
	.mew-articles-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.mew-articles-grid,
	.mew-articles-cards {
		grid-template-columns: 1fr;
	}

	.mew-card.mew-image-left .mew-card-link,
	.mew-card.mew-image-right .mew-card-link {
		flex-direction: column;
	}

	.mew-card.mew-image-left .mew-card-image,
	.mew-card.mew-image-right .mew-card-image {
		max-width: 100%;
		flex-basis: auto;
	}

	/* "Scrollable Row on Mobile" — the underlying layout is CSS Grid
	   (.mew-articles-grid / .mew-articles-cards) or, for Explore
	   Categories, switches to Grid at this same breakpoint. Toggling
	   overflow-x alone does not make a Grid container scroll as a single
	   row — Grid must actually become Flexbox here, which is what
	   .mew-mobile-scroll does, with !important so it can't be shadowed by
	   the layout-specific Grid rules above regardless of source order. */
	.mew-mobile-scroll {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		overflow-y: hidden;
		gap: 20px;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 8px;
	}

	.mew-mobile-scroll::-webkit-scrollbar {
		display: none;
	}

	.mew-mobile-scroll > * {
		flex: 0 0 280px;
	}

	.mew-articles.mew-mobile-scroll > .mew-card {
		flex: 0 0 78%;
		max-width: 78%;
		scroll-snap-align: start;
	}

	.mew-articles.mew-mobile-scroll {
		scroll-snap-type: x mandatory;
	}

	.mew-articles.mew-mobile-scroll .mew-card.mew-image-left .mew-card-link,
	.mew-articles.mew-mobile-scroll .mew-card.mew-image-right .mew-card-link {
		flex-direction: column;
	}

	.mew-articles.mew-mobile-scroll .mew-card.mew-image-left .mew-card-image,
	.mew-articles.mew-mobile-scroll .mew-card.mew-image-right .mew-card-image {
		max-width: 100%;
		flex-basis: auto;
	}

	.mew-cat-explorer-grid.mew-mobile-scroll > .mew-category-card {
		flex: 0 0 65%;
		max-width: 65%;
		scroll-snap-align: start;
	}

	.mew-cat-explorer-grid.mew-mobile-scroll {
		scroll-snap-type: x mandatory;
	}

	.mew-hero-meta.mew-mobile-scroll > * {
		flex: 0 0 auto;
	}
}

/* =========================================================================
   Hero Banner
   ========================================================================= */

.mew-hero {
	position: relative;
	display: flex;
	width: 100%;
	overflow: hidden;
}

.mew-hero-height-auto {
	min-height: 0;
}

.mew-hero-height-full_screen {
	min-height: 100vh;
}

.mew-hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	z-index: 0;
}

.mew-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.mew-hero-inner {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	width: 100%;
	display: flex;
	box-sizing: border-box;
	padding: 60px 40px;
}

.mew-hero-content {
	display: flex;
	flex-direction: column;
	width: 100%;
	transition: opacity 250ms ease;
}

.mew-hero-content.mew-hero-fading {
	opacity: 0;
}

.mew-hero-content-freeposition {
	position: absolute;
	transform: translate(-50%, -50%);
}

.mew-hero-fallback {
	opacity: 0.85;
	font-style: italic;
}

.mew-hero-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	font-weight: 700;
	margin: 0 0 12px;
	color: #e2e8f0;
}

.mew-hero-title {
	margin: 0 0 16px;
	font-size: 44px;
	line-height: 1.15;
	font-weight: 800;
	color: #ffffff;
}

.mew-hero-description {
	font-size: 17px;
	line-height: 1.6;
	margin: 0 0 28px;
	max-width: 60ch;
	color: #f1f5f9;
}

.mew-hero-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.mew-hero-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 32px;
	border-radius: 8px;
	border: 2px solid transparent;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
	transition-property: background-color, color, border-color;
	transition-duration: 250ms;
	transition-timing-function: ease;
}

.mew-hero-btn-icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.mew-hero-btn-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.mew-hero-btn-primary {
	background-color: transparent;
	color: #ffffff;
}

.mew-hero-btn-primary:hover {
	background-color: transparent;
	color: #ffffff;
}

.mew-hero-btn-secondary {
	background-color: #0f172a;
	color: #ffffff;
	border-color: #0f172a;
}

.mew-hero-btn-secondary:hover {
	background-color: #1e293b;
	color: #ffffff;
}

.mew-hero-btn-outline {
	background-color: transparent;
	color: #ffffff;
	border-color: #ffffff;
}

.mew-hero-btn-outline:hover {
	background-color: #ffffff;
	color: #0f172a;
}

/* Split layout — "Most Read Article Today" dynamic content */

.mew-hero-split-layout {
	display: block;
	background-color: transparent;
}

.mew-hero-split-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: inherit;
}

.mew-hero-eyebrow-row {
	padding: 32px 48px 0;
}

.mew-hero-eyebrow-row .mew-hero-eyebrow {
	margin: 0;
}

.mew-hero-split {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	flex: 1 1 auto;
	width: 100%;
}

.mew-hero-split-image {
	position: relative;
	flex: 0 0 45%;
	max-width: 45%;
	overflow: hidden;
	min-height: 260px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mew-hero-split-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.mew-hero-split-image-placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
}

.mew-hero-split-content {
	flex: 1 1 auto;
	max-width: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px;
	box-sizing: border-box;
	color: #ffffff;
}

.mew-hero-split-content .mew-hero-title,
.mew-hero-split-content .mew-hero-description {
	color: inherit;
}

.mew-hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 0 0 22px;
	font-size: 14px;
	color: #cbd5e1;
}

.mew-hero-meta .mew-meta-date,
.mew-hero-meta .mew-meta-reading-time,
.mew-hero-meta .mew-total-reads {
	display: inline-flex;
	align-items: center;
	color: inherit;
	font-weight: 600;
}

.mew-hero-meta-icon {
	display: inline-flex;
	align-items: center;
	color: #eab308;
	margin-right: 6px;
	line-height: 0;
}

.mew-hero-meta-icon svg {
	display: block;
}

@media (max-width: 767px) {
	.mew-hero-title {
		font-size: 30px;
	}

	.mew-hero-inner {
		padding: 40px 24px;
	}

	.mew-hero-description {
		max-width: 100%;
	}

	.mew-hero-split {
		flex-direction: column !important;
	}

	.mew-hero-split-image,
	.mew-hero-split-content {
		flex: 1 1 100%;
		max-width: 100%;
	}

	.mew-hero-split-image {
		min-height: 200px;
	}

	.mew-hero-eyebrow-row {
		padding: 24px 24px 0;
	}

	.mew-hero-split-content {
		padding: 32px 24px;
	}
}

/* =========================================================================
   Explore Categories
   ========================================================================= */

.mew-cat-explorer-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	width: 100%;
}

.mew-category-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	text-decoration: none;
	color: inherit;
	flex: 1 1 0;
	min-width: 0;
}

.mew-category-card:hover {
	text-decoration: none;
	color: inherit;
}

.mew-category-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.mew-category-icon img {
	display: block;
	transition-property: transform;
	transition-duration: 250ms;
	transition-timing-function: ease;
}

.mew-category-card:hover .mew-category-icon img {
	transform: scale(1.1);
}

/* Dedicated text wrapper: title always sits above the article count,
   never on the same row, regardless of what else is on the page. */
.mew-category-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.mew-category-title {
	margin: 0;
	font-weight: 700;
	font-size: 16px;
	color: #0f172a;
}

.mew-category-count {
	font-size: 14px;
	color: #64748b;
}

/* Desktop and Tablet: single horizontal row (down to 768px). */
@media (max-width: 1024px) and (min-width: 768px) {
	.mew-cat-explorer-grid {
		flex-wrap: nowrap;
		overflow-x: auto;
	}

	.mew-category-card {
		flex: 0 0 auto;
		min-width: 120px;
	}
}

/* Mobile default: 2 columns, 2 rows. */
@media (max-width: 767px) {
	.mew-cat-explorer-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: auto;
	}

	.mew-category-card {
		min-width: 0;
	}
}

/* =========================================================================
   Post Content
   ========================================================================= */

.mew-post-content {
	font-size: 17px;
	line-height: 1.75;
	color: #334155;
	word-wrap: break-word;
}

.mew-post-content > *:first-child {
	margin-top: 0;
}

.mew-post-content > *:last-child {
	margin-bottom: 0;
}

.mew-post-content p {
	margin: 0 0 20px;
}

.mew-post-content h1,
.mew-post-content h2,
.mew-post-content h3,
.mew-post-content h4,
.mew-post-content h5,
.mew-post-content h6 {
	margin-top: 32px;
	margin-bottom: 16px;
	line-height: 1.3;
	font-weight: 700;
	color: #0f172a;
	/* Native fallback for anchor navigation with JavaScript disabled (or
	   before it runs): keeps a heading from landing underneath a sticky
	   header. --mew-toc-scroll-offset is set inline by the Table of
	   Contents widget from its Scroll Offset control when > 0; falls back
	   to a sane default otherwise. */
	scroll-margin-top: var(--mew-toc-scroll-offset, 20px);
}

.mew-post-content a {
	color: #2563eb;
	text-decoration: underline;
}

.mew-post-content a:hover {
	color: #1d4ed8;
}

.mew-post-content img {
	max-width: 100%;
	height: auto;
	margin: 8px 0 24px;
}

.mew-post-content iframe,
.mew-post-content video,
.mew-post-content embed {
	max-width: 100%;
}

.mew-post-content ul,
.mew-post-content ol {
	margin: 0 0 20px;
	padding-left: 24px;
}

.mew-post-content blockquote {
	margin: 0 0 20px;
	padding: 4px 20px;
	border-left: 4px solid #e2e8f0;
	color: #475569;
	font-style: italic;
}

/* =========================================================================
   Table of Contents
   ========================================================================= */

.mew-toc {
	--mew-toc-indent: 20px;
	background-color: #f8fafc;
	border-radius: 12px;
	padding: 20px;
}

.mew-toc-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 700;
	color: #0f172a;
}

button.mew-toc-title {
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
}

.mew-toc-toggle-icon {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 200ms ease;
}

.mew-toc-collapsible.mew-toc-collapsed .mew-toc-toggle-icon {
	transform: rotate(-45deg);
}

.mew-toc-collapsible.mew-toc-collapsed .mew-toc-list {
	display: none;
}

.mew-toc-list {
	margin: 0;
	padding-left: 20px;
}

.mew-toc-item {
	margin-bottom: 10px;
}

.mew-toc-item:last-child {
	margin-bottom: 0;
}

.mew-toc-link {
	color: #334155;
	text-decoration: none;
	font-size: 15px;
	line-height: 1.5;
	cursor: pointer;
}

.mew-toc-link:hover {
	color: #2563eb;
	text-decoration: underline;
}

/* =====================================================================
 * Key Points widget
 * ===================================================================== */

.mew-key-points-title {
	margin: 0 0 16px;
	line-height: 1.3;
	font-weight: 700;
	color: #0f172a;
}

.mew-key-points-list {
	margin: 0;
	padding-left: 20px;
}

.mew-key-points-item {
	margin-bottom: 10px;
	color: #334155;
	line-height: 1.6;
	word-wrap: break-word;
}

.mew-key-points-item:last-child {
	margin-bottom: 0;
}

.mew-key-points-item::marker {
	color: #2563eb;
}

.mew-key-points-list-bullets {
	list-style-type: disc;
}

.mew-key-points-list-numbers {
	list-style-type: decimal;
}

/* =========================================================================
   Article cards — Title Rows + Full Title on Hover
   (Most Liked, Trending, Trending This Week, Trending This Month)

   The row limit itself is written by the "Title Maximum Rows" Elementor
   control, scoped to each widget instance ({{WRAPPER}}), as
   `--mew-title-rows` + `-webkit-line-clamp` on .mew-card-title-text. With
   no value selected, nothing is applied and titles behave exactly as they
   always did. The clamp sits on an inner span (not the <h3>) so the
   title's own padding/margin controls never add stray visible lines.
   ========================================================================= */

/* Safety net for a browser without -webkit-line-clamp: cap the height in
   em from the same per-widget variable instead of breaking the card. */
@supports not (-webkit-line-clamp: 1) {
	.mew-card-title-text {
		max-height: calc(var(--mew-title-rows, 100) * 1.35em);
		overflow: hidden;
	}
}

/* Floating full-title bar. Created by title-tooltip.js inside the widget's
   own .mew-widget wrapper (outside every card, so a card's overflow:hidden
   can't clip it). position:fixed means it never affects card layout and can
   never cause page-level horizontal scrolling. Colours, border, radius,
   padding, font size and max width are overridden per widget instance by
   the Elementor controls; the values here are the matching defaults. */
.mew-title-tooltip {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	width: max-content;
	max-width: min(480px, calc(100vw - 16px));
	box-sizing: border-box;
	margin: 0;
	padding: 6px 10px;
	background-color: #ffffff;
	color: #0f172a;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
	font-size: 9px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: normal;
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
	transition: opacity 120ms ease;
}

.mew-title-tooltip.is-visible {
	visibility: visible;
	opacity: 1;
}

/* Widget with "Enable Full Title on Hover" switched off never shows it. */
.mew-widget .mew-title-tooltip {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.mew-title-tooltip {
		transition: none;
	}
}