/* ============================================================
   TRESUN-TECH Products (Product Center) — inherits approved
   Homepage Design System tokens (defined in approved-homepage.css)
   ============================================================ */

/* ---------- Hero ---------- */
.products-hero{
	position:relative;overflow:hidden;color:#fff;
	background:linear-gradient(108deg,rgba(6,26,41,.96) 0%,rgba(10,45,65,.88) 55%,rgba(43,92,82,.74) 100%),url('../images/asset-001.png') center/cover no-repeat;
	padding:92px 0 84px;
}
.products-hero .kicker{color:#7ce0a3;font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:800;margin-bottom:14px}
.products-hero h1{font-size:52px;line-height:1.08;margin:0 0 18px;max-width:820px;letter-spacing:-.5px}
.products-hero p{font-size:16px;color:#d3e0e4;max-width:680px;margin:0;line-height:1.6}

/* ---------- Portfolio navigation (8 categories) ---------- */
.products-section{padding:84px 0}
.products-section.soft{background:var(--soft)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:38px}
.section-head .eyebrow{color:var(--green);font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:800;margin-bottom:10px}
.section-head h2{font-size:36px;line-height:1.12;margin:0;max-width:560px;letter-spacing:-.3px}
.section-head p{font-size:14px;color:var(--muted);max-width:440px;margin:0;line-height:1.6}

.portfolio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.portfolio-card{
	background:#fff;border:1px solid var(--line);border-radius:var(--radius);
	overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;
	transition:transform .22s ease,box-shadow .22s ease;
}
.portfolio-card:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(8,31,45,.14)}
.portfolio-card .pc-media{height:168px;background:#f4f7f8;display:flex;align-items:center;justify-content:center;overflow:hidden}
.portfolio-card .pc-media img{width:100%;height:100%;object-fit:contain;padding:14px;transition:transform .3s ease}
.portfolio-card:hover .pc-media img{transform:scale(1.04)}
.portfolio-card .pc-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.portfolio-card .pc-body h3{font-size:17px;margin:0 0 8px;line-height:1.25}
.portfolio-card .pc-body p{font-size:12.5px;color:var(--muted);margin:0 0 16px;line-height:1.55;flex:1}
.portfolio-card .pc-link{font-size:12.5px;font-weight:800;color:var(--green);display:inline-flex;align-items:center;gap:6px}
.portfolio-card .pc-link:hover{color:#0f7c3e}

/* ---------- Grouped platforms ---------- */
.group-block{margin-bottom:26px}
.group-block:last-child{margin-bottom:0}
.group-title{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.group-title .gt-num{font-size:11px;font-weight:900;letter-spacing:1.5px;color:var(--green);background:#e9f5ee;border-radius:999px;padding:5px 11px}
.group-title h2{font-size:26px;margin:0;line-height:1.15}
.group-title span{font-size:13px;color:var(--muted)}

.platform-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.platform-grid.three{grid-template-columns:repeat(3,1fr)}
.platform-grid.wide .platform-card:only-child{grid-column:1/-1}

.platform-card{
	background:#fff;border:1px solid var(--line);border-radius:var(--radius);
	overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;
	transition:transform .22s ease,box-shadow .22s ease;
}
.platform-card:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(8,31,45,.14)}
.platform-card .pf-media{height:230px;background:#f4f7f8;display:flex;align-items:center;justify-content:center;overflow:hidden}
.platform-card .pf-media img{width:100%;height:100%;object-fit:contain;padding:18px}
.platform-card .pf-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.platform-card .pf-body h3{font-size:21px;margin:0 0 9px;line-height:1.2}
.platform-card .pf-body p{font-size:13px;color:var(--muted);margin:0 0 14px;line-height:1.6;flex:1}
.platform-card .pf-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.platform-card .pf-chips span{font-size:11px;font-weight:700;color:#33505e;background:#eef4f2;border-radius:999px;padding:6px 11px}
.platform-card .pf-link{font-size:13px;font-weight:800;color:var(--green);display:inline-flex;align-items:center;gap:6px}
.platform-card .pf-link:hover{color:#0f7c3e}
.platform-card.dark{background:linear-gradient(120deg,#091f2e,#123b4d 55%,#245b4c);border:0;color:#fff}
.platform-card.dark .pf-body h3{color:#fff}
.platform-card.dark .pf-body p{color:#c9d9de}
.platform-card.dark .pf-chips span{background:rgba(255,255,255,.10);color:#dbe6e9;border:1px solid rgba(255,255,255,.12)}
.platform-card.dark .pf-link{color:#7ce0a3}

/* ---------- RFQ CTA ---------- */
.products-rfq{padding:70px 0 90px}
.products-rfq .band{
	background:linear-gradient(120deg,#071c2b,#0d3043 55%,#245b4c);color:#fff;
	border-radius:26px;padding:46px 50px;display:flex;align-items:center;justify-content:space-between;gap:30px;
	box-shadow:0 22px 55px rgba(8,31,45,.22);
}
.products-rfq .band h3{font-size:27px;margin:0 0 10px;line-height:1.2}
.products-rfq .band p{font-size:13.5px;color:#c9d9de;margin:0;max-width:560px;line-height:1.6}
.products-rfq .band .btn-light{background:#fff;color:#0b2431;padding:14px 26px;border-radius:14px;font-weight:800;font-size:14px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.products-rfq .band .btn-light:hover{background:#eaf6ee}
.products-rfq .band .btn-ghost{border:1px solid rgba(255,255,255,.35);color:#fff;padding:13px 24px;border-radius:14px;font-weight:800;font-size:14px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.products-rfq .band .btn-ghost:hover{background:rgba(255,255,255,.08)}
.products-rfq .band .cta-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
	.portfolio-grid{grid-template-columns:repeat(2,1fr)}
	.platform-grid.three{grid-template-columns:1fr 1fr}
	.products-hero h1{font-size:44px}
	.products-rfq .band{flex-direction:column;align-items:flex-start;padding:38px 34px}
}
@media(max-width:720px){
	.products-hero{padding:66px 0 60px}
	.products-hero h1{font-size:34px}
	.products-hero p{font-size:14.5px}
	.products-section{padding:60px 0}
	.section-head{display:block}
	.section-head p{margin-top:12px}
	.section-head h2{font-size:28px}
	.portfolio-grid{grid-template-columns:1fr 1fr;gap:12px}
	.portfolio-card .pc-media{height:120px}
	.portfolio-card .pc-body{padding:14px 14px 16px}
	.portfolio-card .pc-body h3{font-size:15px}
	.platform-grid,.platform-grid.three{grid-template-columns:1fr}
	.group-title{flex-wrap:wrap}
	.products-rfq{padding:54px 0 66px}
	.products-rfq .band{padding:32px 26px}
	.products-rfq .band h3{font-size:22px}
	.products-rfq .band .cta-actions{flex-direction:column;width:100%}
	.products-rfq .band .btn-light,.products-rfq .band .btn-ghost{width:100%;justify-content:center}
}
@media(max-width:560px){
	.portfolio-grid{grid-template-columns:1fr}
	.portfolio-card .pc-media{height:150px}
}

/* ============================================
   03 E-Mobility — EV Charging category visual
   Module-specific (ev-category-media / ev-category-visual).
   Approved 2026-08-18. Do not touch other cards.
   ============================================ */
.platform-card .pf-media.ev-category-media{height:380px}
.platform-card .pf-media.ev-category-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 64%;padding:0}
@media(max-width:1100px){
	.platform-card .pf-media.ev-category-media{height:340px}
	.platform-card .pf-media.ev-category-media img{object-position:center center}
}
@media(max-width:720px){
	.platform-card .pf-media.ev-category-media{height:300px}
}
@media(max-width:560px){
	.platform-card .pf-media.ev-category-media{height:240px}
}