/* Homepage. Sections top to bottom: hero, welcome (cream then blue), merch, careers. */

/* ---------- hero ---------- */
.hero {
  min-height: 864px;
  /* Anchored top-left like live, so the same slice of the photo shows; centered at <=1024 (see below). */
  background: url(/assets/img/HERO-Image.jpg) left top / cover no-repeat;
  padding: 88px 0 0 160px;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
}
.hero-card {
  width: 865px; max-width: 100%; min-height: 540px;
  background: var(--yellow); border-radius: 60px; padding: 10px;
  display: flex; justify-content: center; align-items: center;
}
.hero-card-inner {
  width: 94%; min-height: 469px; padding: 1px 60px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px;
}
.hero-eyebrow {
  margin: 0; font: 700 27px / 31px var(--font-serif); text-transform: uppercase; letter-spacing: 4.2px; color: var(--navy);
}
.hero-title { font-size: var(--fs-hero); line-height: var(--lh-hero); color: var(--white); }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 10px; }
.hero-chips { display: block; position: relative; z-index: 2; margin: -84px auto -45px; }

/* Live's chips sit inside the hero, 20px under the card: here they follow the
   section, so the hero reserves 20px + the 129px image as bottom padding and the
   chips pull themselves back up by their own height. The +8px nudge is live's
   -20px translate plus the 27.5px it gains from being centred in the padded box. */
@media (max-width: 1366px) {
  .hero { min-height: 596px; padding: 0 0 149px 55px; justify-content: center; }
  .hero-card { width: 694px; min-height: 451px; justify-content: flex-start; align-items: flex-start; transform: translateY(30px); padding: 0; }
  .hero-card-inner { width: 700px; flex-shrink: 0; padding: 9px 9px 9px 25px; } /* live: 700px inside the 694px card */
  .hero-eyebrow { font-size: 20px; }
  .hero-chips { margin: -129px auto 0; transform: translate(8px, 45px); }
}
@media (max-width: 1200px) {
  .hero { padding-bottom: 179px; } /* live: the chips get a 30px top margin too */
  .hero-card { width: 600px; min-height: 0; padding: 4px; }
  .hero-card-inner { width: 550px; min-height: 409px; padding: 13px 13px 13px 35px; gap: 1px; }
  .hero-eyebrow { font-size: 19px; }
  .hero-buttons { margin-top: 20px; }
  .hero-chips { transform: translate(8px, 7px); }
}
@media (max-width: 1024px) {
  .hero { background-position: center center; }
  .hero { padding: 37px 0 0 55px; justify-content: flex-start; }
  .hero-card-inner { flex-shrink: 1; }
  .hero-card { width: 500px; transform: none; }
  .hero-card-inner { min-height: 328px; padding: 0 0 0 12px; gap: 0; width: 100%; }
  .hero-eyebrow { font-size: 18px; }
  .hero-title { max-width: 500px; }
  .hero-buttons { margin-top: 10px; }
  .hero-chips { margin: -129px auto 0; transform: translateX(8px); }
}
@media (max-width: 880px) {
  .hero-card { min-height: 235px; }
  .hero-card-inner { min-height: 290px; padding: 16px; }
  .hero-eyebrow { font-size: 17px; }
}
@media (max-width: 767px) {
  .hero { padding: 72px 15px 15px; } /* live centres the card: 107px less half the second button's 70px */
  .hero-card { width: 100%; }
  .hero-card-inner { min-height: 134px; }
  .hero-eyebrow { font-size: 16px; }
  .hero-buttons { flex-direction: column; align-self: center; align-items: center; gap: 0; }
  .hero-buttons .btn { margin: 4px; }
  .hero-buttons .btn:first-child { margin: 3px; } /* live: 3px padding on the first widget, 10px margin + 4px on the second */
  .hero-buttons .btn + .btn { margin-top: 14px; }
  .hero-chips { margin: -91px auto -38px; transform: none; } /* live: 20px under the card, translated 80px */
}

/* ---------- welcome: cream band on top, blue underneath ---------- */
.welcome {
  position: relative; z-index: 1; overflow: hidden;
  min-height: 2585px; padding-top: 57px; /* live pins the content 57px below the section top */
  display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 75px;
  --cream-band: 1165px;
  background: url(/assets/img/Background-blue.jpg) center / cover no-repeat;
}
.welcome::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--cream-band);
  background: url(/assets/img/Background.jpg) top left repeat; z-index: -1;
}
.welcome-grid {
  display: grid; grid-template-columns: minmax(0, 777px) minmax(0, 1fr);
  width: 1555px; margin: 28px 0 50px 77px;
}
/* Above 1366 live's content column is a fixed 1920px, centred: this grid (81% of it,
   nudged 77px right) and the 3-card row (80%, nudged 30px left) keep their size and
   overhang the viewport evenly on narrower screens. */
.welcome-text { padding: 20px 0 0 35px; }
.welcome-text .h2 { margin-top: 10px; }
.welcome-text .divider { padding: 43px 0 38px; } /* Elementor's 30px padding plus the inline image's line box */
.welcome-copy { display: flow-root; width: 94%; font: 400 22px / 31px var(--font-serif); color: var(--body-text); }
.welcome-copy p { margin: 0 0 25px; }
.welcome-text .btn { margin-top: 28px; font-size: 18px; }
.welcome-photo { padding: 10px; text-align: end; line-height: 0; }
.welcome-photo img { width: 660px; max-width: 100%; height: 709px; margin-right: -25px; }
@media (max-width: 1720px) {
  /* live's image widget narrows to 600px here and right-aligns the image with a -25px margin */
  .welcome-photo { padding: 10px 10px 10px 103px; text-align: start; }
  .welcome-photo img { width: 531px; margin-right: 0; }
}

.cards { display: grid; }
.cards-3 { grid-template-columns: repeat(3, 1fr); width: 1536px; padding: 10px; margin-left: -30px; }
.cards-2 { grid-template-columns: repeat(2, 1fr); width: min(960px, 100%); gap: 20px; margin-top: -25px; }
.card { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 0; }
.card > h2 { line-height: 1; }
.card > img { width: auto; max-width: 100%; height: auto; border-radius: 20px; margin-bottom: 30px; } /* natural size: 434, 450 and 431px wide on live */
.card > .card-img-hh { width: 434px; height: 412px; } /* live squashes the square photo to 434x412 */
.card > p { width: 377px; max-width: 100%; margin: 0 0 14.4px; text-align: center; font: 300 20px / 31px var(--font-serif); color: var(--white); }
.card > .arrow-link { margin: 13px 0 8px; gap: 20px; }
.cards-2 .card:last-child > p { width: 382px; } /* live gives the happy hour copy 5px more */
.card-rule { display: none; width: 100%; border: 0; border-top: 1px solid var(--white); margin: 15px 0; }

/* 1201-1366: live fixes the content column at 1366px (centred, so at 1280 it
   overhangs both sides equally) and the section at 1350px cream + 1500px blue;
   the cards overflow that and are clipped (the happy hour copy is cut off). The
   blue texture is sized to cover its own 1500px band, not the whole section. */
@media (max-width: 1366px) {
  .welcome {
    --cream-band: 1350px; height: 2850px; min-height: 0; padding: 0;
    background-position: center bottom; background-size: auto calc(100% - var(--cream-band));
  }
  .welcome-grid { grid-template-columns: 1fr; grid-template-rows: repeat(2, 1fr); margin: 50px 0; width: calc(0.71 * 1366px); }
  .welcome-text .btn { align-self: center; }
  .welcome-text { display: flex; flex-direction: column; align-items: flex-start; }
  .welcome-photo { text-align: center; padding: 36px 0 0; } /* Elementor's 10px container padding + 26px */
  .welcome-photo img { width: 600px; max-width: 100%; height: auto; } /* the image's 600px width attribute */
  .cards-3 { margin: 0; width: calc(0.9 * 1366px); }
  .cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); width: calc(0.5 * 1366px); }
  .card > img { width: 275px; }
  .cards-2 .card > p, .cards-2 .card:last-child > p { width: 100%; }
  .card > .card-img-hh { max-width: none; align-self: flex-start; } /* live keeps it 434px and lets it overhang its 332px column to the right */
}
@media (max-width: 1200px) {
  .welcome { --cream-band: 1250px; height: auto; padding: 60px 0; background-position: center; background-size: cover; }
  .welcome-grid { grid-template-rows: none; margin: 0; width: 80%; }
  .welcome-photo { padding-top: 60px; margin-bottom: 150px; }
  .welcome-photo img { width: 100%; }
  .cards-3 { grid-template-columns: 1fr; margin-top: -146px; width: 90%; }
  .cards-2 { grid-template-columns: 1fr; justify-items: center; width: 78%; }
  .card > img { width: 250px; height: auto; }
  .card > .card-img-hh { width: 250px; height: 240px; max-width: 100%; align-self: auto; }
  .card > p, .cards-2 .card:last-child > p { width: 100%; padding: 0; }
  .card-rule { display: block; }
}
@media (max-width: 1024px) {
  .welcome { height: 4450px; min-height: 0; padding: 0; --cream-band: 1250px; }
  .welcome-grid { width: 80%; margin: 0; }
  .welcome-photo { padding-top: 50px; }
  .welcome-photo img { width: 390px; }
  .cards-3 { margin: -130px 0 0; width: 90%; }
  .cards-3 .card:nth-child(2) .card-rule { margin-top: -5px; }
  .cards-2 { width: 785px; }
  .cards-2 .card:nth-child(1) > .arrow-link { margin-top: 12px; }
  .cards-2 .card:nth-child(1) .card-rule { margin-top: 17px; }
  .cards-2 .card:nth-child(2) > .arrow-link { margin: 11px 0 21px; }
}
@media (max-width: 880px) {
  .welcome { --cream-band: 1330px; }
  .welcome-photo img { width: 421px; max-width: 100%; }
  .cards-3 { margin-top: -70px; }
}
@media (max-width: 767px) {
  .welcome { --cream-band: 1400px; padding: 55px 5px 5px; }
  .welcome-grid { width: 100%; }
  .welcome-text { padding: 10px; align-items: center; }
  .welcome-text .divider { padding: 21px 5px 15px; }
  .welcome-text .btn { margin: 33px 4px 5px 15px; }
  .welcome-photo { padding: 0; }
  .welcome-photo img { width: 85vw; }
  .welcome { height: 4350px; min-height: 0; overflow: visible; } /* live: fixed height, the cards overflow into the merch block */
  .card > img { margin-bottom: 0; }
  .cards-3 { margin: -176px 0 0; width: 100%; }
  .cards-3 .card:nth-child(3) { padding-top: 8px; }
  .cards-2 { width: 100%; margin-top: 0; }
  .cards-2 .card:first-child { margin-top: -21px; }
  /* Per-card link and rule spacing, measured on live at 390: rows 1 and 2
     keep their divider inside the card, the others have it as a sibling
     with no gap around it. */
  .card > .arrow-link { margin: 1px 0 8px; }
  .card-rule { margin: 15px 0; }
  .cards-3 .card:nth-child(2) > .arrow-link { margin: -5px 0 8px; }
  .cards-3 .card:nth-child(1) .card-rule { margin: 21px 0 15px; }
  .cards-3 .card:nth-child(2) .card-rule { margin: -9px 0 15px; }
  .cards-3 .card:nth-child(3) > .arrow-link { margin: 10px 0 10px; }
  .cards-2 .card:nth-child(1) > .arrow-link { margin: 14px 0 20px; }
  .cards-2 .card:nth-child(1) .card-rule { margin: 1px 0 15px; }
  .cards-2 .card:nth-child(2) > .arrow-link { margin: 12px 0 9px; }
  .photo-strip { grid-template-columns: 25% 1fr 1fr 1fr; }
}

/* ---------- merch ---------- */
.merch {
  min-height: 510px; background: url(/assets/img/Background.jpg) top left repeat;
  display: flex; flex-direction: column; justify-content: center; padding: 10px;
  overflow-x: clip; overflow-y: visible; /* the 880px text column overhangs its grid cell, as on live; the photo overhangs the top */
}
.merch-grid { display: grid; grid-template-columns: 915px 1fr; min-height: 326px; align-items: center; }
.merch-photo { height: 400px; display: flex; align-items: center; justify-content: center; position: relative; left: max(0px, calc(50vw - 947px)); }
.merch-photo img { width: 732px; height: auto; margin: 18px 0 0 -2px; position: relative; z-index: 2; } /* 80% of the 915px column, as live above 1650px */
@media (max-width: 1650px) { .merch-photo img { width: 549px; margin: -28px 0 0 -200px; } }
/* Live's text block starts at 50vw-22px above 1650px (never left of 845px) and 50vw-147px below (never left of 595px); the paragraph sits under the photo, the button over it.
   From ~1894px live's two 1fr columns outgrow their content: the photo drifts right at 50vw-937px and the text settles at 50vw-10px. */
.merch-text { width: 880px; max-width: none; position: relative; left: calc(max(50vw - 947px, -80px) + clamp(0px, 50vw - 947px, 12px)); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 6px; }
.merch-text .divider { padding: 37px 0 29px; } /* Elementor's 23/22 plus the inline image's line box */
.merch-copy { width: 89%; margin: 0; padding-bottom: 25px; color: var(--text); }
.merch-text .btn { margin-top: 12px; position: relative; z-index: 3; }
@media (max-width: 1650px) { .merch-text { left: max(calc(50vw - 1072px), -330px); } }
/* <=1366: live drops the offset tricks: two equal columns, a 500px photo box
   holding the image at 110% (550px) pushed down 50px and lifted 90px, and a
   550px text column vertically centred in its 400px row (its content overhangs). */
@media (max-width: 1366px) {
  .merch { padding: 0; }
  .merch-grid { grid-template-columns: 1fr 1fr; justify-items: center; padding: 10px 0; }
  .merch-photo { width: 500px; display: block; }
  .merch-photo img { width: 550px; max-width: none; height: auto; margin: 50px 0 0; transform: translateY(-90px); }
  .merch-text { width: 550px; height: 370px; left: 0; }
  .merch-text .divider { padding: 38px 0 29px; }
  .merch-text .btn { margin-bottom: 20px; }
}
@media (max-width: 1200px) {
  .merch { min-height: 470px; padding: 10px; }
  .merch-grid { grid-template-columns: 915px 1fr; justify-items: normal; padding: 0; }
  .merch-photo { width: auto; display: flex; min-height: 0; }
  .merch-photo img { width: auto; height: 230px; margin: 0 0 0 40px; transform: none; }
  .merch-text { width: 880px; height: auto; left: max(calc(50vw - 1072px), -330px); }
  .merch-text .divider { padding: 37px 0 29px; }
  .merch-text .btn { margin-bottom: 0; }
}
@media (max-width: 1024px) {
  .merch { min-height: 0; height: 908px; padding: 10px; }
  .merch-grid { grid-template-columns: 1fr; grid-template-rows: 434px 434px; gap: 20px; height: 888px; justify-items: center; align-items: center; }
  .merch-photo { height: 400px; display: block; justify-self: stretch; }
  .merch-photo img { width: 778px; height: 638px; max-width: none; margin: -152px 0 0 101px; }
  .merch-text { margin: 64px 0 0; width: 884px; left: 0; padding: 4px 0 0; }
  .merch-copy { width: 100%; }
}
@media (max-width: 767px) {
  .merch { padding: 2px 10px 39px; height: auto; }
  .merch-grid { grid-template-rows: auto; height: auto; gap: 0; }
  .merch-photo { height: auto; display: flex; }
  .merch-photo img { width: 365px; height: auto; max-width: none; margin: 0 0 0 -18px; }
  .merch-text .divider { padding: 13px 0; }
  .merch-text { width: 311px; min-height: 550px; justify-content: center; margin: -39px 0 -11px; padding: 0 0 6px; }
  .merch-text .btn { margin: -3px 0 0; }
}

/* ---------- careers ---------- */
.careers { background: var(--teal); min-height: 650px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* live's 730px text box overhangs a narrower half to the left */
.careers-text-col { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; }
.careers-text {
  width: 730px; max-width: none; min-height: 417px; padding: 37px 10px 0;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
}
.careers-text .h2 { margin-top: 2px; }
.careers-text .divider { padding: 46px 0 40px; width: 602px; }
.careers-copy { width: 87%; margin: 0; padding-bottom: 25px; color: var(--white); }
.careers-text .btn { margin-top: 12px; }
.careers-photo { min-height: 650px; background: url(/assets/img/alamo-cafe-server.jpg) center right / cover no-repeat; }
@media (max-width: 1366px) {
  .careers { margin-top: 15px; }
  .careers-text-col { align-items: center; }
  .careers-text { width: 500px; padding: 35px 0 0; justify-content: space-evenly; }
  .careers-text .h2 { margin-top: 0; }
  .careers-text .divider { width: 490px; padding: 44px 0 39px; } /* live's 91px widget around the 490px rule */
  .careers-copy { width: 510px; max-width: 100%; }
  .careers-text .btn { margin-top: 10px; }
}
@media (max-width: 1200px) {
  .careers { margin-top: 50px; min-height: 0; }
  .careers-text-col { align-items: flex-end; }
  .careers-text { justify-content: center; }
  .careers-photo { min-height: 100%; }
}
@media (max-width: 1024px) {
  .careers { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; height: 834px; min-height: 0; }
  .careers-text-col { align-items: flex-start; padding: 0 0 0 61px; }
  .careers-text { padding: 0; justify-content: center; width: 963px; max-width: 100%; }
  .careers-text .h2 { margin-top: 2px; }
  .careers-text .divider { width: 490px; padding: 19px 0 14px; }
  .careers-text .btn { margin-top: 10px; }
  .careers-photo { min-height: 0; background-position: top center; }
}
@media (max-width: 767px) {
  .careers { margin-top: -35px; padding-top: 15px; height: auto; }
  .careers-text-col { padding: 0; align-items: center; }
  .careers-text { width: 80%; min-height: 135px; justify-content: flex-start; }
  .careers-text .h2 { margin-top: 0; }
  .careers-text .divider { width: 100%; padding: 21px 0 15px; }
  .careers-text .btn { margin-top: 10px; }
  .careers-copy { width: 100%; }
  .careers-text .btn { margin-bottom: 30px; }
  .careers-photo { min-height: 435px; }
}

/* ---------- photo strip above the footer ---------- */
.photo-strip { display: grid; grid-template-columns: 24.84% 1fr 1fr 1fr; } /* live's first column is slightly narrower */
.photo-strip img { display: block; width: 100%; height: 22.52vw; object-fit: cover; } /* live: row height follows the first photo's aspect at a quarter of the viewport */
/* <=1366 live fixes the row height (300px, then 230px from 1200) and lets each
   photo take its natural width, left-packed: a strip of background shows at the
   right, and below ~1022px the four shrink to fit. */
@media (max-width: 1366px) {
  .photo-strip { display: flex; }
  .photo-strip img { width: auto; min-width: 0; height: 300px; }
}
@media (max-width: 1200px) { .photo-strip img { height: 230px; } }
/* the strip keeps four columns at every width (four 98x88 thumbnails at 390) */
@media (max-width: 767px) {
  .photo-strip { display: grid; }
  .photo-strip img { width: 100%; height: 22.52vw; }
}