/* Portfolio page — matches the design screenshots. Loads AFTER menterra-home.css */

.portfolioSec { padding: 48px 0 90px; }
.portfolio-heading { text-align: center; max-width: 900px; margin: 0 auto 55px; padding: 0 20px; }
.portfolio-heading h1 { font-size: clamp(32px, 3.4vw, 40px); margin-bottom: 14px; }
.portfolio-heading p { font-size: 20px; line-height: 1.6; color: var(--muted); }
.adminNotice { width: min(92%, 1500px); margin: 0 auto 24px; background: #fff3cd; border: 1px solid #e0b100; padding: 12px 16px; }

.contentSec { width: min(92%, 1500px); margin: 0 auto; }

/* ---------- Filters: two dropdown bars side by side ---------- */
.filterSec {
	position: relative; z-index: 20; display: grid; grid-template-columns: 1fr 1fr;
	border: 1px solid #cfcfcf; background: var(--cream); margin-bottom: 50px;
}
.filterGroup { position: relative; }
.filterGroup + .filterGroup { border-left: 1px solid #cfcfcf; }
.filterHead {
	display: flex; width: 100%; height: 50px; align-items: center; justify-content: space-between;
	padding: 0 14px; background: var(--cream); border: 0; cursor: pointer; text-align: left;
	font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--text);
}
.filterChevron { width: 9px; height: 9px; margin-right: 6px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.filterHead[aria-expanded="true"] .filterChevron { transform: rotate(-135deg) translate(-2px, -2px); }
.filterList {
	position: absolute; top: 100%; left: -1px; right: -1px; z-index: 30; margin: 0; padding: 0; min-width: 0;
	background: var(--cream); border: 1px solid #cfcfcf; border-top: 1px solid #cfcfcf;
}
.filterOption {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 49px; padding: 0 14px;
	border-bottom: 1px solid #cfcfcf; cursor: pointer; font-size: 16px; text-transform: capitalize;
}
.filterOption:last-of-type { border-bottom: 0; }
.filterOption input { order: 2; width: 17px; height: 17px; accent-color: var(--green); flex: none; }
.clearFilters {
	grid-column: 1 / -1; padding: 14px 20px; background: var(--cream); border: 0; border-top: 1px solid #cfcfcf;
	color: var(--green); font-weight: 600; text-decoration: underline; cursor: pointer; text-align: left;
}

/* ---------- Cards ---------- */
.card-content { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; }
.cardDiv { margin: 0; }
.card-details {
	display: flex; width: 100%; height: 260px; align-items: center; justify-content: center; padding: 0;
	background: var(--beige); border: 1px solid #cfcfcf; cursor: pointer; transition: box-shadow .2s, border-color .2s;
}
.card-details:hover { border-color: var(--green); box-shadow: 0 8px 22px rgba(0,0,0,.08); }
.cardImg { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; padding: 30px; }
.cardImg img { max-width: 62%; max-height: 72%; width: auto; height: auto; object-fit: contain; }
.cardName { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--text); }

.nodata-sec { text-align: center; padding: 40px 20px; }
.nodata-img img { margin: 0 auto 18px; max-width: 160px; }
.nodata-sec h2 { font-size: 22px; margin-bottom: 8px; }
.nodata-sec p { color: var(--muted); }

.pitchCta { text-align: center; margin-top: 40px; }
.pitchCta .ctaThree { min-width: 334px; padding: 16px 28px; }

/* ---------- Company popup: dark strip on the left + full-height cream panel ---------- */
html.modal-open { overflow: hidden; }
dialog.mainDiv-modal {
	position: fixed; inset: 0; margin: 0; padding: 0; border: 0; overflow: hidden;
	width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
	background: transparent; color: var(--text);
}
dialog.mainDiv-modal::backdrop { background: rgba(0,0,0,.6); }

.close-button {
	position: absolute; z-index: 10; top: 12px; left: max(12px, calc(clamp(0px, 8vw, 120px) / 2 - 26px));
	width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
	background: #fff; color: #1f1f1f; border: 0; border-radius: 50%; cursor: pointer;
}
.close-button:hover { background: var(--beige); }

.modal-popup {
    position: relative;
    height: 100%;
    margin-left: clamp(0px, 26vw, 225px);
    overflow-y: auto;
    background: var(--cream);
    padding: 24px 21px 70px;
}
.modalImg-sec { margin-bottom: 36px; }
.imageDiv { margin: 0; font-size: 28px; }
.imageDiv img { height: 62px; width: auto; max-width: 240px; object-fit: contain; object-position: left center; }

.modelContent-child { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 15px; align-items: start; }

.video-wrap { position: relative; padding-bottom: 56.25%; height: 0; background: #000; margin-bottom: 20px; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modalContent-image { margin-bottom: 20px; }
.modalContent-image img { width: 100%; height: auto; }
.modalDesc { font-size: 14px; font-weight: 300; line-height: 1.7; }
.modalDesc p { margin-bottom: 18px; }

/* green details panel */
.modelContent-right { background: var(--green); color: #fff; padding: 22px 12px 26px; }
.model-head { padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.5); }
.model-head h3 { font-family: var(--font-head); font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.model-head h3::after { content: " :"; }
.model-head .Title { display: flex; align-items: center; gap: 14px; }
.model-head .Title p { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: #fff; text-transform: capitalize; }
.model-head .Title img { width: 26px; height: 26px; border-radius: 50%; background: #fff; }

.companyDetails { margin: 0; }
.model-subhead { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.35); }
.model-subhead dt, .model-subhead h3 {
	font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: .3px;
	text-transform: uppercase; color: #fff; margin: 0 0 6px;
}
.model-subhead dd { margin: 0; font-size: 12px; letter-spacing: 1.6px; line-height: 1.7; color: var(--lime); }
.sdgBox { border-bottom: 0; padding-bottom: 0; }
.developmentImg { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.developmentImg img { width: 50px; height: auto; }

/* social icons: plain green icons, bottom-left */
.socialmedia-img { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 34px; }
.socialMediaImg a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--green); background: transparent; }
.socialMediaImg a svg { width: 26px; height: 26px; }
.socialMediaImg a:hover { color: var(--green-dark); transform: scale(1.1); }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	.card-content { grid-template-columns: repeat(2, 1fr); gap: 22px; }
	.card-details { height: 220px; }
	.modelContent-child { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.portfolioSec { padding-top: 60px; }
	.filterSec { grid-template-columns: 1fr; }
	.filterGroup + .filterGroup { border-left: 0; border-top: 1px solid #cfcfcf; }
	.card-content { grid-template-columns: repeat(2, 1fr); }
	.card-details { height: 200px; }
	.modal-popup { margin-left: 0; padding-top: 80px; }
	.close-button { left: auto; right: 12px; background: var(--green); color: #fff; }
	.pitchCta .ctaThree { min-width: 0; width: 100%; }
}

/* ================= POPUP: sizes + fonts like the original ================= */
/* content stays a sensible width on big screens */
.modalImg-sec, .modelContent { max-width: 1290px; margin-left: auto; margin-right: auto; }
.modal-popup { padding-left: 24px; padding-right: 24px; }

/* bigger logo */
.imageDiv img { width: auto; height: auto; max-width: 360px; max-height: 110px; object-fit: contain; }
.modalImg-sec { margin-bottom: 30px; }

/* green panel: IvyPresto SemiBold, #FFFEFB headings (18px like the original) */
.model-head h3,
.model-head .Title p {
	font-family: var(--font-head); font-weight: 600; font-size: 18px; color: #FFFEFB; text-transform: capitalize;
}
.model-head h3 { margin: 0 0 4px; }
.model-head .Title p { margin: 5px 16px 0 0; }
.model-head .Title img { width: 44px; height: 44px; }
.model-subhead dt,
.model-subhead h3 {
	font-family: var(--font-head); font-weight: 600; font-size: 16px; letter-spacing: .2px;
	text-transform: uppercase; color: #FFFEFB; margin: 0 0 6px;
}
.model-subhead dd { font-size: 14px; letter-spacing: 2px; line-height: 1.7; color: var(--lime); }
.modelContent-right { padding: 24px 16px 28px; }
@media (max-width: 767px) {
.portfolio-heading p {
    font-size: 14px!important;
  
}
.cardImg img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
	.imageDiv img { max-width: 240px; max-height: 80px; }
}
/* ================= BOLD HEADINGS FIX =================
   The Customizer font CSS forces Soleil Light (!important) on button / span / p / form elements,
   and Soleil Light has no bold – so font-weight:700 did nothing. These items use IvyPresto Semi Bd
   (already a bold face) – so family is forced with !important and weight stays normal
   (700 on top would make a fake, smeared bold). */
.filterHead,
.filterHead span,
.filterOption span,
.cardName,
.model-head .Title p,
.model-head h3,
.model-subhead dt,
.model-subhead h3 {
	font-family: "IvyPresto Text Semi Bd", "IvyPresto Text", Georgia, "Times New Roman", serif !important;
	font-weight: normal !important;
	font-synthesis: none;
}
.filterHead { font-size: 18px; }
.filterOption { font-size: 17px; }
/* ==========================================================================
   MOBILE LISTING – like the original (/portfolio-listing/ on a phone)
   Side gutters ≈ 4.4% (18px on a 411px phone) – filters and cards share the SAME width.
   Everything scales with the screen so it matches the original at 411px AND at 555px.
   • both filters stay side by side, divider between
   • 2-column logo grid, 19px gaps; card height comes from the logo (padding = % of card width)
   ========================================================================== */
@media (max-width: 767px) {
	.portfolioSec { padding: 30px 0 37px; }
	.portfolio-heading { margin: 0 auto 24px; padding: 0 4.4%; }
	.portfolio-heading h1 { font-size: clamp(28px, 6.5vw, 36px); line-height: 1.2; margin-bottom: 8px; }
	.portfolio-heading p { font-size: clamp(13px, 3.2vw, 16px) !important; line-height: 1.45; letter-spacing: .02em; color: #1f1f1f; }

	/* same width for filter bar and card grid → equal left / right spacing */
	.contentSec { width: 91.2%; margin: 0 auto; }
	.adminNotice { width: 91.2%; }

	/* filters */
	.filterSec { grid-template-columns: 1fr 1fr; margin-bottom: clamp(27px, 6.5vw, 36px); border-color: #b5b3ad; }
	.filterGroup + .filterGroup { border-left: 1px solid #b5b3ad; border-top: 0; }
	.filterHead { height: clamp(45px, 11vw, 61px); padding: 0 clamp(12px, 3.6vw, 20px) 0 clamp(10px, 3vw, 14px); font-size: clamp(13px, 3.3vw, 18px); text-decoration: underline; text-underline-offset: 3px; }
	.filterHead span { text-decoration: underline; text-underline-offset: 3px; }
	.filterChevron { width: 10px; height: 10px; margin-right: 3px; border-width: 1.5px; }
	.filterOption { font-size: clamp(14px, 3.2vw, 16px); }
	.clearFilters { text-decoration: none; }

	/* cards: height follows the logo, like the original */
	.card-content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px; }
	.cardDiv { height: 100%; }
	.card-details { height: 100%; min-height: 0; border-color: #b0aea8; }
	.cardImg { height: auto; padding: 21% 11%; }
	.cardImg img { max-width: 100%; max-height: none; width: auto; height: auto; }

	/* Pitch To Us: small centred button (not a full-width bar) */
	.pitchCta { margin-top: 29px; }
	.pitchCta .ctaThree { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 0; min-height: 35px; padding: 0 75px; font-size: 12px; }
}