/* Careers page. Top to bottom: yellow hero, legacy, perks, "who we are looking for",
   red apply band, employee stories, core values, employee resources + FAQs + EEO notice,
   and the four job-description popups. */

.page-careers {
  /* The careers page uses the larger of the site's two eyebrow sizes (25px against 22px). */
  --fs-eyebrow-lg: 25px;
}
@media (max-width: 1366px) { .page-careers { --fs-eyebrow-lg: 18px; } }
@media (max-width: 1200px) { .page-careers { --fs-eyebrow-lg: 17px; } }
@media (max-width: 1024px) { .page-careers { --fs-eyebrow-lg: 16px; } }
@media (max-width: 880px)  { .page-careers { --fs-eyebrow-lg: 15px; } }
@media (max-width: 767px)  { .page-careers { --fs-eyebrow-lg: 14px; } }

.careers-eyebrow-lg { font-size: var(--fs-eyebrow-lg); line-height: 31px; }
.careers-divider { width: 642px; padding: 13px 0 8px; }
/* Below 767 live's dividers are inline images on a 31px line box. */
@media (max-width: 767px) { .careers-divider { box-sizing: border-box; height: 31px; padding: 16px 0 9px; } }

/* ---------- hero ---------- */
.careers-hero {
  display: flex;
  min-height: 390px;
  background: url(/assets/img/MustardYellow-Background2.png) top left repeat;
}
.careers-hero-text {
  flex: 0 0 37.05%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 0 50px 5%;
}
.careers-hero-title { font-size: var(--fs-hero); line-height: var(--lh-hero); color: var(--white); margin-top: 5px; }
.careers-hero-photo { flex: 1 1 auto; min-width: 0; height: 390px; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; }
/* Live shows the photo at its natural 1000x475, centred in the column and clipped by the 390px band. */
.careers-hero-photo img { display: block; width: 1000px; max-width: 100%; height: auto; }

@media (max-width: 1366px) {
  .careers-hero { background-image: url(/assets/img/mustard-250px.png); min-height: 0; }
  /* Live's image widget keeps a 390px max-height at every width; the photo overflows it and
     the next section paints over the overflow, so between ~1300 and 1366 the band stays 390. */
  .careers-hero-photo { height: auto; max-height: 390px; }
}
@media (max-width: 1200px) {
  .careers-hero-photo { margin-right: 3%; display: flex; justify-content: flex-end; align-items: flex-end; }
}
@media (max-width: 1024px) {
  .careers-hero-text { flex-basis: 33.59%; }
}
@media (max-width: 880px) {
  .careers-hero { min-height: 250px; }
}
@media (max-width: 767px) {
  .careers-hero { flex-direction: column; align-items: center; justify-content: center; min-height: 0; }
  /* Live stacks the two columns, drops the text block 50px and then pulls the eyebrow and the
     title back up with negative margins, so the pair sits tight above the photo. */
  .careers-hero-text { flex: 0 0 auto; width: 100%; align-items: center; gap: 5px; margin-top: 50px; padding: 0 0 0 5%; }
  .careers-hero-text .careers-eyebrow-lg { margin-top: -30px; }
  .careers-hero-title { margin-top: -10px; }
  .careers-hero-photo { width: 100%; margin-right: 0; justify-content: center; }
}


/* Above 1900 live switches to its desktop hero: a fixed-height band, the heading indented 13%,
   and above 1920 the columns stay 1920 wide and centred. */
@media (min-width: 1901px) {
  .careers-hero { min-height: 440px; padding-inline: max(0px, calc((100% - 1920px) / 2)); }
  .careers-hero-text { flex-basis: 39.17%; padding-left: 13%; }
}

/* ---------- "be part of the Alamo Cafe legacy" ---------- */
.careers-legacy {
  min-height: 565px; background: var(--white);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px;
  text-align: center;
}
.careers-legacy .eyebrow { line-height: 1; }
/* Live's text widget is 14.4px taller than its paragraph; the block is centred, so this keeps the 7px offset. */
.careers-legacy-copy { width: 1000px; max-width: 100%; margin: 0 0 14.4px; font: 300 var(--fs-body) / var(--lh-body) var(--font-serif); }
@media (max-width: 767px) {
  .careers-legacy { padding: 34px 10px 0; }
  .careers-legacy .eyebrow { margin-top: 10px; }
  /* Live left-aligns the heading on mobile while the rest of the block stays centred. */
  .careers-legacy .h2 { align-self: stretch; text-align: left; }
}

/* ---------- good people deserve great perks ---------- */
.careers-perks {
  min-height: 1350px; padding-top: 50px;
  background: url(/assets/img/Background_yellowWhiteStatic1.jpg) top left repeat;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px;
}
.careers-perks-title { display: block; width: 566px; max-width: 100%; height: auto; transform: translateY(-65px); }
.careers-perks-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px;
  width: min(1400px, 100%);
}
.careers-perks-col { display: flex; flex-direction: column; gap: 20px; }
/* Live: the icon column shrinks against a full-width text column, so a 57px icon renders at 51px. */
.careers-perk { display: flex; gap: 20px; }
.careers-perk-icon { flex: 0 1 auto; min-width: 0; height: auto; align-self: flex-start; }
.careers-perk-body { flex: 0 1 100%; min-width: 0; padding: 10px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.careers-perk-body .h3 { line-height: 1; }
.careers-perk-list { font: 900 20px / 31px var(--font-serif); letter-spacing: .2px; color: var(--navy); }
.careers-perk-list li { display: flex; align-items: flex-start; }
/* The live icon is a 25px Font Awesome glyph in a 1.25em box, so the caret sits flush left. */
.careers-perk-list .icon { flex: 0 0 auto; width: 9.375px; height: 25px; margin: 6px 21.875px 0 0; color: var(--red); }
.careers-perk-list span { padding-left: 5px; }
.careers-perk-list-wide { width: 465px; max-width: 100%; }
.careers-perk-list-wide li { padding-bottom: 10px; }
.careers-perk-list-wide li:last-child { padding-bottom: 0; }
.careers-perk-list-wide li + li { margin-top: 10px; }
.careers-perk-list-wide .icon { margin-top: 4px; }
.careers-perks-cta { margin: 0; }

/* Between 1025 and 1366 live's perks band is only 95% wide (left-aligned; the body's cream
   shows in the strip on the right), and everything inside centres on that narrower box. */
@media (min-width: 1025px) and (max-width: 1366px) { .careers-perks { width: 95%; } }
@media (max-width: 1366px) {
  .careers-perks-grid { width: 95%; margin: 1% 0 0 1%; }
  .careers-perks-col { padding: 1px; }
}
@media (max-width: 1024px) {
  .careers-perks-grid { grid-template-columns: minmax(0, 1fr); width: 100%; }
}
@media (max-width: 767px) {
  .careers-perks { padding: 70px 10px 0; }
  /* Live's blocks keep a 1% left offset and overhang the container instead of re-centring. */
  .careers-perks-title { margin-left: 1%; }
  .careers-perks-grid { align-self: flex-start; width: 100%; margin: 1% 0 0 1%; }
  /* Live drops the icon onto its own centred line and gives the copy the full column. */
  .careers-perk { flex-direction: column; align-items: center; gap: 20px; }
  .careers-perk-icon { flex: none; align-self: center; }
  .careers-perk-body { width: 100%; }
  .careers-perk-list-wide { width: 100%; }
  .careers-perks-cta { padding-bottom: 15px; }
}

/* ---------- who we are looking for ---------- */
.careers-looking {
  min-height: 990px;
  background: url(/assets/img/Background-blue.jpg) top left repeat;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
  align-content: center; padding: 0 10%;
}
.careers-looking-photo {
  width: 98%;
  background: url(/assets/img/alamo-cafe-server.jpg) center center / cover no-repeat;
}
/* Live indents the text block 40px but lets it keep its full column width, so it runs 20px wider. */
.careers-looking-text { width: calc(100% - 20px); margin-left: 30px; color: var(--white); }
.careers-looking-text .eyebrow { display: block; padding-bottom: 12px; }
.careers-looking-divider { display: block; width: 602px; max-width: 100%; height: auto; margin: 34px 0 27px; }
.careers-looking-copy {
  width: 95%; margin: 0 0 25px;
  font: 300 var(--fs-body) / var(--lh-body) var(--font-serif); color: var(--white);
}
.careers-looking-lead { margin: 0; font: 800 var(--fs-body) / var(--lh-body) var(--font-serif); color: var(--white); }
.careers-looking-list { font: 500 20px / 31px var(--font-serif); color: var(--white); }
.careers-looking-list li { display: flex; align-items: flex-start; padding-bottom: 3px; }
.careers-looking-list li:last-child { padding-bottom: 0; }
.careers-looking-list li + li { margin-top: 3px; }
/* 19px Font Awesome glyph in a 1.25em box, flush left like live. */
.careers-looking-list .icon { flex: 0 0 auto; width: 7.125px; height: 19px; margin: 6px 16.625px 0 0; color: var(--red); }
.careers-looking-list span { padding-left: 5px; }

/* Between 1201 and 1366 live's inner grid goes full width with no gap: the photo fills
   half the band and the text column gets a 35px top / 15px side inset. */
@media (min-width: 1201px) and (max-width: 1366px) {
  .careers-looking { padding: 0; gap: 0; }
  .careers-looking-photo { width: 100%; }
  .careers-looking-text { width: auto; margin: 0; padding: 35px 15px 0; }
  /* live's rule widget is 71px tall here, one more than the desktop spacing gives */
  .careers-looking-divider { margin-bottom: 28px; }
}
@media (max-width: 1366px) {
  /* Below 1366 live narrows the copy and the white rule under the heading. */
  .careers-looking-copy { width: 510px; max-width: 100%; }
  .careers-looking-divider { width: 490px; }
}
@media (max-width: 1200px) {
  .careers-looking { min-height: 0; padding: 0; gap: 0; }
  /* The rule sits on a 31px line box with 5px of padding either side. */
  .careers-looking-divider { margin: 19px 0 14px; }
  .careers-looking-text {
    width: 500px; max-width: 100%; margin: 0 auto; padding: 35px 15px 0;
    display: flex; flex-direction: column; align-items: center;
  }
  .careers-looking-text .h2 { text-align: center; }
}
@media (max-width: 1024px) {
  /* One column, and the photo row matches the text row exactly as the live grid does. */
  .careers-looking {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, 1fr);
    background-image: url(/assets/img/Background-blue_resized.jpg);
  }
  .careers-looking-photo { width: 100%; background-position: top center; }
  .careers-looking-text { width: 100%; padding: 35px 15px 0; }
}
@media (max-width: 767px) {
  .careers-looking { justify-items: center; }
  /* The live text block is 90% wide but sits 1% of that further right, overhanging its column. */
  .careers-looking-text { width: 90%; margin: 0 auto 0 5.9%; padding: 0; }
  .careers-looking-copy { width: 100%; }
  .careers-looking-divider { margin: 20px 0 15px; }
}

/* ---------- apply now band ---------- */
.careers-apply {
  min-height: 375px; background: var(--red);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px;
  text-align: center;
}
.careers-apply .eyebrow { margin: 0 0 14.4px; }
.careers-apply-cta { margin: 0; }
.careers-btn-white { background: var(--white); color: var(--red); }
.careers-btn-white:hover { background: #f2f2f2; }
@media (max-width: 1200px) { .careers-apply { min-height: 22vh; } .careers-apply-cta { padding-bottom: 15px; } }
@media (max-width: 880px)  { .careers-apply { min-height: 32vh; } }
@media (max-width: 767px)  {
  .careers-apply { min-height: 37vh; padding: 2%; }
  .careers-apply .eyebrow { text-align: left; }
  .careers-apply-cta { padding-bottom: 15px; }
}

/* ---------- employee stories ---------- */
/* Live's 775px floor sits on the video column, not the section, so the 22px padding
   live adds at 1366 and below grows the band to 819. */
.careers-stories {
  min-height: 400px; background: var(--white);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
}
.careers-stories-video { min-height: 775px; display: flex; align-items: center; }
@media (max-width: 1366px) { .careers-stories { padding: 22px; } }
.careers-stories-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; background: #000; }
.careers-stories-text {
  padding: 10px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px;
  text-align: center;
}
.careers-stories-text .eyebrow { line-height: 1; }
/* Live's text widget is left-aligned at every width; it only looks centred where it fits one line. */
.careers-stories-lead { margin: 0 0 14.4px; font: 300 var(--fs-body) / var(--lh-body) var(--font-serif); text-align: left; }
.careers-quote { width: 850px; max-width: 100%; margin: 0 0 14.4px; }
.careers-quote p { margin: 0; font: 500 italic 36px / 55px 'Baskervville', var(--font-serif); }
.careers-quote-mark { color: var(--red); }
.careers-quote-attr { margin: 0 0 14.4px; font: 400 var(--fs-h4) / var(--lh-body) var(--font-display); color: var(--red); }
@media (max-width: 1024px) {
  .careers-stories { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .careers-stories-video { min-height: 0; }
}
@media (max-width: 767px) {
  .careers-stories-video { min-height: 38vh; }
  .careers-stories-lead { text-align: left; }
}

/* ---------- core values ---------- */
.careers-values {
  min-height: 975px;
  background: url(/assets/img/Background_yellowWhiteStatic1.jpg) top left repeat;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px;
}
.careers-values-head {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding-bottom: 35px; text-align: center;
}
.careers-values-head .eyebrow { line-height: 1; }
.careers-values-lead { margin: 0 0 14.4px; font: 300 29px / 31px var(--font-serif); }
/* Live: a 1450px grid indented 200px from the left, so the pair of columns sits off-centre.
   It is never capped to the viewport: between 1367 and 1450 it overflows the band. */
.careers-values-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
  width: 1450px; margin-left: 200px; padding: 10px;
}
.careers-values-col { display: flex; flex-direction: column; gap: 20px; }
.careers-value { display: flex; gap: 20px; }
/* Same shrinking icon column as the perks list: a 39px icon renders at 36px. */
.careers-value-icon { flex: 0 1 auto; min-width: 0; height: auto; align-self: flex-start; }
.careers-value > div { flex: 0 1 100%; min-width: 0; padding: 10px; }
.careers-value h3 { line-height: 1; }
.careers-value p { margin: 0 0 14.4px; font: 400 var(--fs-h4) / var(--lh-body) var(--font-display); color: var(--navy); }
@media (max-width: 1366px) {
  /* The heading block loses its 35px tail at 1366; the grid follows straight after the rule. */
  .careers-values-head { padding-bottom: 0; }
  .careers-values-grid { width: 95%; margin: 0 1%; padding: 10px; }
}
@media (max-width: 767px) {
  .careers-values { padding: 0 10px; }
  .careers-values-head { align-self: flex-start; width: 100%; margin-left: 1%; padding-bottom: 0; }
  .careers-values-lead { align-self: stretch; text-align: left; }
  .careers-values-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; align-self: flex-start; width: 100%; margin: 0 0 0 1%; padding: 10px; }
  /* Mobile stacks each value: icon centred on its own line, copy left-aligned underneath. */
  .careers-value { flex-direction: column; align-items: center; gap: 20px; }
  .careers-value-icon { align-self: center; }
  .careers-value > div { width: 100%; padding: 10px; }
}

/* ---------- employee resources, FAQs, EEO ---------- */
.careers-resources {
  min-height: 1440px; background: var(--white);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px;
}
.careers-resources-head {
  width: 100%; min-height: 362px; margin-top: 25px; padding: 10px;
  display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; gap: 20px;
  text-align: center;
}
.careers-resources-head .eyebrow { line-height: 1; }
.careers-resources-buttons {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 75px; padding: 25px;
}
/* Live's divider is an inline image on a 31px line box, so the strip keeps that height
   even when the image itself scales down below 1856px. */
.careers-dots-line { width: 100%; margin: 0; line-height: 31px; text-align: center; }
.careers-dots { width: 75%; height: auto; vertical-align: baseline; }
/* Live's small button is a plain padded link: the label hangs off the 18px top padding, not centred. */
.careers-btn-sm {
  width: 265px; height: 50px; padding: 18px 5px 0; font-size: 16px; border-radius: 7px;
  align-items: flex-start;
}

.careers-faqs {
  width: 80%; margin-top: 30px; padding: 10px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.careers-faqs .eyebrow { padding: 0 2px 2px; line-height: 1; }
.careers-faqs .h2 { margin-top: 10px; }
.careers-faq-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 100px;
  width: 100%; padding: 40px 10px;
}
.careers-faq-col { text-align: left; }
.careers-faq {
  margin-bottom: 30px; border: 2px solid var(--navy); border-radius: 6px;
  background: #F3F3F3;
}
.careers-faq[open] { border-color: var(--red); }
.careers-faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 40px 25px; cursor: pointer; list-style: none;
  font: 700 30px / 30px var(--font-serif); letter-spacing: 1px; color: var(--navy);
}
.careers-faq summary::-webkit-details-marker { display: none; }
/* Live gives the right-hand column a tighter 25px title padding than the left-hand one. */
.careers-faq-col:nth-child(2) .careers-faq summary { padding: 25px; }
.careers-faq summary .icon { flex: 0 0 auto; width: 30px; height: 30px; color: var(--red); transition: transform .3s; }
.careers-faq[open] summary .icon { transform: rotate(180deg); }
.careers-faq-body { padding: 0 14px 45px 27px; color: #333; font: 300 var(--fs-body) / var(--lh-body) var(--font-serif); }
.careers-faq-body p { margin: 0 0 1em; }
.careers-faq-body p:last-child { margin-bottom: 0; }
.careers-role-links a { display: inline-block; margin-right: 14px; color: var(--red); }

.careers-eeo-title { margin-top: 35px; line-height: 1; }
.careers-eeo-copy {
  width: 83%; max-width: 100%; margin: 0 0 14.4px;
  font: 300 var(--fs-body) / var(--lh-body) var(--font-serif);
}
.careers-eeo-phone { color: var(--red); font-weight: 700; text-decoration: underline; }

@media (max-width: 1366px) {
  .careers-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .careers-faq summary { font-size: 18px; }
}
@media (max-width: 1200px) { .careers-faq summary { font-size: 17px; } }
@media (max-width: 1024px) { .careers-faq summary { font-size: 16px; } }
@media (max-width: 880px)  {
  .careers-faq summary { font-size: 15px; }
  .careers-eeo-copy { width: 95%; }
}
@media (max-width: 767px) {
  /* Live left-aligns the running text of these blocks on mobile; the buttons and the
     dotted rules stay centred. */
  .careers-resources-head { text-align: left; }
  .careers-faqs { width: 100%; }
  /* Live's accordion title sits on a 14px line box next to a 30px caret, so a two-line
     question still leaves the row 30px tall. */
  .careers-faq summary { font-size: 14px; line-height: 14px; gap: 0; }
  /* Live keeps the roomier 40px title padding in the left-hand accordion on mobile. */
  .careers-faq-col:nth-child(1) .careers-faq summary { padding: 40px 25px; }
}

/* ---------- job-description popups ---------- */
.careers-popup { align-items: flex-start; }
.careers-popup .popup-box { width: 640px; max-width: 90%; margin: 100px 0 40px; }
.careers-popup .popup-content { font: 400 16px / 1.5 var(--font-sans); }
.careers-popup .popup-content ul { list-style: disc; margin: 0 0 1em; padding-left: 30px; }
.careers-popup .popup-content li { margin-bottom: .5em; }
@media (max-width: 767px) { .careers-popup .popup-box { margin-top: 60px; } }

/* ---------- four-photo strip above the footer ---------- */
.careers-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 1px; }
.careers-strip img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; margin: 0 auto; }
/* Live shrinks the strip to fixed-size thumbnails between 880 and 1366. */
@media (max-width: 1366px) { .careers-strip img { width: 300px; } }
@media (max-width: 1200px) { .careers-strip img { width: 230px; } }
@media (max-width: 880px) { .careers-strip { grid-template-columns: repeat(2, 1fr); } .careers-strip img { width: 100%; } }
@media (max-width: 767px) { .careers-strip { grid-template-columns: 1fr; } }