/*
 * our-expertise.css — Home page: "Our Expertise" tabbed section.
 *
 * Figma spec (desktop): 1704px panel, #F7F7F8 background, 1px #F1F1F3
 * border, 20px radius, 30px padding, 40px gap tabs→content; 3 equal tabs at
 * 65px height (active = #CCE1B5 pill, 16px radius); two-column content
 * (~1fr 1fr, 40px gap) — service cards (12px gap, #FCECD8, 20px radius,
 * 20px padding, ~140px tall, 250x140 image at 12px radius) beside a map
 * that fills the remaining column and matches the card stack's height.
 *
 * Markup: template-parts/home/our-expertise.php.
 *
 * @package Bennelongia
 */

.home-our-expertise {
	--oe-color-heading: #030712;
	--oe-color-text:    #364153;
	--oe-color-green:   #7FB04F;
	--oe-font:          "Sora", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--oe-font-poppins:  "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	/* Was 100px — trimmed along with the width change so the section does not
	   sit in as much empty space now that it runs edge to edge. */
	padding-block: 64px;
	font-family:   var( --oe-font );
}

/* Full-bleed: the 1704px cap this replaces left ~108px of empty page either
   side on a 1920px screen. A small inline gutter keeps the panel off the
   viewport edges. */
.home-our-expertise__inner {
	max-width:     none;
	margin:        0 auto;
	padding-inline: 24px;
}

.home-our-expertise__heading {
	margin:      0 0 24px;
	font-family: var( --oe-font );
	font-size:   2.25rem;
	font-weight: 700;
	color:       var( --oe-color-heading );
}

.home-our-expertise__description {
	max-width:   100%;
	margin:      0 0 30px;
	font-family: var( --oe-font );
	font-size:   1rem;
	line-height: 1.6;
	color:       var( --oe-color-text );
}

/* =============================================================================
   Panel
   ============================================================================= */

.home-our-expertise__panel {
	display:        flex;
	flex-direction: column;
	gap:            32px;
	/* Fills the now full-width inner rather than re-imposing the old cap. */
	max-width:      none;
	padding:        24px;
	background:     #F7F7F8;
	border:         1px solid #F1F1F3;
	border-radius:  20px;
}

/* =============================================================================
   Tabs
   ============================================================================= */

.home-our-expertise__tabs {
	display:               grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap:                   8px;
}

.home-our-expertise__tab {
	height:        65px;
	padding:       0 16px;
	border:        none;
	border-radius: 12px;
	background:    transparent;
	font-family:   var( --oe-font );
	font-size:     20px;
	font-weight:   400;
	line-height:   25px;
	color:         #030712;
	cursor:        pointer;
	transition:    background-color 0.2s ease;
}

.home-our-expertise__tab.is-active {
	background:  #CCE1B5;
	font-weight: 600;
}

.home-our-expertise__tab:hover,
.home-our-expertise__tab:focus-visible {
	background: #E3EFD6;
	outline:    none;
}

.home-our-expertise__tab.is-active:hover,
.home-our-expertise__tab.is-active:focus-visible {
	background: #CCE1B5;
}

/* =============================================================================
   Our Services — cards + map
   ============================================================================= */

.home-our-expertise__pane[hidden] {
	display: none;
}

.home-our-expertise__services {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	align-items:           stretch;
	gap:                   40px;
}

.home-our-expertise__cards {
	display:        flex;
	flex-direction: column;
	gap:            12px;
}

.home-our-expertise__card {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             20px;
	min-height:      140px;
	padding:         20px;
	background:      #FCECD8;
	border-radius:   20px;
	text-decoration: none;
	transition:      box-shadow 0.2s ease;
}

.home-our-expertise__card:hover,
.home-our-expertise__card:focus-visible {
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.08 );
	outline:    none;
}

.home-our-expertise__card-text {
	display:        flex;
	flex-direction: column;
	gap:            8px;
	min-width:      0;
}

.home-our-expertise__card-title {
	margin:      0;
	font-family: var( --oe-font );
	font-size:   28px;
	font-weight: 600;
	line-height: 38px;
	color:       var( --oe-color-heading );
}

.home-our-expertise__card-desc {
	display:            -webkit-box;
	margin:             0;
	font-family:        var( --oe-font );
	font-size:          18px;
	font-weight:        400;
	line-height:        24px;
	color:              var( --oe-color-text );
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow:           hidden;
}

.home-our-expertise__card-link {
	display:      inline-flex;
	align-items:  center;
	gap:          6px;
	font-family:  var( --oe-font-poppins );
	font-size:    18px;
	font-weight:  500;
	color:        var( --oe-color-green );
}

.home-our-expertise__card-image {
	flex-shrink:   0;
	width:         250px;
	height:        140px;
	border-radius: 12px;
	overflow:      hidden;
}

.home-our-expertise__card-image-el {
	display:    block;
	width:      100%;
	height:     200px;
	object-fit: cover;
}

.home-our-expertise__map {
	position:      relative;
	height:        100%;
	min-height:    300px;
	border-radius: 20px;
	overflow:      hidden;
}

/*
 * Absolutely positioned so the real photo's own aspect ratio can never
 * inflate this grid row past the cards column's natural height — an
 * in-flow img here would size .home-our-expertise__map to its own
 * intrinsic height BEFORE grid's align-items:stretch resolves the row
 * height, making the map taller than the card stack regardless of the
 * height:100% above.
 */
.home-our-expertise__map-image {
	position:        absolute;
	inset:           0;
	display:         block;
	width:           100%;
	height:          100%;
	object-fit:      cover;
	object-position: center 20%;
}

.home-our-expertise__map-expand {
	position:        absolute;
	right:           16px;
	bottom:          16px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           36px;
	height:          36px;
	border:          none;
	border-radius:   8px;
	background:      rgba( 0, 0, 0, 0.55 );
	color:           #fff;
	cursor:          pointer;
	transition:      background-color 0.2s ease;
}

.home-our-expertise__map-expand:hover,
.home-our-expertise__map-expand:focus-visible {
	background: rgba( 0, 0, 0, 0.75 );
	outline:    none;
}

.home-our-expertise__empty {
	margin:      0;
	font-family: var( --oe-font );
	color:       var( --oe-color-text );
}

/* =============================================================================
   Why Choose Us — Figma: 840px left column + 704px card grid, 100px gap.
   Scoped to [data-oe-pane="why-choose"] only — doesn't touch Our Services
   or News and Blogs.
   ============================================================================= */

.home-our-expertise__pane[data-oe-pane="why-choose"] {
	display:     flex;
	align-items: flex-start;
	gap:         100px;
}

.home-our-expertise__why-intro {
	display:        flex;
	flex-direction: column;
	width:          840px;
	flex-shrink:    0;
}

.home-our-expertise__why-title {
	margin:      0;
	font-family: var( --oe-font );
	font-size:   42px;
	font-weight: 400;
	line-height: 50px;
	color:       #030712;
}

.home-our-expertise__why-title strong {
	font-weight: 600;
}

.home-our-expertise__why-desc {
	margin-top:  12px;
	font-family: var( --oe-font );
	font-size:   20px;
	font-weight: 400;
	line-height: 34px;
	color:       #364153;
}

.home-our-expertise__reasons {
	display:               grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	grid-template-rows:    repeat( 2, minmax( 0, 1fr ) );
	gap:                   20px;
	width:                 704px;
	margin:                0;
	padding:               0;
	list-style:            none;
}

.home-our-expertise__reason {
	display:        flex;
	flex-direction: column;
	gap:            20px;
	min-height:     212px;
	padding:        30px;
	background:     #FFFFFF;
	border:         1px solid #F1F1F3;
	border-radius:  16px;
}

.home-our-expertise__reason-icon {
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	width:           72px;
	height:          72px;
	background:      #FCFCFD;
	border:          1px solid #F1F1F3;
	border-radius:   16px;
}

.home-our-expertise__reason-icon img {
	display:    block;
	width:      32px;
	height:     32px;
	object-fit: contain;
}

.home-our-expertise__reason-title {
	margin:      0;
	font-family: var( --oe-font );
	font-size:   20px;
	font-weight: 500;
	line-height: 30px;
	color:       #030712;
}

.home-our-expertise__reason-desc {
	margin:      8px 0 0;
	font-family: var( --oe-font );
	font-size:   16px;
	line-height: 1.5;
	color:       var( --oe-color-text );
}

/* =============================================================================
   News and Blogs — Figma: 552px featured card + 1068px list column (2
   cards), 24px gap between columns, 20px gap between the two list cards.
   Scoped to [data-oe-pane="news"] only — doesn't touch Our Services or
   Why Choose Us.
   ============================================================================= */

.home-our-expertise__news {
	display: flex;
	gap:     24px;
}

.home-our-expertise__news-featured,
.home-our-expertise__news-card {
	display:         flex;
	flex-direction:  column;
	text-decoration: none;
	border:          1px solid #F1F1F3;
	border-radius:   20px;
	padding:         30px;
}

.home-our-expertise__news-featured {
	width:       552px;
	flex-shrink: 0;
	min-height:  461px;
	background:  #FCECD8;
}

.home-our-expertise__news-list {
	display:        flex;
	flex-direction: column;
	gap:            20px;
	flex:           1 1 auto;
	min-width:      0;
}

.home-our-expertise__news-card {
	min-height: 218px;
	background: #FFFFFF;
}

.home-our-expertise__news-date {
	font-family: var( --oe-font );
	font-size:   18px;
	font-weight: 500;
	line-height: 24px;
	color:       #364153;
}

.home-our-expertise__news-title {
	margin:      16px 0 0;
	font-family: var( --oe-font );
	font-size:   21px;
	font-weight: 600;
	line-height: 30px;
	color:       #030712;
}

.home-our-expertise__news-desc {
	margin:      12px 0 0;
	font-family: var( --oe-font );
	font-size:   18px;
	font-weight: 400;
	line-height: 24px;
	color:       #364153;
}

.home-our-expertise__news-featured .home-our-expertise__news-desc {
	display:            -webkit-box;
	-webkit-line-clamp: 7;
	-webkit-box-orient:  vertical;
	overflow:            hidden;
}

.home-our-expertise__news-card .home-our-expertise__news-desc {
	display:            -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient:  vertical;
	overflow:            hidden;
}

.home-our-expertise__news-readmore {
	display:      inline-flex;
	align-items:  center;
	gap:          8px;
	margin-top:   12px;
	font-family:  var( --oe-font-poppins );
	font-size:    18px;
	font-weight:  500;
	line-height:  100%;
	color:        #7FB04F;
	text-decoration: none;
}

.home-our-expertise__news-featured .home-our-expertise__news-readmore {
	margin-top: auto;
}

.home-our-expertise__news-readmore {
	margin-top: 12px;
}

.home-our-expertise__news-viewall {
	display:         flex;
	justify-content: center;
	margin-top:      30px;
}

.home-our-expertise__news-viewall-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	width:           223px;
	height:          58px;
	padding:         14px 24px;
	background:      #7FB04F;
	border-radius:   12px;
	font-family:     var( --oe-font-poppins );
	font-size:       20px;
	font-weight:     500;
	color:           #FFFFFF;
	text-decoration: none;
	transition:      background-color 0.2s ease;
}

.home-our-expertise__news-viewall-btn:hover,
.home-our-expertise__news-viewall-btn:focus-visible {
	background: #6a9a3f;
	outline:    none;
}

/* =============================================================================
   Responsive
   ============================================================================= */

/* Widened from 991.98px — iPad Pro portrait (1024px wide) fell just above
   the old threshold, so it was still getting the fixed 2-column card grid
   with a 250px-wide card image and 28px/18px fonts meant for desktop,
   squeezing the text column down to ~130px and wrapping headings badly.
   1099.98px comfortably covers iPad Pro (and similar ~1024px tablets)
   without affecting real desktop widths. */
@media ( max-width: 1099.98px ) {
	.home-our-expertise {
		padding-block: 60px;
	}

	.home-our-expertise__panel {
		padding: 20px;
		gap:     24px;
	}

	.home-our-expertise__tab {
		height:    52px;
		padding:   0 8px;
		font-size: 16px;
	}

	.home-our-expertise__services {
		grid-template-columns: 1fr;
	}

	/* The absolute positioning on desktop exists purely to stop the map's
	   own aspect ratio inflating the shared two-column grid row. In one
	   column there's no shared row to protect, so the image flows normally
	   at its natural ratio — cropping it into a fixed 260px strip was
	   cutting off most of the map (and the legend baked into the photo). */
	.home-our-expertise__map {
		height:     auto;
		min-height: 0;
	}

	.home-our-expertise__map-image {
		position: static;
		height:   auto;
	}

	.home-our-expertise__card-title {
		font-size:   22px;
		line-height: 28px;
	}

	.home-our-expertise__card-desc {
		font-size:   16px;
		line-height: 22px;
	}

	/* News and Blogs — vertical layout, featured card full width, list stays stacked. */
	.home-our-expertise__news {
		flex-direction: column;
		gap:            24px;
	}

	.home-our-expertise__news-featured,
	.home-our-expertise__news-list {
		width: 100%;
	}

	.home-our-expertise__news-featured,
	.home-our-expertise__news-card {
		padding: 24px;
	}

	/* Why Choose Us — vertical layout, left column full width, 2-col cards kept where space allows. */
	.home-our-expertise__pane[data-oe-pane="why-choose"] {
		flex-direction: column;
		gap:            40px;
	}

	.home-our-expertise__why-intro {
		width: 100%;
	}

	.home-our-expertise__reasons {
		width: 100%;
	}
}

@media ( max-width: 575.98px ) {
	.home-our-expertise__card-image-el {
	display:    block;
	width:      100%;
	height:     100%;
	object-fit: cover;
}
	.home-our-expertise {
		padding-block: 40px;
	}

	.home-our-expertise__heading {
		font-size: 1.75rem;
	}

	.home-our-expertise__panel {
		padding:       5px;
		border-radius: 16px;
	}

	.home-our-expertise__tab {
		height:        44px;
		padding:       0 6px;
		font-size:     13px;
		white-space:   nowrap;
		overflow:      hidden;
		text-overflow: ellipsis;
	}

	.home-our-expertise__card {
		gap:        12px;
		padding:    12px;
		min-height: 0;
	}

	.home-our-expertise__card-title {
		font-size:   17px;
		line-height: 22px;
	}

	.home-our-expertise__card-desc {
		display:            -webkit-box;
		font-size:           14px;
		line-height:         19px;
		-webkit-line-clamp:  2;
		-webkit-box-orient:  vertical;
		overflow:            hidden;
	}

	.home-our-expertise__card-link {
		font-size: 14px;
	}

	.home-our-expertise__card-image {
		width:  96px;
		height: 96px;
	}

	/* Why Choose Us — 1-col cards, full width, reduced heading/paragraph scale. */
	.home-our-expertise__why-title {
		font-size:   32px;
		line-height: 40px;
	}

	.home-our-expertise__why-desc {
		font-size:   18px;
		line-height: 28px;
	}

	.home-our-expertise__reasons {
		grid-template-columns: 1fr;
		grid-template-rows:    none;
	}

	.home-our-expertise__reason {
		width:         100%;
		min-height:    0;
		padding:       20px;
		border-radius: 16px;
	}

	/* News and Blogs — everything stacks single-column, reduced padding/scale. */
	.home-our-expertise__news {
		flex-direction: column;
		gap:            20px;
	}

	.home-our-expertise__news-featured,
	.home-our-expertise__news-list {
		width: 100%;
	}

	.home-our-expertise__news-featured,
	.home-our-expertise__news-card {
		padding:    20px;
		min-height: 0;
	}

	.home-our-expertise__news-title {
		font-size:   19px;
		line-height: 26px;
	}

	.home-our-expertise__news-desc {
		font-size:   16px;
		line-height: 22px;
	}

	.home-our-expertise__news-viewall-btn {
		width:     100%;
		height:    50px;
		padding:   12px 20px;
		font-size: 16px;
	}
}

/* =============================================================================
   Map lightbox — dark overlay, top-right toolbar (fit / fullscreen / zoom
   out / zoom in / share / close), matching the old Elementor build's map
   lightbox. Opened/closed and driven by assets/js/home/our-expertise.js.
   ============================================================================= */

.oe-lightbox {
	position: fixed;
	inset:    0;
	z-index:  9999;
	display:  flex;
	flex-direction: column;
	background: rgba( 0, 0, 0, 0.85 );
}

.oe-lightbox[hidden] {
	display: none;
}

.oe-lightbox__toolbar {
	display:         flex;
	justify-content: flex-end;
	align-items:     center;
	gap:             8px;
	padding:         16px 24px;
	flex-shrink:     0;
}

.oe-lightbox__btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           36px;
	height:          36px;
	border:          none;
	border-radius:   8px;
	background:      transparent;
	color:           #fff;
	cursor:          pointer;
	transition:      background-color 0.2s ease;
}

.oe-lightbox__btn:hover,
.oe-lightbox__btn:focus-visible {
	background: rgba( 255, 255, 255, 0.15 );
	outline:    none;
}

.oe-lightbox__stage {
	flex:            1 1 auto;
	display:         flex;
	align-items:     center;
	justify-content: center;
	min-height:      0;
	padding:         0 24px 24px;
	overflow:        hidden;
}

.oe-lightbox__image {
	max-width:     100%;
	max-height:    100%;
	border-radius: 20px;
	object-fit:    contain;
	transition:    transform 0.2s ease;
	cursor:        zoom-in;
	transform:     scale( var( --oe-lightbox-zoom, 1 ) );
}

.oe-lightbox.is-fullscreen .oe-lightbox__image {
	max-width:  none;
	max-height: none;
	width:      auto;
	height:     100%;
	border-radius: 0;
}

@media ( max-width: 575.98px ) {
	.home-our-expertise__card-image-el {
	display:    block;
	width:      100%;
	height:     100%;
	object-fit: cover;
}
	.oe-lightbox__toolbar {
		padding: 12px;
	}

	.oe-lightbox__stage {
		padding: 0 12px 12px;
	}
}