/* ==========================================================================
   Kebab & Grill Corner — home page
   Requires base.css. Reference design width: 1440px
   ========================================================================== */

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: filter .2s ease, transform .2s ease;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

.btn--cream {
  width: 180px; height: 40px;
  background: var(--cream); color: var(--teal);
  font-family: var(--f-button); font-size: 16px; line-height: 22px;
  text-transform: uppercase;
}
.btn--grey {
  width: 180px; height: 40px;
  background: var(--grey-light); color: var(--grey-text);
  font-family: var(--f-button); font-size: 16px; line-height: 22px;
  text-transform: uppercase;
}
.btn--brown {
  width: 175px; height: 44px;
  background: var(--brown); color: var(--butter);
  font-family: var(--f-poster); font-weight: 900;
  font-size: 18.67px; line-height: 26px; letter-spacing: .19px;
}
.btn--black {
  width: 230px; height: 54px;
  background: var(--black); color: var(--grey-light);
  font-family: var(--f-menu); font-size: 18.67px; line-height: 26px;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; z-index: 1;
  height: 699px;
  background: var(--black);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .79;
}

.hero__content {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 0 24px;
}

.hero__logo { width: 247px; height: 72px; }

.hero__title {
  max-width: 500px;
  margin: 10px 0;
  font-family: var(--f-display);
  font-size: 65.49px; font-weight: 400;
  line-height: 58px; letter-spacing: -1.31px;
  text-transform: uppercase;
  color: var(--cream);
}

.hero__subtitle {
  margin: 0 0 36px;
  font-family: var(--f-subhead);
  font-size: 19.81px; line-height: 27px; letter-spacing: 3.17px;
  text-transform: uppercase;
  color: var(--cream);
}

/* ==========================================================================
   About
   ========================================================================== */
.about {
  position: relative; z-index: 1;
  background: var(--grey-dark);
}

.about__inner {
  position: relative;
  max-width: 1440px; height: 552px;
  margin: 0 auto;
  /* the figure box is taller than the band; only the in-band slice shows,
     which is how the original crops it */
  overflow: hidden;
}

.about__figure {
  position: absolute;
  left: 37px; top: -119px;
  width: 568px; height: 726px;
  overflow: hidden;
}
.about__figure img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 40% center;
}

.about__text {
  position: absolute;
  left: 720px; top: 78px;
  width: 601px;
}

.about__title {
  margin: 0 0 17px;
  font-family: var(--f-heading);
  font-size: 33.93px; font-weight: 400;
  line-height: 39px; letter-spacing: 4.75px;
  text-transform: uppercase;
  text-align: center;
  color: var(--white);
}

.about__text p {
  font-size: 15.31px;
  line-height: 21px;
  letter-spacing: .31px;
  text-align: justify;
  color: var(--white);
}
.about__text strong { font-weight: 400; }

.about__text .btn { margin: 40px auto 0; }
.about__text { display: block; }
.about__text .btn--grey { display: flex; }

/* ==========================================================================
   Order online
   ========================================================================== */
.order {
  position: relative; z-index: 1;
  height: 607px;
  background: var(--butter);
}

.order__inner {
  max-width: 1440px; height: 100%;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 65px;
}

.order__text {
  width: 450px;
  margin-top: 15px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}

.order__logo { width: 204px; height: 59px; }

.order__kicker {
  margin-top: 9px;
  font-family: var(--f-order); font-weight: 700;
  font-size: 57.59px; line-height: 51px;
  color: var(--red);
}

.order__headline {
  font-family: var(--f-poster); font-weight: 900;
  font-size: 67.26px; line-height: 59px; letter-spacing: 5.38px;
  text-transform: uppercase;
  color: var(--orange);
}

.order__lead {
  width: 394px;
  margin-top: 20px;
  font-family: var(--f-poster); font-weight: 900;
  font-size: 18.67px; line-height: 26px; letter-spacing: .19px;
  color: var(--brown);
}

.order .btn--brown { margin-top: 18px; }

.order__art {
  width: 449px; height: 344px;
  margin-bottom: 49px;
}

/* ==========================================================================
   Popular items
   ========================================================================== */
.popular {
  position: relative; z-index: 1;
  height: 767px;
  background: var(--tan);
}

.popular__inner {
  width: 947px; margin: 0 auto;
  padding-top: 43px;
}

.popular__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding-left: 25px;
}

.popular__title {
  font-family: var(--f-script);
  font-size: 47.59px; font-weight: 400; line-height: 66px;
  color: var(--white);
}

.popular__rule { width: 551px; height: 3px; margin: 0 7px 15px 0; }

.popular__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 17px;
  margin-top: 12px;
}

.dish {
  position: relative;
  height: 405px;
  overflow: hidden;
}
.dish img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.dish__name {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 49px;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  font-family: var(--f-menu);
  font-size: 23.18px; line-height: 32px;
  text-transform: uppercase;
  color: var(--grey-dark);
}

.popular__note {
  margin-top: 27px;
  font-family: var(--f-menu);
  font-size: 18.67px; line-height: 26px;
  text-align: justify;
  color: var(--white);
}

.popular .btn--black { margin-top: 30px; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact {
  position: relative; z-index: 1;
  min-height: 403px;
  background: var(--charcoal);
  overflow: hidden;
}

.contact::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../images/contact-bg.jpg') center / cover no-repeat;
  opacity: .18;
}

.contact__inner {
  position: relative;
  max-width: 1440px; min-height: 403px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 73px;
  padding: 48px 40px;
}

.contact__brand {
  flex: none;
  width: 377px;
  text-align: center;
}
.contact__brand img { width: 377px; height: 109px; }

.contact__title {
  font-family: var(--f-light);
  font-size: 32.75px; font-weight: 300; line-height: 29px;
  text-transform: uppercase;
  color: var(--white);
}

.contact__list { flex: none; }

.contact__list li {
  display: grid;
  grid-template-columns: 300px auto;
  grid-template-areas:
    "branch  branch"
    "address phone"
    "today   today";
  align-items: center;
  row-gap: 4px;
}
.contact__list li + li { margin-top: 20px; }

.contact__branch {
  grid-area: branch;
  font-family: var(--f-heading);
  font-size: 13px; letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--cream);
}

.contact__address,
.contact__phone {
  display: flex; align-items: center;
  font-family: var(--f-serif);
  font-size: 16px; line-height: 22px;
  color: var(--white);
}

.contact__address { grid-area: address; gap: 15px; }
.contact__phone   { grid-area: phone; gap: 11px; }
.contact__address img,
.contact__phone img { width: 26px; height: 26px; flex: none; }
.contact__address span { max-width: 205px; }
.contact__address a:hover,
.contact__phone a:hover { color: var(--cream); }

.contact__today {
  grid-area: today;
  padding-left: 41px;
  font-family: var(--f-serif);
  font-size: 13.5px; line-height: 20px;
  color: rgba(255, 255, 255, .72);
}

.contact__more {
  position: absolute; right: 40px; bottom: 22px;
  font-family: var(--f-sans);
  font-size: 12.5px; letter-spacing: .4px;
  color: var(--cream);
}
.contact__more:hover { text-decoration: underline; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  height: 92px;
  background: var(--black);
  display: flex; flex-direction: column; align-items: center;
  padding-top: 25px;
  text-align: center;
}

.site-footer p {
  font-family: var(--f-sans);
  font-size: 10.67px; line-height: 14px; letter-spacing: .53px;
  color: var(--cream);
}
.site-footer a:hover { text-decoration: underline; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* --- large tablet / small laptop: unpin the absolute blocks --- */
@media (max-width: 1340px) {

  .about__inner {
    height: auto;
    display: flex; align-items: center; gap: 48px;
    padding: 56px 40px;
  }
  .about__figure {
    position: static;
    flex: 0 0 440px;
    width: 440px; height: 560px;
  }
  .about__text { position: static; width: auto; flex: 1; }

  .order__inner { gap: 40px; padding: 0 40px; }
  .order__art { width: 380px; height: auto; margin-bottom: 0; }
  .order__text { margin-top: 0; }

  .popular__inner { width: auto; max-width: 947px; padding: 43px 40px 0; }

  .contact__inner { gap: 48px; }
}

/* --- tablet --- */
@media (max-width: 1024px) {

  .hero { height: 560px; }
  .hero__title { font-size: 52px; line-height: 48px; max-width: 420px; }
  .hero__subtitle { font-size: 17px; line-height: 24px; letter-spacing: 2.6px; }

  .about__inner { flex-direction: column; gap: 32px; }
  .about__figure { flex: none; width: 100%; max-width: 520px; height: 420px; }
  .about__text { width: 100%; max-width: 640px; }

  .order { height: auto; padding: 56px 0; }
  .order__inner { flex-direction: column-reverse; gap: 32px; }
  .order__art { width: 320px; }

  .popular { height: auto; padding-bottom: 64px; }
  .popular__rule { display: none; }
  .popular__head { justify-content: center; padding-left: 0; }

  .contact__inner { flex-direction: column; gap: 40px; padding-bottom: 64px; }
  .contact__brand { width: auto; }
  .contact__brand img { width: 300px; height: auto; }
}

/* --- phone --- */
@media (max-width: 760px) {

  .hero { height: 480px; }
  .hero__logo { width: 190px; height: auto; }
  .hero__title { font-size: 40px; line-height: 38px; max-width: 320px; letter-spacing: -.8px; }
  .hero__subtitle { font-size: 14px; line-height: 20px; letter-spacing: 2px; margin-bottom: 28px; }

  .about__inner { padding: 48px 20px; }
  .about__figure { height: 320px; }
  .about__title { font-size: 25px; line-height: 30px; letter-spacing: 3px; }
  .about__text p { text-align: left; }

  .order__inner { padding: 0 20px; }
  .order__text { width: 100%; }
  .order__kicker { font-size: 42px; line-height: 38px; }
  .order__headline { font-size: 46px; line-height: 42px; letter-spacing: 3.5px; }
  .order__lead { width: 100%; font-size: 16px; line-height: 23px; }
  .order__art { width: 100%; max-width: 300px; }

  .popular__inner { padding: 36px 20px 0; }
  .popular__title { font-size: 36px; line-height: 50px; }
  .popular__grid { grid-template-columns: 1fr; gap: 20px; }
  .dish { height: 320px; }
  .popular__note { font-size: 16px; line-height: 24px; text-align: left; }
  .popular .btn--black { width: 100%; max-width: 280px; }

  .contact__inner { padding: 48px 20px 64px; }
  .contact__brand img { width: 100%; max-width: 280px; }
  .contact__title { font-size: 26px; }
  .contact__list li {
    grid-template-columns: 1fr;
    grid-template-areas: "branch" "address" "phone" "today";
    row-gap: 6px;
  }
  .contact__list li + li { margin-top: 26px; }
  .contact__today { padding-left: 41px; }
  .contact__more { right: 20px; bottom: 20px; }

  .site-footer { height: auto; padding: 22px 20px; }
}