/*
 * Home page sections after the slider: Our Story, Specials, gallery banner, menu rows.
 * Values measured on the live site at 375 / 768 / 1024 / 1366 / 1920 px.
 */

.home-content {
  padding-bottom: 30px;
}

/* ---------- Our Story ---------- */

.our-story-inner {
  position: relative;
  max-width: var(--layout-inner-container);
  height: 800px;
  margin: 0 auto;
}

.our-story-intro {
  position: relative;
  width: 58%;
  margin: 0 auto;
  padding: 40px 0;
  font-size: var(--size-xl);
  font-weight: var(--weight-light);
  letter-spacing: 1px;
  text-align: center;
}

.our-story-image-left,
.our-story-image-right {
  float: left;
  width: 380px;
  height: 610px;
  background: no-repeat center / cover;
}

.our-story-image-right {
  margin-left: 20px;
}

.our-story-panel {
  position: absolute;
  top: 40%;
  right: 80px;
  z-index: 0;
  max-width: 500px;
  padding: 20px;
  background: var(--color-white);
  text-align: left;
}

.our-story-pretitle {
  margin-top: 10px;
  font-size: var(--size-xl);
  font-weight: var(--weight-medium);
  color: var(--color-gold);
}

.our-story-title {
  margin-top: 10px;
  font-size: var(--size-3xl);
  font-weight: var(--weight-extra);
  color: var(--color-text);
}

.our-story-text {
  margin-top: 20px;
  font-size: var(--size-sm);
  font-weight: var(--weight-regular);
}

@media (max-width: 1024px) {
  .our-story-inner { height: 742px; }
  .our-story-image-left { width: 50%; }
  .our-story-image-right { float: right; width: 50%; margin-left: 0; }
  .our-story-panel { left: 0; right: 0; margin: 0 auto; opacity: 0.8; }
}

@media (max-width: 768px) {
  .our-story-intro { width: 100%; }
}

@media (max-width: 640px) {
  .our-story-image-right { display: none; }
  .our-story-image-left { width: 100%; }
}

@media (max-width: 560px) {
  .our-story-intro { width: 90%; font-size: var(--size-lg); }
}

/* ---------- Specials: banner + products ---------- */

.specials-banner {
  background: var(--color-coffee) no-repeat center / cover fixed;
}

.specials-banner-inner {
  position: relative;
  height: 585px;
}

.specials-banner-text {
  position: absolute;
  right: 0;
  bottom: 20px;
  left: 0;
  text-align: center;
}

.specials-banner-pretitle,
.gallery-banner-pretitle {
  font-size: var(--size-xl);
  font-weight: var(--weight-medium);
  color: var(--color-gold-alt);
}

.specials-banner-title,
.gallery-banner-title {
  font-size: var(--size-3xl);
  font-weight: var(--weight-extra);
  color: var(--color-white);
}

.specials {
  max-width: 1920px;
  margin: 0 auto;
  background: var(--color-coffee);
}

.specials-grid {
  display: flex;
  flex-wrap: wrap;
}

.specials-item {
  width: 100%;
  background: var(--color-card-bg);
}

.specials-item-title {
  margin: 10px 0 0 10px;
  font-size: var(--size-md);
  font-weight: var(--weight-medium);
  color: var(--color-text-dark);
}

.specials-item-text {
  margin: 10px 4px 20px 10px;
  font-size: var(--size-sm);
  color: var(--color-text-dark);
}

@media (min-width: 768px) {
  .specials-item { width: 25%; }
}

/* ---------- Gallery banner ---------- */

.gallery-banner {
  position: relative;
  height: 580px;
  background: var(--color-coffee) no-repeat center / cover fixed;
}

.gallery-banner-shade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--color-black);
  opacity: 0.5;
}

.gallery-banner-text {
  position: absolute;
  top: 30%;
  right: 0;
  left: 0;
  text-align: center;
}

.gallery-banner-title {
  margin-top: 5px;
}

/* up to 1024px both banners lose their photo and the specials banner gets short */
@media (max-width: 1024px) {
  .specials-banner,
  .gallery-banner { background-image: none !important; }
  .specials-banner-inner { height: 160px; }
  .gallery-banner { height: 300px; }
}