/* ==========================================================================
   IBH CHILD — HOMEPAGE.CSS
   Front-page-only sections: Latest Updates + Browse Categories.
   Design pattern (section heading pill, card layout, category grid with
   hover-fill effect) imported from the reference theme's homepage.php +
   05-cards.css + 01-tokens.css — re-styled entirely with this theme's own
   blue tokens (--ibh-brand-gradient etc.) so it matches the Hero/Footer/
   Blue Design System rather than the reference's own blue palette.
   Hero itself is NOT part of this file — it renders via header.php's
   generate_after_header hook, completely untouched.
   ========================================================================== */

.ibh-home-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--ibh-gap);
}
.ibh-home-section { padding: var(--ibh-space-7) 0; }
.ibh-home-latest { padding-top: var(--ibh-space-6); }

/* ==========================================================================
   FRONT-PAGE FULL WIDTH FIX.
   GP's customizer-driven inline CSS sets .content-area to a percentage
   width (e.g. 70%) assuming a sidebar fills the remaining space. Since
   front-page.php deliberately has no sidebar, that would leave empty
   space to the right of the homepage content on ALL screen sizes, not
   just mobile. Force full width specifically for this page.
   ========================================================================== */
#primary.ibh-no-sidebar {
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}


/* --------------------------------------------------------------------------
   SECTION HEADING — pill badge with icon + gradient-text span.
   Shared by Latest Updates and Browse Categories.
   -------------------------------------------------------------------------- */
.ibh-sec-head {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--ibh-bg-panel);
	border: 1px solid var(--ibh-border);
	border-radius: var(--ibh-radius-pill);
	padding: 7px 18px 7px 8px;
	box-shadow: var(--ibh-shadow-sm);
	margin-bottom: var(--ibh-space-5);
}
.ibh-sec-icon {
	width: 30px; height: 30px;
	border-radius: 9px;
	background: var(--ibh-brand-gradient);
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	flex-shrink: 0;
	box-shadow: 0 3px 10px rgba(10,79,168,.30);
}
.ibh-sec-icon svg { width: 15px; height: 15px; }
.ibh-sec-title {
	font-family: var(--ibh-font);
	font-size: 16px;
	font-weight: 800;
	color: var(--ibh-text-dark);
}
.ibh-sec-title span {
	background: var(--ibh-brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.ibh-empty-text { text-align: center; color: var(--ibh-text-muted); padding: var(--ibh-space-6) 0; }

/* --------------------------------------------------------------------------
   LATEST UPDATES — simplified cards: image, title, excerpt, Read More.
   Visual treatment matches .ibh-card elsewhere on the site (glow-top
   accent on hover, same radius/shadow scale) for full consistency.
   -------------------------------------------------------------------------- */
.ibh-lu-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ibh-gap);
}
.ibh-lu-card {
	background: var(--ibh-bg-card);
	border: 1px solid var(--ibh-border-soft);
	border-radius: var(--ibh-radius-lg);
	box-shadow: var(--ibh-shadow-sm);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.ibh-lu-card::before {
	content: '';
	position: absolute;
	top: 0; left: 14px; right: 14px; height: 2px;
	border-radius: 0 0 2px 2px;
	background: linear-gradient(to right, transparent, var(--ibh-accent) 25%, var(--ibh-accent-light) 50%, var(--ibh-accent) 75%, transparent);
	opacity: 0;
	transition: opacity .22s ease;
	z-index: 1;
}
.ibh-lu-card:hover {
	box-shadow: 0 12px 32px rgba(10,79,168,.18);
	transform: translateY(-4px);
	border-color: rgba(59,130,246,.25);
}
.ibh-lu-card:hover::before { opacity: 1; }

.ibh-lu-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16/10;
	min-height: 130px;
	overflow: hidden;
	margin: 6px 6px 0 6px;
	border-radius: 14px;
	box-shadow: 0 6px 20px rgba(10,79,168,.20);
	background: var(--ibh-bg-panel);
}
.ibh-lu-thumb img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	margin: 0 !important;
	border-radius: 0 !important;
	transition: transform .45s ease;
}
.ibh-lu-card:hover .ibh-lu-thumb img { transform: scale(1.07); }

.ibh-lu-body {
	padding: 14px 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}
.ibh-lu-title {
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.42;
	color: var(--ibh-text-dark);
	margin: 0;
}
.ibh-lu-title a { color: inherit; text-decoration: none; transition: color var(--ibh-transition); }
.ibh-lu-title a:hover { color: var(--ibh-brand-2); }
.ibh-lu-excerpt {
	font-size: 13px;
	color: var(--ibh-text-muted);
	line-height: 1.65;
	margin: 0;
	flex-grow: 1;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ibh-lu-read {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	align-self: flex-start;
	margin-top: 4px;
	padding: 7px 16px;
	border-radius: var(--ibh-radius-pill);
	background: var(--ibh-action-gradient);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--ibh-shadow-btn);
	transition: transform var(--ibh-transition), box-shadow var(--ibh-transition);
}
.ibh-lu-read svg { width: 13px; height: 13px; }
.ibh-lu-read:hover {
	transform: translateY(-2px) scale(1.03);
	box-shadow: var(--ibh-shadow-btn-hover);
	color: #fff;
}

@media (max-width: 960px) { .ibh-lu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ibh-lu-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   BROWSE CATEGORIES — icon cards with gradient hover-fill effect.
   -------------------------------------------------------------------------- */
.ibh-cat-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--ibh-gap);
}
.ibh-cat-card {
	background: var(--ibh-bg-card);
	border: 1px solid var(--ibh-border-soft);
	border-radius: var(--ibh-radius-lg);
	padding: 22px 14px;
	text-align: center;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: var(--ibh-shadow-sm);
	transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
	position: relative;
	overflow: hidden;
}
.ibh-cat-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--ibh-brand-gradient);
	opacity: 0;
	transition: opacity .28s ease;
}
.ibh-cat-card:hover::before { opacity: 1; }
.ibh-cat-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 44px rgba(10,79,168,.24);
	border-color: rgba(59,130,246,.30);
}
.ibh-cat-card > * { position: relative; z-index: 1; transition: color .28s ease; }
.ibh-cat-card:hover .ibh-cat-name,
.ibh-cat-card:hover .ibh-cat-count { color: #fff !important; }
.ibh-cat-icon {
	font-size: 2rem;
	margin-bottom: 9px;
	display: block;
	transition: transform .28s ease;
}
.ibh-cat-card:hover .ibh-cat-icon { transform: scale(1.12); }
.ibh-cat-name {
	font-family: var(--ibh-font);
	font-weight: 700;
	font-size: 14px;
	color: var(--ibh-text-dark);
	margin-bottom: 3px;
	line-height: 1.3;
}
.ibh-cat-count { font-size: 11.5px; color: var(--ibh-text-muted); }

@media (max-width: 860px) { .ibh-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .ibh-cat-grid { grid-template-columns: repeat(2, 1fr); } }