/* ─────────────────────────────────────────
   MealApp Blog — mobile-first
   ───────────────────────────────────────── */
.mblog-wrap *,
.mblog-wrap *::before,
.mblog-wrap *::after { box-sizing: border-box; }

.mblog-wrap {
	font-family:            'Inter', Helvetica, sans-serif;
	color:                  #f3f7fc;
	-webkit-font-smoothing: antialiased;
}

/* ── Category badge — sits on top of card image ── */

/* Default token set (green / business & strategy) */
.mblog-badge {
	--badge-color:  rgba(31, 230, 137, 1);
	--badge-border: rgba(31, 230, 137, 0.35);
	--badge-shadow: rgba(31, 230, 137, 0.55);
	--badge-bg:     rgba(31, 230, 137, 0.08);

	display:         inline-flex;
	align-items:     center;
	gap:             5.55px;
	font-size:       10px;
	font-weight:     700;
	letter-spacing:  0.1em;
	text-transform:  uppercase;
	color:           var(--badge-color);
	background:      var(--badge-bg);
	border:          1px solid var(--badge-border);
	border-radius:   999px;
	padding:         5px 12px 5px 11px;
	box-shadow:      0px 0px 18px -4px var(--badge-shadow);
	white-space:     nowrap;
	width:           fit-content;
	/* On cards it's absolutely positioned over the image */
	position:        absolute;
	top:             14px;
	left:            14px;
	z-index:         2;
	backdrop-filter: blur(4px);
}

/* Per-category tokens */
.mblog-badge[data-cat*="technology"] {
	--badge-color:  rgba(56,  189, 248, 1);
	--badge-border: rgba(56,  189, 248, 0.35);
	--badge-shadow: rgba(56,  189, 248, 0.55);
	--badge-bg:     rgba(56,  189, 248, 0.08);
}

.mblog-badge[data-cat*="operations"] {
	--badge-color:  rgba(251, 146, 60,  1);
	--badge-border: rgba(251, 146, 60,  0.35);
	--badge-shadow: rgba(251, 146, 60,  0.55);
	--badge-bg:     rgba(251, 146, 60,  0.08);
}

.mblog-badge[data-cat*="marketing"] {
	--badge-color:  rgba(167, 139, 250, 1);
	--badge-border: rgba(167, 139, 250, 0.35);
	--badge-shadow: rgba(167, 139, 250, 0.55);
	--badge-bg:     rgba(167, 139, 250, 0.08);
}

/* Single post hero badge — inline, not absolute */
.mblog-single-hero .mblog-badge {
	position:        relative    !important;
	top:             auto        !important;
	left:            auto        !important;
	display:         inline-flex !important;
	align-self:      flex-start  !important;
	width:           fit-content !important;
	margin-bottom:   12px        !important;
	backdrop-filter: blur(4px)   !important;
}

.mblog-badge::before {
	content:       '';
	width:         6px;
	height:        6px;
	min-width:     6px;
	border-radius: 50%;
	background:    var(--badge-color);
}

/* ── Meta row ── */
.mblog-meta {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         6px;
	font-size:   12px;
	color:       #8a97ab;
	margin-bottom: 10px;
}

.mblog-dot          { opacity: 0.4; }
.mblog-featured-tag { color: #1fe689; font-weight: 600; }

/* ── Author ── */
.mblog-author {
	display:     flex;
	align-items: center;
	gap:         8px;
}

.mblog-author-avatar {
	width:            28px;
	height:           28px;
	min-width:        28px;
	background:       rgba(31, 230, 137, 0.15);
	border:           1px solid rgba(31, 230, 137, 0.3);
	border-radius:    50%;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	font-size:        10px;
	font-weight:      700;
	color:            #1fe689;
	text-transform:   uppercase;
}

.mblog-author-name {
	font-size:   13px;
	font-weight: 500;
	color:       #aab7c7;
}

/* ─────────────────────────────────────────
   Featured post — mobile: stacked
   ───────────────────────────────────────── */
.mblog-featured {
	display:       flex;
	flex-direction: column;
	background:    #0A1628;
	border:        1px solid rgba(29, 45, 68, 1);
	border-radius: 16px;
	overflow:      hidden;
	margin-bottom: 40px;
}

.mblog-featured-img-wrap {
	position:    relative;
	flex-shrink: 0;
	width:       100%;
}

.mblog-featured-img {
	display:    block;
	width:      100%;
	min-height: 220px;
	background: #071426;
	overflow:   hidden;
}

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

.mblog-featured-body {
	padding: 24px 22px;
	display: flex;
	flex-direction: column;
}

.mblog-featured-title {
	font-family:    'Inter', Helvetica, sans-serif !important;
	font-size:      22px                           !important;
	font-weight:    700                            !important;
	line-height:    1.2                            !important;
	color:          #f3f7fc                        !important;
	margin:         0 0 12px                       !important;
	text-transform: none                           !important;
	letter-spacing: normal                         !important;
}

.mblog-featured-title a {
	color:           inherit;
	text-decoration: none;
}

.mblog-featured-title a:hover { color: #1fe689; }

.mblog-featured-excerpt {
	font-size:     14px;
	line-height:   1.65;
	color:         #8a97ab;
	margin:        0 0 20px;
	flex:          1;
}

.mblog-featured-footer {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	flex-wrap:       wrap;
	gap:             12px;
}

.mblog-read-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             8px;
	padding:         10px 20px;
	background:      #1fe689;
	border:          none;
	border-radius:   100px;
	color:           #050B18;
	font-size:       12px;
	font-weight:     700;
	letter-spacing:  0.08em;
	text-transform:  uppercase;
	text-decoration: none;
	white-space:     nowrap;
	transition:      opacity 0.2s;
}

.mblog-read-btn:hover { opacity: 0.85; color: #050B18; }

/* ─────────────────────────────────────────
   Latest header
   ───────────────────────────────────────── */
.mblog-latest-header {
	display:       flex;
	flex-direction: column;
	gap:           6px;
	margin-bottom: 20px;
}

.mblog-latest-title {
	font-family:    'The Bold Font', sans-serif !important;
	font-size:      30px                        !important;
	font-weight:    700                         !important;
	text-transform: uppercase                   !important;
	color:          #f3f7fc                     !important;
	margin:         0                           !important;
	line-height:    1.1                         !important;
}

.mblog-latest-title span { color: #1fe689; }

.mblog-count {
	font-size: 13px;
	color:     #8a97ab;
	margin:    0;
}

/* ─────────────────────────────────────────
   Grid — mobile: 1 column
   ───────────────────────────────────────── */
.mblog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap:     20px;
	margin-bottom: 36px;
}

/* ── Article card ── */
.mblog-card {
	background:    #0A1628;
	border:        1px solid rgba(29, 45, 68, 1);
	border-radius: 14px;
	overflow:      hidden;
	transition:    border-color 0.2s, transform 0.2s;
	display:       flex;
	flex-direction: column;
}

.mblog-card:hover {
	border-color: rgba(31, 230, 137, 0.25);
	transform:    translateY(-2px);
}

/* Wrapper that holds the image + overlaid badge */
.mblog-card-top {
	position:   relative;
	flex-shrink: 0;
}

.mblog-card-img {
	display:    block;
	width:      100%;
	height:     180px;
	background: #071426;
	overflow:   hidden;
}

.mblog-card-img img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.3s;
}

.mblog-card:hover .mblog-card-img img { transform: scale(1.03); }

.mblog-card-body {
	padding: 20px 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.mblog-card-title {
	font-family: 'The Bold Font', sans-serif;
	font-size:   17px;
	font-weight: 700;
	line-height: 1.25;
	color:       #f3f7fc;
	margin:      0 0 10px;
	flex:        1;
}

.mblog-card-title a,
.mblog-card-title a:hover,
.mblog-card-title a:visited,
.mblog-card-title a:focus {
	color:           inherit      !important;
	text-decoration: none         !important;
}

.mblog-card-title a:hover { color: #1fe689 !important; }

.mblog-featured-title a,
.mblog-featured-title a:hover,
.mblog-featured-title a:visited {
	color:           inherit      !important;
	text-decoration: none         !important;
}

.mblog-featured-title a:hover { color: #1fe689 !important; }

.mblog-read-more,
.mblog-read-more:hover,
.mblog-read-more:visited {
	text-decoration: none !important;
}

.mblog-card-excerpt {
	font-size:     13px;
	line-height:   1.6;
	color:         #8a97ab;
	margin:        0 0 16px;
	display:            -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp:         3;
	-webkit-box-orient: vertical;
	overflow:           hidden;
}

.mblog-card-footer {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             8px;
	margin-top:      auto;
}

.mblog-read-more {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	font-size:       12px;
	font-weight:     700;
	letter-spacing:  0.06em;
	text-transform:  uppercase;
	color:           #1fe689;
	text-decoration: none;
	white-space:     nowrap;
	transition:      opacity 0.2s;
}

.mblog-read-more:hover { opacity: 0.75; color: #1fe689; }

/* ─────────────────────────────────────────
   Load more button
   ───────────────────────────────────────── */
.mblog-load-more-wrap {
	text-align:    center;
	margin-bottom: 40px;
}

.mblog-load-more {
	display:         inline-flex !important;
	align-items:     center      !important;
	gap:             10px        !important;
	padding:         12px 28px   !important;
	background:      transparent !important;
	border:          1px solid rgba(29, 45, 68, 1) !important;
	border-radius:   100px      !important;
	color:           #f3f7fc    !important;
	font-family:     'Inter', sans-serif !important;
	font-size:       13px       !important;
	font-weight:     700        !important;
	letter-spacing:  0.08em     !important;
	text-transform:  uppercase  !important;
	cursor:          pointer;
	transition:      border-color 0.2s, color 0.2s;
	outline:         none       !important;
	box-shadow:      none       !important;
	text-decoration: none       !important;
}

.mblog-load-more:hover,
.mblog-load-more:focus {
	border-color: rgba(31, 230, 137, 0.4) !important;
	color:        #1fe689 !important;
	background:   transparent !important;
}

.mblog-load-more:hover .mblog-load-more-icon { background: rgba(31,230,137,0.15); border-color: rgba(31,230,137,0.4); color: #1fe689; }

.mblog-load-more-icon {
	width:           28px;
	height:          28px;
	background:      rgba(31, 230, 137, 0.1);
	border:          1px solid rgba(31, 230, 137, 0.25);
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           #1fe689;
	transition:      background 0.2s, border-color 0.2s;
}

.mblog-load-more.loading .mblog-load-more-text::after { content: '...'; }

/* ─────────────────────────────────────────
   Skeleton loading animation
   ───────────────────────────────────────── */
.mblog-skeleton {
	background:              #0A1628;
	border:                  1px solid rgba(29,45,68,1);
	border-radius:           14px;
	overflow:                hidden;
}

.mblog-skeleton-img,
.mblog-skeleton-line {
	background:              linear-gradient(90deg, #0d1e35 25%, #112235 50%, #0d1e35 75%);
	background-size:         200% 100%;
	animation:               mblog-shimmer 1.4s infinite;
	border-radius:           6px;
}

.mblog-skeleton-img    { height: 180px; border-radius: 0; }
.mblog-skeleton-body   { padding: 20px 18px; }
.mblog-skeleton-line   { height: 12px; margin-bottom: 10px; }
.mblog-skeleton-line.w-40 { width: 40%; }
.mblog-skeleton-line.w-70 { width: 70%; }
.mblog-skeleton-line.w-90 { width: 90%; }

@keyframes mblog-shimmer {
	0%   { background-position: -200% 0; }
	100% { background-position:  200% 0; }
}


/* ═════════════════════════════════════════
   480px — 2-col grid
   ═════════════════════════════════════════ */
@media (min-width: 480px) {
	.mblog-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ═════════════════════════════════════════
   768px — tablet
   ═════════════════════════════════════════ */
@media (min-width: 768px) {

	/* Featured: side by side */
	.mblog-featured {
		flex-direction: row;
		min-height:     280px;
	}

	.mblog-featured-img-wrap { width: 42%; }
	.mblog-featured-img      { height: auto; min-height: 280px; }

	.mblog-featured-body  { padding: 32px 28px; }
	.mblog-featured-title { font-size: 32px !important; }

	/* Latest header: title + count on same row */
	.mblog-latest-header {
		flex-direction:  row;
		align-items:     baseline;
		justify-content: space-between;
		margin-bottom:   24px;
	}

	.mblog-latest-title { font-size: 28px; }

	/* 3-col grid */
	.mblog-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}


/* ═════════════════════════════════════════
   1024px — desktop
   ═════════════════════════════════════════ */
@media (min-width: 1024px) {

	.mblog-featured-img-wrap { width: 40%; }
	.mblog-featured-img      { min-height: 300px; }
	.mblog-featured-body  { padding: 36px 32px; }
	.mblog-featured-title { font-size: 32px !important; }

	.mblog-latest-title   { font-size: 30px !important; }

	.mblog-card-title     { font-size: 18px; }
}


/* ═════════════════════════════════════════
   SINGLE POST — mobile-first
   ═════════════════════════════════════════ */

/* Reading progress bar */
.mblog-progress-bar {
	position:   fixed;
	top:        0;
	left:       0;
	width:      0%;
	height:     3px;
	background: #1fe689;
	z-index:    9999;
	transition: width 0.1s linear;
	box-shadow: 0 0 8px rgba(31, 230, 137, 0.6);
}

/* Page wrapper */
.mblog-single-wrap {
	max-width:   1240px;
	margin:      0 auto;
	padding:     32px 20px 80px;
	font-family: 'Inter', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* Back button */
.mblog-single-nav { margin-bottom: 28px; }

.mblog-back-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             8px;
	font-size:       13px;
	font-weight:     600;
	color:           #aab7c7    !important;
	text-decoration: none       !important;
	transition:      color 0.2s;
}

.mblog-back-btn:hover { color: #1fe689 !important; }

/* Hero */
.mblog-single-hero {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	margin-bottom:  28px;
}

/* Badge inline on single — reset any absolute positioning */
.mblog-single-hero .mblog-badge {
	position:        relative  !important;
	top:             auto      !important;
	left:            auto      !important;
	display:         inline-flex !important;
	background:      transparent !important;
	border:          none      !important;
	padding:         0         !important;
	backdrop-filter: none      !important;
	margin-bottom:   14px      !important;
}

.mblog-single-title {
	font-family:    'The Bold Font', sans-serif !important;
	font-size:      28px                        !important;
	font-weight:    700                         !important;
	line-height:    1.15                        !important;
	color:          #f3f7fc                     !important;
	margin:         0 0 18px                    !important;
	text-transform: none                        !important;
	letter-spacing: normal                      !important;
}

.mblog-single-meta {
	display:       flex;
	align-items:   center;
	flex-wrap:     wrap;
	gap:           6px;
	font-size:     13px;
	color:         #8a97ab;
	margin-bottom: 16px;
}

.mblog-single-meta svg { opacity: 0.6; flex-shrink: 0; }

/* Featured image */
.mblog-single-image {
	width:         100%;
	min-height:    240px;
	background:    #071426;
	border:        1px solid rgba(29, 45, 68, 1);
	border-radius: 14px;
	overflow:      hidden;
	margin-bottom: 36px;
}

.mblog-single-image img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

/* Article content typography */
.mblog-single-content {
	font-size:   16px;
	line-height: 1.8;
	color:       #aab7c7;
	margin-bottom: 40px;
	max-width:   780px;
}

.mblog-single-content p          { margin: 0 0 20px; }
.mblog-single-content p:last-child { margin-bottom: 0; }

.mblog-single-content h2,
.mblog-single-content h3,
.mblog-single-content h4 {
	font-family:    'The Bold Font', sans-serif !important;
	color:          #f3f7fc                     !important;
	margin:         36px 0 16px                !important;
	line-height:    1.2                         !important;
	text-transform: none                        !important;
	letter-spacing: normal                      !important;
}

.mblog-single-content h2 { font-size: 22px !important; }
.mblog-single-content h3 { font-size: 18px !important; }
.mblog-single-content h4 { font-size: 16px !important; }

.mblog-single-content a {
	color:           #1fe689 !important;
	text-decoration: underline !important;
}

.mblog-single-content strong { color: #f3f7fc; font-weight: 700; }
.mblog-single-content em     { font-style: italic; color: #c5cdd8; }

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

.mblog-single-content li { margin-bottom: 8px; }

.mblog-single-content blockquote {
	border-left:  3px solid #1fe689;
	margin:       28px 0;
	padding:      16px 20px;
	background:   rgba(31, 230, 137, 0.05);
	border-radius: 0 8px 8px 0;
	font-style:   italic;
	color:        #c5cdd8;
}

.mblog-single-content blockquote p { margin: 0; }

.mblog-single-content code {
	background:    rgba(31, 230, 137, 0.08);
	border:        1px solid rgba(31, 230, 137, 0.15);
	border-radius: 4px;
	padding:       2px 6px;
	font-size:     0.875em;
	color:         #1fe689;
	font-family:   monospace;
}

.mblog-single-content pre {
	background:    #071426;
	border:        1px solid rgba(29, 45, 68, 1);
	border-radius: 10px;
	padding:       20px;
	overflow-x:    auto;
	margin:        0 0 20px;
}

.mblog-single-content pre code {
	background: none;
	border:     none;
	padding:    0;
	color:      #aab7c7;
}

.mblog-single-content img {
	max-width:     100%;
	height:        auto;
	border-radius: 10px;
	display:       block;
	margin:        24px auto;
}

.mblog-single-content hr {
	border:        none;
	border-top:    1px solid rgba(29, 45, 68, 1);
	margin:        36px 0;
}

/* Tags */
.mblog-single-tags {
	display:       flex;
	flex-wrap:     wrap;
	gap:           8px;
	margin-bottom: 36px;
}

.mblog-tag {
	display:         inline-block;
	padding:         5px 14px;
	background:      rgba(31, 230, 137, 0.07);
	border:          1px solid rgba(31, 230, 137, 0.2);
	border-radius:   100px;
	font-size:       12px;
	font-weight:     600;
	color:           #1fe689    !important;
	text-decoration: none       !important;
	transition:      background 0.2s;
}

.mblog-tag:hover { background: rgba(31, 230, 137, 0.14); }

/* Divider */
.mblog-divider {
	border:     none;
	border-top: 1px solid rgba(29, 45, 68, 1);
	margin:     0 0 40px;
}

/* Related articles */
.mblog-related-title {
	font-family:    'The Bold Font', sans-serif !important;
	font-size:      22px                        !important;
	font-weight:    700                         !important;
	text-transform: uppercase                   !important;
	color:          #f3f7fc                     !important;
	margin:         0 0 24px                    !important;
	letter-spacing: normal                      !important;
}

.mblog-related-title span { color: #1fe689; }


/* ─────────────────────────────────────────
   Single — 768px+
   ───────────────────────────────────────── */
@media (min-width: 768px) {

	.mblog-single-wrap  { padding: 40px 32px 100px; }

	.mblog-single-title { font-size: 36px !important; }

	.mblog-single-image { min-height: 380px; }

	.mblog-single-content      { font-size: 17px; }
	.mblog-single-content h2   { font-size: 26px !important; }
	.mblog-single-content h3   { font-size: 21px !important; }
}


/* ─────────────────────────────────────────
   Single — 1024px+
   ───────────────────────────────────────── */
@media (min-width: 1024px) {

	.mblog-single-wrap  { padding: 48px 40px 120px; }

	.mblog-single-title { font-size: 42px !important; }

	.mblog-single-image { min-height: 460px; }
}