/* ==========================================================================
   PAGES CSS - Page Banner, Breadcrumbs, Generic Pages
   ========================================================================== */

/* Page Banner */
.page-banner {
  position: relative;
}

.page-banner .img {
  display: flex;
  height: 580px;
  padding-bottom: var(--Space-5, 20px);
  flex-direction: column;
  align-items: center;
  gap: 10px;
  align-self: stretch;
}

.page-banner .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-banner .title {
  color: var(--Background-Global-Primary, #fefdf9);
  font-family: var(--Type-Font-Display, "Crimson Text");
  font-size: var(--Title-Page-Size-Large, 56px);
  font-style: normal;
  font-weight: var(--Title-Page-Font-Weight, 700);
  line-height: 120%;
  text-transform: uppercase;
  width: 100%;
  position: absolute;
  bottom: 74px;
  text-align: center;
}

/* Generic Page Layout */
.page-content {
  padding: var(--Space-10, 40px);
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: var(--Space-15, 60px);
}

.page-header h1 {
  color: var(--On-background-Brand-Default, #231f20);
  font-family: var(--Type-Font-Crimson, "Crimson Text");
  font-size: var(--Title-Page-Size-Large, 56px);
  font-style: normal;
  font-weight: var(--Title-Page-Font-Weight, 700);
  line-height: 120%;
  text-transform: uppercase;
  margin-bottom: var(--Space-5, 20px);
}

.page-header p {
  color: var(--On-background-Global-Default, #8f888a);
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  font-size: var(--Body-Size-Large, 20px);
  font-style: normal;
  font-weight: var(--Body-Font-Weight-Regular, 400);
  line-height: 140%;
}

/* Breadcrumbs */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--Space-2, 8px);
  margin-bottom: var(--Space-8, 32px);
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  font-size: var(--Body-Size-Small, 16px);
}

.breadcrumbs a {
  color: var(--On-background-Global-Default, #8f888a);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--On-background-Brand-Default, #231f20);
}

.breadcrumbs .separator {
  color: var(--On-background-Global-Default, #8f888a);
}

.breadcrumbs .current {
  color: var(--On-background-Brand-Default, #231f20);
  font-weight: var(--Body-Font-Weight-Strong, 600);
}

/* Mobile Responsive for Page Banner */
@media (max-width: 575px) {
  .page-banner .img {
    height: 580px;
  }

  .page-banner .title {
    font-size: 40px;
    line-height: 120%;
    padding: 0 var(--Space-2-5, 10px) var(--Space-8, 32px)
      var(--Space-2-5, 10px);
  }

  .page-content {
    padding: var(--Space-5, 20px);
  }

  .page-header h1 {
    font-size: 40px;
    line-height: 120%;
  }

  .page-header p {
    font-size: var(--Body-Size-Medium, 18px);
  }

  .breadcrumbs {
    font-size: var(--Body-Size-Small, 14px);
  }
}

/* Tablet Responsive for Page Banner */
@media (min-width: 576px) and (max-width: 991px) {
  .page-banner .img {
    height: 580px;
  }

  .page-banner .title {
    font-size: 48px;
    line-height: 120%;
    padding: 0 var(--Space-3, 12px) var(--Space-10, 40px) var(--Space-3, 12px);
  }

  .page-content {
    padding: var(--Space-8, 32px);
  }

  .page-header h1 {
    font-size: 48px;
    line-height: 120%;
  }
}

/* Desktop Responsive */
@media (min-width: 992px) {
  .page-header h1 {
    font-size: var(--Title-Page-Size-Large, 56px);
  }
}