/**
 * DROIX Blog — home hub: hero panel, strips, community band,
 * guides + announcements, banner.
 */

.dxb-hero-wrap { padding-top: 28px; }
.dxb-hero { background: var(--dxb-bg-2); border-radius: var(--dxb-r-3xl); padding: 44px 48px; }
.dxb-hero__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.dxb-hero__copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.dxb-hero__badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dxb-hero__score {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 13px 4px 5px;
	border-radius: 9999px;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.dxb-hero__score-label { display: inline-flex; flex-direction: column; line-height: 1.2; }
.dxb-hero__score-label b { font-family: var(--dxb-font-head); font-weight: 700; font-size: 12px; color: var(--dxb-green-deep); }
.dxb-hero__score-label span { font-weight: 500; font-size: 9.5px; color: var(--dxb-fg-5); }
.dxb-hero__title { margin: 0; font-weight: 700; font-size: 38px; line-height: 1.1; }
.dxb-hero__title a { color: var(--dxb-fg-2); }
.dxb-hero__title a:hover { color: var(--dxb-green-deep); }
.dxb-hero__excerpt { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--dxb-fg-3); }
.dxb-hero__meta { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 500; color: var(--dxb-fg-5); }
.dxb-hero__actions { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.dxb-hero__media {
	display: block;
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	aspect-ratio: 16/9;
	box-shadow: var(--dxb-shadow-md);
	background: var(--dxb-bg-3);
}
.dxb-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dxb-hero__sides { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
.dxb-hero-side {
	display: flex;
	gap: 14px;
	align-items: center;
	background: #fff;
	border-radius: var(--dxb-r-lg);
	padding: 12px;
	box-shadow: var(--dxb-shadow-sm);
	transition: box-shadow .18s ease;
}
.dxb-hero-side:hover { box-shadow: var(--dxb-shadow-md); }
.dxb-hero-side img { width: 120px; height: 76px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; }
.dxb-hero-side__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dxb-hero-side__meta { font-size: 11.5px; font-weight: 600; color: var(--dxb-green-dark); }
.dxb-hero-side b {
	font-family: var(--dxb-font-head);
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.3;
	color: var(--dxb-fg-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* strips */
.dxb-strip { padding-top: 52px; }
.dxb-strip--panel-wrap { padding-top: 44px; }
.dxb-strip__panel { background: var(--dxb-bg-2); border-radius: var(--dxb-r-3xl); padding: 40px 44px 44px; }

/* community band */
.dxb-community-wrap { padding-top: 44px; }
.dxb-community {
	background: var(--dxb-dark);
	border-radius: var(--dxb-r-3xl);
	padding: 44px 48px;
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 48px;
	align-items: center;
}
.dxb-community__copy { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.dxb-community__copy .dxb-eyebrow { color: var(--dxb-green); }
.dxb-community__copy h2 { margin: 0; font-weight: 700; font-size: 32px; line-height: 1.12; color: #fff; }
.dxb-community__copy p { margin: 0; font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,0.72); }
.dxb-community__ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.dxb-community__ctas .dxb-btn--primary { height: 44px; padding: 0 20px; font-size: 14.5px; }
.dxb-community__cards { display: flex; flex-direction: column; gap: 14px; }
.dxb-community-card {
	background: #fff;
	border-radius: var(--dxb-r-xl);
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: box-shadow .18s ease;
}
.dxb-community-card:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.25); }
.dxb-community-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dxb-community-card__avatar {
	width: 32px; height: 32px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--dxb-font-head);
	font-weight: 700;
	font-size: 13px;
	flex: 0 0 auto;
}
.dxb-community-card__head b { font-size: 13.5px; color: var(--dxb-fg-2); }
.dxb-community-card__when { font-size: 12px; color: var(--dxb-fg-5); }
.dxb-community-card p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--dxb-fg-3); }
.dxb-community-card__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--dxb-green-dark); }

/* guides + announcements */
.dxb-guides-ann { padding-top: 52px; }
.dxb-guides-ann__grid { display: grid; grid-template-columns: 1fr 400px; gap: 20px; align-items: stretch; }
.dxb-guides-ann__ann { display: flex; flex-direction: column; }
.dxb-ann {
	flex: 1;
	background: #fff;
	border: 1px solid var(--dxb-stroke);
	border-radius: var(--dxb-r-xl);
	padding: 10px;
	display: flex;
	flex-direction: column;
	box-shadow: var(--dxb-shadow-sm);
}
.dxb-ann__item { display: flex; flex-direction: column; gap: 5px; padding: 14px; border-radius: 14px; flex: 1; }
.dxb-ann__item:hover { background: var(--dxb-bg-3); }
.dxb-ann__meta { display: flex; align-items: center; gap: 8px; }
.dxb-ann__meta time { font-size: 12px; font-weight: 500; color: var(--dxb-fg-5); }
.dxb-ann__item b { font-family: var(--dxb-font-head); font-weight: 700; font-size: 14px; line-height: 1.35; color: var(--dxb-fg-2); }
.dxb-ann__all {
	margin: 6px 8px 8px;
	padding: 11px 14px;
	border-radius: 12px;
	background: var(--dxb-green-tint);
	color: var(--dxb-green-deep);
	font-family: var(--dxb-font-head);
	font-weight: 500;
	font-size: 13.5px;
	text-align: center;
}
.dxb-ann__all:hover { background: #E9F2C4; color: var(--dxb-green-deep); }

/* banner */
.dxb-banner { padding-top: 52px; }
.dxb-banner img { display: block; border-radius: 24px; width: 100%; box-shadow: var(--dxb-shadow-sm); }
.dxb-banner a:hover img { box-shadow: var(--dxb-shadow-md); }

/* responsive */
@media (max-width: 1024px) {
	.dxb-hero { padding: 32px; }
	.dxb-hero__grid { grid-template-columns: 1fr; gap: 24px; }
	.dxb-hero__media { order: -1; }
	.dxb-hero__title { font-size: 30px; }
	.dxb-community { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
	.dxb-guides-ann__grid { grid-template-columns: 1fr; }
	.dxb-strip__panel { padding: 28px 24px; border-radius: var(--dxb-r-2xl); }
}
@media (max-width: 640px) {
	.dxb-hero-wrap { padding-top: 16px; }
	.dxb-hero { padding: 20px 16px; border-radius: 26px; }
	.dxb-hero__title { font-size: 25px; }
	.dxb-hero__sides { grid-template-columns: 1fr; margin-top: 20px; }
	.dxb-strip { padding-top: 36px; }
	.dxb-community { padding: 24px 18px; border-radius: 26px; }
	.dxb-community__copy h2 { font-size: 26px; }
}