/* ==========================================================================
   Careers page + job pages — loaded on those pages only (job pages also use .prose from stories.css).
   Layout modelled on the client's reference (firepitzgroup.com/career), in Sushi Hiro's style.
   ========================================================================== */

.careers-intro { background: #FFF8EE; padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem); }
.careers-intro__title { font-weight: 900; font-size: clamp(1.9rem, 3.8vw, 3.6rem); line-height: 1.1; letter-spacing: -.01em; text-align: center; }
.careers-intro__lead { max-width: 70ch; margin: 1.1rem auto 0; text-align: center; font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.65; }
.careers-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.6rem); max-width: 1080px; margin: clamp(2.5rem, 4.5vw, 3.5rem) auto 0; }
.careers-col { padding: clamp(1.4rem, 2.6vw, 2.2rem); background: var(--white); border-radius: clamp(22px, 2.6vw, 34px); }
.careers-col h3 { font-weight: 900; font-size: clamp(1.4rem, 2.1vw, 1.9rem); line-height: 1.15; }
.careers-col p { margin-top: .8rem; line-height: 1.7; }
.careers-col a { font-weight: 800; color: #a04f00; text-underline-offset: 3px; overflow-wrap: anywhere; }

.careers-values { background: var(--yellow); padding: clamp(3rem, 6vw, 5rem) 0; text-align: center; }
.careers-values__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: 1.05; }
.careers-values__lead { margin-top: .6rem; font-weight: 700; }
.careers-values__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; max-width: 1080px; margin: 1.8rem auto 0; }
.careers-values__list li { display: flex; align-items: center; gap: .6rem; padding: .45rem 1.1rem .45rem .45rem; font-weight: 800; background: var(--white); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 4px 0 var(--ink); }
.careers-values__list b { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; color: var(--white); background: var(--orange); border-radius: 50%; }

.careers-jobs { background: #FFF8EE; padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem); }
.job-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.9rem, 1.8vw, 1.4rem); max-width: 1080px; margin: clamp(2rem, 4vw, 3rem) auto 0; }
.job-card {
	display: flex; flex-direction: column; height: 100%; padding: 1.3rem 1.4rem 1.2rem; text-align: center; text-decoration: none;
	background: var(--white); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 6px 0 var(--ink);
	transition: translate .2s var(--ease-pop), box-shadow .2s;
}
.job-card:hover { translate: 0 -4px; box-shadow: 0 10px 0 var(--ink); }
.job-card__title { font-weight: 800; font-size: 1.2rem; line-height: 1.25; }
.job-card__meta { margin-top: .4rem; font-size: .85rem; font-weight: 700; color: #7a5a2e; }
.job-card__loc { display: flex; justify-content: center; align-items: center; gap: .35rem; margin-top: .8rem; font-weight: 700; }
.job-card__loc svg { flex: none; width: 1.1rem; fill: none; stroke: var(--ink); stroke-width: 2; }
.job-card__loc { text-wrap: balance; }
.job-card__openings { justify-self: center; align-self: center; margin-top: .6rem; padding: .25em .9em; font-size: .82rem; font-weight: 800; line-height: 1.35; background: #FFF1C9; border-radius: 12px; text-wrap: balance; }
.job-card__more { margin-top: auto; padding-top: 1rem; font-weight: 900; color: #a04f00; }
.careers-jobs__empty { max-width: 56ch; margin: 2rem auto 0; text-align: center; font-weight: 700; }
.careers-jobs__empty a { color: #a04f00; }

/* ---------- A job page ---------- */
.job { background: #FFF8EE; padding: calc(var(--header-h) + clamp(2rem, 4vw, 3.5rem)) 0 clamp(4rem, 8vw, 7rem); }
.job__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); grid-template-areas: "head head" "body side"; gap: 1.5rem clamp(2rem, 4vw, 3.5rem); max-width: 1120px; }
.job__head { grid-area: head; }
.job__title { margin-top: 1rem; font-weight: 900; font-size: clamp(1.9rem, 3.8vw, 3.2rem); line-height: 1.1; letter-spacing: -.01em; }
.job__meta { margin-top: .6rem; font-weight: 700; color: #7a5a2e; }
.job__body { grid-area: body; width: auto; margin: 0; }
.job__body h3 { margin-top: 1.6em; font-weight: 900; font-size: 1.25rem; color: #a04f00; }
.job__body h3:first-child { margin-top: 0; }
.job__side { grid-area: side; display: grid; gap: 1.2rem; align-content: start; position: sticky; top: calc(var(--header-h) + 1rem); }
.job-box { padding: 1.4rem 1.5rem; background: var(--white); border-radius: 22px; box-shadow: 0 10px 30px rgba(120, 70, 10, .1); }
.job-box__title { padding-bottom: .7rem; margin-bottom: 1rem; font-weight: 900; font-size: 1.2rem; border-bottom: 2px solid #f0e2cf; }
.job-box__list { display: grid; gap: .9rem; margin: 0; }
.job-box__list dt { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: .9rem; }
.job-box__list dt svg { width: 1.1rem; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.job-box__list dd { margin: .15rem 0 0 1.6rem; color: #6b5a45; }
.job-box--apply { border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink); }
.job-box--apply p { line-height: 1.55; }
.job-box--apply a:not(.btn) { font-weight: 800; color: #a04f00; overflow-wrap: anywhere; }
.job-box--apply .btn { margin-top: 1rem; }
.job-box__share { margin-top: 1rem; font-size: .88rem; }

@media (max-width: 1023px) {
	.job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.careers-cols { grid-template-columns: 1fr; }
	.job-grid { grid-template-columns: 1fr; }
	.job__inner { grid-template-columns: 1fr; grid-template-areas: "head" "side" "body"; }
	.job__side { position: static; }
}