/* ==========================================================================
   Career - Footer widget  ·  custom-career-footer — its own stylesheet
   The corporate footer's design (components/footer.html / .sfoot) drawn under
   career-footer's own class names, so a change to one footer never reaches
   the other; then, below, what the careers footer sets apart.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Root
   -------------------------------------------------------------------------- */

.custom-career-footer {
	background: var(--navy, #16418C);
	color: rgba(255, 255, 255, 0.78);
	font-family: inherit;
}

/* --------------------------------------------------------------------------
   Inner wrapper — horizontal padding via Elementor responsive control.
   Sections own their vertical padding; no top/bottom here.
   -------------------------------------------------------------------------- */

.custom-career-footer__inner {
	/* padding written by Elementor */
}

/* --------------------------------------------------------------------------
   Band 1 — brand + policy links  (.sfoot__grid)
   grid: 1.55fr 1fr 1fr 1fr  (brand col 1 · policy grid-column 2/-1)
   -------------------------------------------------------------------------- */

.custom-career-footer__top {
	display: grid;
	grid-template-columns: 1.55fr 1fr 1fr 1fr;
	gap: clamp(18px, calc(2.2 * var(--vwu, 14.4px)), 34px)
	     clamp(24px, calc(2.8 * var(--vwu, 14.4px)), 48px);
	align-items: start;
	padding-block: min(clamp(26px, calc(2.6 * var(--vwu, 14.4px)), 46px), calc(4.6 * var(--vhu, 9px)))
	               min(clamp(10px, calc(1 * var(--vwu, 14.4px)), 16px), calc(1.8 * var(--vhu, 9px)));
}

/* -- brand column -------------------------------------------------------- */

.custom-career-footer__brand {
	/* grid column 1 — no extra style needed */
}

.custom-career-footer__logo {
	display: inline-block;
	margin-bottom: 18px;
}

/* height-driven so width is always proportional */
.custom-career-footer__logo-img {
	display: block;
	height: clamp(58px, calc(5.2 * var(--vwu, 14.4px)), 76px);
	width: auto;
}

.custom-career-footer__org {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
	color: #fff;
}

.custom-career-footer__addr {
	margin: 0;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.7);
}

/* -- policy links column ------------------------------------------------- */

.custom-career-footer__policy {
	grid-column: 2 / -1;
}

.custom-career-footer__policy ul {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 3;
	column-gap: clamp(24px, calc(2.8 * var(--vwu, 14.4px)), 48px);
}

.custom-career-footer__policy li {
	break-inside: avoid;
	margin-bottom: 11px;
}

.custom-career-footer__policy a,
.custom-career-footer__policy span {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color 0.2s;
}

.custom-career-footer__policy a:hover {
	color: #fff;
}

/* --------------------------------------------------------------------------
   Band 2 — "ติดตามเราได้ที่" + contact strip  (.sfoot__mid)
   Same 4-column grid: follow col 1 · strip grid-column 2/-1 (3 × 1fr)
   -------------------------------------------------------------------------- */

.custom-career-footer__mid {
	display: grid;
	grid-template-columns: 1.55fr 1fr 1fr 1fr;
	gap: clamp(16px, calc(2 * var(--vwu, 14.4px)), 30px)
	     clamp(24px, calc(2.8 * var(--vwu, 14.4px)), 48px);
	align-items: center;
	padding-block: min(clamp(14px, calc(1.5 * var(--vwu, 14.4px)), 20px), calc(2.4 * var(--vhu, 9px)));
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* -- social follow ------------------------------------------------------- */

.custom-career-footer__follow {
	/* grid column 1 */
}

.custom-career-footer__follow-lbl {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.62);
}

.custom-career-footer__social {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.custom-career-footer__social a {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
	text-decoration: none;
	transition: background 0.25s var(--ease, cubic-bezier(.2,.8,.2,1)),
	            border-color 0.25s var(--ease, cubic-bezier(.2,.8,.2,1)),
	            transform 0.25s var(--ease, cubic-bezier(.2,.8,.2,1));
}

.custom-career-footer__social a:hover {
	background: var(--cp-blue, #50A3D5);
	border-color: var(--cp-blue, #50A3D5);
	transform: translateY(-3px);
}

/* -- contact strip ------------------------------------------------------- */

.custom-career-footer__strip {
	grid-column: 2 / -1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(12px, calc(1.6 * var(--vwu, 14.4px)), 26px);
}

.custom-career-footer__cell {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 2px 0;
	text-decoration: none;
	color: inherit;
}

.custom-career-footer__cell-ico {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.78);
	transition: transform 0.3s var(--ease, cubic-bezier(.2,.8,.2,1));
}

.custom-career-footer__cell-ico svg {
	width: 32px;
	height: 32px;
}

.custom-career-footer__cell:hover .custom-career-footer__cell-ico {
	transform: scale(1.08);
}

.custom-career-footer__cell-body {
	display: grid;
	gap: 2px;
}

.custom-career-footer__cell-body small {
	display: block;
	font-size: 12px;
	font-weight: 300;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.62);
}

.custom-career-footer__cell-body b {
	display: block;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.2px;
	color: #fff;
	transition: color 0.2s;
}

.custom-career-footer__cell:hover .custom-career-footer__cell-body b {
	color: var(--cp-blue, #50A3D5);
}

/* --------------------------------------------------------------------------
   Band 3 — copyright  (.sfoot__legal)
   -------------------------------------------------------------------------- */

.custom-career-footer__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px clamp(20px, calc(2.4 * var(--vwu, 14.4px)), 40px);
	flex-wrap: wrap;
	padding: 12px 0 15px;
	border-top: 1px solid rgba(255, 255, 255, 0.13);
	font-size: 12px;
	font-weight: 300;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.5);
}

.custom-career-footer__legal > span {
	flex: 0 1 auto;
}

/* --------------------------------------------------------------------------
   ≤ 1200px — 2-column (brand full-width · policy + strip span all cols)
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.custom-career-footer__top,
	.custom-career-footer__mid {
		grid-template-columns: 1fr 1fr;
	}

	.custom-career-footer__brand {
		grid-column: span 2;
	}

	.custom-career-footer__policy,
	.custom-career-footer__strip {
		grid-column: 1 / -1;
	}

	.custom-career-footer__policy ul {
		columns: 2;
	}
}

/* --------------------------------------------------------------------------
   ≤ 1024px — mid single column, strip stacks vertically
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.custom-career-footer__mid {
		grid-template-columns: 1fr;
	}

	.custom-career-footer__strip {
		grid-column: 1 / -1;
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.custom-career-footer__cell {
		padding: 10px 0;
	}
}

/* --------------------------------------------------------------------------
   ≤ 640px — single column everything
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
	.custom-career-footer__top {
		grid-template-columns: 1fr;
	}

	.custom-career-footer__brand {
		grid-column: auto;
	}

	.custom-career-footer__policy {
		grid-column: auto;
	}

	.custom-career-footer__policy ul {
		columns: 1;
	}

	.custom-career-footer__legal {
		justify-content: flex-start;
	}
}

/*
 * Career - Footer.
 *
 * Read from cp-all-designer css/app.css:2760-2900. Scoped by Elementor's wrapper,
 * .elementor-widget-career-footer, as heavily as the rules above.
 *
 * The sheet above works its spaces out from --vwu at the desktop's
 * 14.4px on every width. The design steps --vwu down to 9.2px at 1024 and
 * 4.2px at 390 (app.css:2993-2995), so a tablet and a phone are given the
 * spaces those figures make, each rounded up to an even pixel.
 */

/* app.css:167-174, 2861 — each link's row stands on the page's 16px at 1.6,
   whatever line the theme gives the page */
.elementor-widget-career-footer .custom-career-footer__policy li {
	font-size: 16px;
	line-height: 1.6;
}

@media (max-width: 1024px) {
	/* app.css:2816-2823 — 2.2 and 2.8 --vwu between the parts, 26 above, 10 below */
	.elementor-widget-career-footer .custom-career-footer__top {
		gap: 22px 26px;                    /* 20.24 and 25.76 */
		padding-block: 26px 10px;
	}
	/* app.css:2775-2780 — 14 above and below the channels */
	.elementor-widget-career-footer .custom-career-footer__mid {
		gap: 18px 26px;
		padding-block: 14px;
	}
	/* app.css:2858 */
	.elementor-widget-career-footer .custom-career-footer__policy ul {
		column-gap: 26px;                  /* 25.76 */
	}
}

@media (max-width: 767px) {
	.elementor-widget-career-footer .custom-career-footer__top {
		gap: 18px 24px;
	}
	.elementor-widget-career-footer .custom-career-footer__mid {
		gap: 16px 24px;
	}
	.elementor-widget-career-footer .custom-career-footer__policy ul {
		column-gap: 24px;
	}
}