/* =========================================================
   KPC E-Procurement page (template-eprocurement.php and the
   "KPC E-Procurement" Elementor widgets). Builds on sustainability.css
   (banner, buttons); own parts are kep-.
   ========================================================= */
.kep-page { background: var(--ks-white); }
.kep-page section { box-sizing: border-box; }
.kep-page section * { box-sizing: border-box; }
.kep-h2 { font-size: var(--kpc-heading-size); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: var(--ks-dark); margin: 0; }
.kep-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-xs, 13px); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ks-dark); margin-bottom: 14px; }
.kep-eyebrow::before, .kep-bar::before { content: ""; width: 34px; height: 4px; border-radius: 2px; background: var(--ks-brand); display: inline-block; }
.kep-bar { display: flex; align-items: center; gap: 14px; text-transform: uppercase; font-size: var(--fs-xl, 22px); letter-spacing: .01em; }
.kep-sub { margin: 8px 0 0; color: var(--ks-muted); }
.kep-go { color: var(--ks-brand); font-size: var(--fs-base, 16px); transition: transform .2s ease; display: inline-block; }

/* quick cards */
.kep-quick { padding: 28px 0 8px; position: relative; z-index: 2; }
.kep-quick-grid { display: grid; grid-template-columns: repeat(var(--kep-n, 4), minmax(0, 1fr)); gap: 16px; margin-top: -64px; }
.kep-qcard { display: flex; gap: 14px; align-items: flex-start; background: var(--ks-white); border: 1px solid var(--ks-line); border-radius: 12px; padding: 20px; box-shadow: 0 14px 30px -20px rgba(17,17,17,.35); color: inherit; transition: border-color .2s, transform .2s; }
.kep-qcard:hover { border-color: var(--ks-brand); transform: translateY(-2px); color: inherit; }
.kep-qcard:hover .kep-go { transform: translateX(4px); }
.kep-qicon { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ks-brand); color: #fff; font-size: 1.25rem; }
.kep-qbody { display: flex; flex-direction: column; gap: 4px; }
.kep-qbody b { font-size: var(--fs-base, 16px); color: var(--ks-dark); }
.kep-qbody > span:not(.kep-go) { font-size: var(--fs-sm, 14px); color: var(--ks-muted); line-height: 1.5; }
.kep-qbody .kep-go { margin-top: 6px; }

/* supplier engagement */
.kep-engage { padding: 56px 0; }
.kep-engage-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.kep-lead { color: var(--ks-body); font-size: var(--fs-base, 16px); line-height: 1.7; margin: 18px 0 0; max-width: 58ch; }
.kep-feats { list-style: none; margin: 26px 0 28px; padding: 0; display: grid; grid-template-columns: repeat(var(--kep-n, 4), minmax(0, 1fr)); }
.kep-feats li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 4px 12px; font-size: var(--fs-sm, 14px); font-weight: 600; color: var(--ks-dark); line-height: 1.35; margin: 0; }
.kep-feats li + li { border-left: 1px solid var(--ks-line); }
.kep-ficon { font-size: 1.9rem; color: var(--ks-brand); }
.kep-engage-media { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 5 / 4; background: #1d2a22; clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); }
.kep-engage-media::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 13%; background: var(--ks-brand); clip-path: polygon(78% 0, 100% 0, 22% 100%, 0 100%); z-index: 2; }
.kep-engage-media img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; }

/* quick access tiles */
.kep-access { padding: 16px 0 40px; }
.kep-tiles { display: grid; grid-template-columns: repeat(var(--kep-n, 5), minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.kep-tile { display: flex; flex-direction: column; gap: 12px; padding: 22px 20px; border: 1px solid var(--ks-line); border-radius: 12px; background: var(--ks-white); color: var(--ks-dark); transition: border-color .2s, box-shadow .2s; min-height: 150px; }
.kep-tile:hover { border-color: var(--ks-brand); box-shadow: 0 14px 28px -22px rgba(17,17,17,.45); color: var(--ks-dark); }
.kep-tile:hover .kep-go { transform: translateX(4px); }
.kep-ticon { font-size: 1.7rem; color: var(--ks-brand); }
.kep-tile b { font-size: var(--fs-base, 16px); line-height: 1.35; }
.kep-tile .kep-go { margin-top: auto; }

/* useful links + live meetings */
.kep-resources { padding: 8px 0 56px; }
.kep-res-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.kep-box { border: 1px solid var(--ks-line); border-radius: 14px; padding: 24px; background: var(--ks-white); scroll-margin-top: var(--ks-sticky-top, 120px); }
.kep-box-head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.kep-box-head h3 { margin: 0; font-size: var(--fs-xl, 22px); font-weight: 800; color: var(--ks-dark); }
.kep-box-head p { margin: 2px 0 0; font-size: var(--fs-sm, 14px); color: var(--ks-muted); }
.kep-bicon { flex: 0 0 50px; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--ks-brand); color: #fff; font-size: 1.2rem; }
.kep-linklist { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; }
.kep-linklist li { break-inside: avoid; margin: 0; }
.kep-linklist a { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; color: var(--ks-body); font-size: var(--fs-sm, 14px); }
.kep-linklist a i { color: var(--ks-brand); font-size: .72rem; }
.kep-linklist a:hover { color: var(--ks-brand-deep); }
.kep-meetings { background: linear-gradient(120deg, #111 0%, #1b1b1b 55%, var(--ks-brand-deep) 100%); border: 0; color: #fff; }
.kep-meetings .kep-box-head h3 { color: #fff; }
.kep-meetings .kep-box-head p { color: #D4D7DC; }
.kep-meetings .kep-bicon { background: var(--ks-brand); }
.kep-mgrid { display: grid; grid-template-columns: repeat(var(--kep-n, 2), minmax(0, 1fr)); gap: 14px; }
.kep-meeting { background: var(--ks-white); color: var(--ks-ink); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; }
.kep-mhead { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.kep-mbadge { flex: 0 0 46px; border: 1.5px solid var(--ks-line); border-radius: 8px; text-align: center; overflow: hidden; }
.kep-mbadge span { display: block; background: var(--ks-btn); color: #fff; font-size: var(--fs-2xs, 11px); font-weight: 700; text-transform: uppercase; padding: 1px 0; }
.kep-mbadge b { display: block; font-size: var(--fs-lg, 18px); line-height: 1.5; color: var(--ks-dark); }
.kep-meeting h4 { margin: 0; font-size: var(--fs-base, 16px); font-weight: 700; color: var(--ks-dark); }
.kep-mmeta { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.kep-mmeta li { display: flex; gap: 10px; align-items: baseline; font-size: var(--fs-xs, 13px); color: var(--ks-muted); margin: 0; }
.kep-mmeta i { color: var(--ks-dark); width: 14px; }
.kep-mbtn { margin-top: auto; align-self: flex-start; padding: 9px 14px; font-size: var(--fs-xs, 13px); }
.kep-noevent { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: center; background: var(--ks-white); color: var(--ks-ink); border-radius: 12px; padding: 18px; }
.kep-noevent img { width: 100% !important; height: auto !important; border-radius: 10px; display: block; }
.kep-noevent b { display: block; font-size: var(--fs-lg, 18px); color: var(--ks-dark); }
.kep-noevent p { margin: 6px 0 0; font-size: var(--fs-sm, 14px); color: var(--ks-muted); }

/* supplier support */
.kep-support { position: relative; background: #111; color: #fff; padding: 34px 0; border-bottom: 4px solid var(--ks-brand); overflow: hidden; }
.kep-support::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(17,17,17,.95) 0%, rgba(17,17,17,.85) 60%, rgba(17,17,17,.75) 100%), var(--kep-bg, none); background-size: cover; background-position: center; }
.kep-support .ks-wrap { position: relative; }
.kep-support-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .9fr); gap: 28px; align-items: center; }
.kep-support-lead { display: flex; gap: 18px; align-items: center; }
.kep-sicon { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--ks-brand); font-size: 1.5rem; }
.kep-support h2 { margin: 0; font-size: var(--fs-2xl, 28px); font-weight: 800; color: #fff; }
.kep-support p { margin: 4px 0 0; color: #D4D7DC; font-size: var(--fs-sm, 14px); }
.kep-support-contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kep-support-contacts li { display: flex; gap: 12px; align-items: center; margin: 0; font-size: var(--fs-base, 16px); }
.kep-support-contacts a { color: #fff; }
.kep-support-contacts a:hover { color: var(--ks-brand-light); }
.kep-support-contacts i, .kep-support-addr i { color: #fff; width: 18px; }
.kep-support-addr { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-sm, 14px); color: #E4E6EA; padding-left: 24px; border-left: 1px solid rgba(255,255,255,.18); }

@media (max-width: 1100px) {
	.kep-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kep-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.kep-res-grid { grid-template-columns: 1fr; }
	.kep-support-grid { grid-template-columns: 1fr 1fr; }
	.kep-support-lead { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
	.kep-engage-grid { grid-template-columns: 1fr; gap: 28px; }
	.kep-engage-media { clip-path: none; }
	.kep-engage-media::before { display: none; }
}
@media (max-width: 640px) {
	.kep-quick-grid, .kep-mgrid { grid-template-columns: 1fr; }
	.kep-quick-grid { margin-top: -40px; }
	.kep-tiles { grid-template-columns: 1fr 1fr; }
	.kep-feats { grid-template-columns: 1fr 1fr; row-gap: 18px; }
	.kep-feats li + li { border-left: 0; }
	.kep-linklist { columns: 1; }
	.kep-noevent { grid-template-columns: 1fr; text-align: center; }
	.kep-noevent img { max-width: 220px; margin: 0 auto; }
	.kep-support-grid { grid-template-columns: 1fr; }
	.kep-support-addr { border-left: 0; padding-left: 0; }
}
.kep-page .ks-hero-inner { padding-bottom: 112px; }
/* open tenders */
.kep-tenders { padding: 48px 0 8px; scroll-margin-top: var(--ks-sticky-top, 120px); }
.kep-tenders-box { margin-top: 22px; border: 1px solid var(--ks-line); border-radius: 14px; padding: 24px; background: var(--ks-white); }
.kep-tenders-box .ks-block { margin: 0; }