﻿.home-offer {
  min-height: 800px;
  display: flex;
  align-items: center;
  position: relative;
  background: #714039 url('../images/main-slider/waffle-wings-hero.png') center center / cover no-repeat;
  isolation: isolate;
}
.home-offer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(55, 25, 21, .68) 0%, rgba(75, 36, 27, .44) 42%, transparent 72%);
}
.home-offer__content {
  width: min(55%, 850px);
  margin-left: max(4%, calc((100% - 1500px) / 2));
  padding: 120px 20px 70px;
  text-align: center;
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  text-transform: uppercase;
  color: #fff;
}
.home-offer__eyebrow {
  display: inline-block;
  margin: 0 0 24px;
  padding-bottom: 7px;
  border-bottom: 1px solid currentColor;
  color: #ffc62d;
  font-size: clamp(20px, 2.3vw, 40px);
  font-weight: 300;
  letter-spacing: .09em;
  line-height: 1.2;
}
.home-offer h1 {
  margin: 0;
  color: #fff;
  font-family: inherit;
  font-size: clamp(56px, 8vw, 150px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0;
}
.home-offer h1 span, .home-offer h1 small { display: block; }
.home-offer h1 small {
  margin-top: 15px;
  font-size: .46em;
  font-weight: 400;
  line-height: 1.1;
}
.home-offer__price {
  margin: 22px 0;
  color: #ffc62d;
  font-size: clamp(36px, 4vw, 68px);
  font-weight: 500;
  line-height: 1;
}
.home-offer__button {
  display: inline-block;
  padding: 15px 36px;
  border-radius: 30px;
  background: #ed1c2e;
  color: #fff;
  font-size: 18px;
  letter-spacing: .08em;
  line-height: 1.2;
  transition: background-color .2s ease;
}
.home-offer__button:hover, .home-offer__button:focus { background: #bd1020; color: #fff; }
.home-offer__button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@media (max-width: 767px) {
  .home-offer { min-height: 0; aspect-ratio: 425 / 205; background-position: right center; }
  .home-offer::before { background: linear-gradient(90deg, rgba(55, 25, 21, .68) 0%, rgba(75, 36, 27, .44) 55%, transparent 85%); }
  .home-offer__content { width: 62%; margin: 0; padding: 3vw 2vw 3vw 3vw; }
  .home-offer__eyebrow { margin-bottom: 2.4vw; padding-bottom: 1vw; font-size: 2.9vw; }
  .home-offer h1 { font-size: 10vw; }
  .home-offer h1 small { margin-top: 1.5vw; font-size: .42em; }
  .home-offer__price { margin: 2.4vw 0; font-size: 5vw; }
  .home-offer__button { padding: 1.6vw 4.5vw; font-size: 2.8vw; }
}
@media (prefers-reduced-motion: reduce) { .home-offer__button { transition: none; } }

/* Food photography in the home page offer grid */
.food-grid-image { display: block; width: 100%; object-fit: cover; }
.food-grid-image--1 { aspect-ratio: 682 / 554; }
.food-grid-image--2, .food-grid-image--3 { aspect-ratio: 323 / 251; }
.food-grid-image--4 { aspect-ratio: 682 / 267; }

/* Coordinated Baseline Station offer banners */
.offer-tile { position: relative; display: block; overflow: hidden; color: #fff; background: #2a160e; font-family: 'Oswald', 'Arial Narrow', sans-serif; }
.offer-tile img { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.offer-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(25, 12, 6, .88), rgba(25, 12, 6, .3) 75%); }
.offer-tile--main { aspect-ratio: 682 / 554; }
.offer-tile--small { aspect-ratio: 323 / 251; }
.offer-tile--wide { aspect-ratio: 682 / 267; }
.offer-tile__copy { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 8%; text-transform: uppercase; line-height: 1.08; text-shadow: 0 1px 4px #160c06; }
.offer-tile__kicker { color: #ffdc83; font-size: clamp(13px, 1.2vw, 19px); letter-spacing: .1em; margin-bottom: .55em; }
.offer-tile strong { color: #fff; font-weight: 600; font-size: clamp(23px, 3vw, 45px); }
.offer-tile--main strong { font-size: clamp(42px, 5.3vw, 78px); }
.offer-tile strong small { font-size: .48em; }
.offer-tile__subtitle { color: #fff; font-size: clamp(16px, 1.6vw, 24px); margin-top: .7em; }
.offer-tile__price { font-size: clamp(27px, 3.1vw, 46px); color: #ffdc83; font-weight: 600; margin-top: .25em; }
.offer-tile__detail { font-size: clamp(12px, 1.1vw, 16px); margin-top: .5em; max-width: 24em; }
.offer-tile__cta { margin-top: 1.3em; padding: .7em 1.2em; background: #d81924; font-size: 15px; letter-spacing: .06em; }
.offer-tile:hover, .offer-tile:focus { color: #fff; }
.offer-tile:focus-visible { outline: 3px solid #d81924; outline-offset: 3px; }
@media (max-width: 767px) { .offer-tile--small strong { font-size: clamp(24px, 7vw, 40px); } .offer-tile__kicker { font-size: 14px; } }
.offer-tile__categories { margin-top: 1em; padding: .4em .6em; background: #bf1824; font-size: clamp(12px, 1.2vw, 18px); letter-spacing: .03em; }
.offer-tile__address { margin-top: .7em; font-size: clamp(12px, 1.1vw, 16px); }
.offer-tile--small::after, .offer-tile--wide::after { background: linear-gradient(90deg, rgba(103, 8, 12, .94), rgba(99, 10, 11, .38) 80%); }
/* Real food photographs for the wings and ribs offers. */
.offer-tile--small img[src$="real-wings.jpg"] { transform: scaleX(-1); }
.offer-tile__photos { position: absolute; inset: 0; display: flex; }
.offer-tile .offer-tile__photos img { position: static; width: 50%; height: 100%; object-fit: cover; }
.offer-tile .offer-tile__photos img:last-child { object-position: 28% center; }

/* Match the original restaurant outline icons in the service cards. */
@font-face {
  font-family: 'Restaurant Outline';
  src: url('../plugins/flaticon/restaurant/Flaticon.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.service-outline-icon { font-family: 'Restaurant Outline'; font-size: 60px; font-style: normal; line-height: 1; color: #fff; }
.service-icon-circle { display: inline-flex; align-items: center; justify-content: center; line-height: normal; }
.service-icon-circle .service-outline-icon { display: block; font-size: 44px; line-height: 1; }
.station-heading-icon { width: 180px; height: 130px; line-height: normal; display: inline-flex; align-items: center; justify-content: center; }
.station-heading-icon img { display: block; width: 180px; height: auto; max-width: 100%; }

