@import url('./cards-shared.css');

.cards-container {
  --cards-order-image-size: 21.875rem;
  --cards-order-image-min-height-mobile: 21.9375rem;
  --cards-order-image-min-height-desktop: 35.25rem;
  --cards-order-container-width-mb: 13.4375rem;
  --cards-order-container-height-mb: 16.75rem;
  --cards-order-container-width-dt: 20.625rem;
  --cards-order-container-height-dt: 15rem;
  --container-width-mb: var(--cards-order-container-width-mb);
  --container-height-mb: var(--cards-order-container-height-mb);
  --container-width-dt: var(--cards-order-container-width-dt);
  --container-height-dt: var(--cards-order-container-height-dt);
  --cards-featured-image-max-height-mb: 23rem;
  --cards-featured-image-max-height-mb-default: 15.875rem;
  --cards-featured-image-max-height-dt: 11.75rem;
  --cards-featured-image-max-height-dt-default: 23rem;
  --cards-featured-primary-image-max-height-mb: 11.75rem;
  --cards-featured-primary-image-max-height-dt: 23rem;
  --cards-featured-secondary-image-max-height-mb: 15.875rem;
  --cards-featured-secondary-image-max-height-dt: 17.5625rem;
  --cards-featured-description-size: var(--text-tag-size);
  --cards-featured-description-line-height: var(--text-tag-line-height);
  --cards-featured-card-min-height: 9.8125rem;
  --cards-featured-layout-gap: 8.75rem;
  --cards-menu-header-padding: var(--spacing-2-5);
  --cards-menu-image-width: 7.4375rem;
  --cards-menu-image-height: 6.25rem;
  --cards-menu-image-height-desktop: 13.375rem;
  --cards-menu-arrow-width: 1.125rem;
  --cards-menu-arrow-height: 1.1875rem;
  --cards-menu-item-gap-dt: 1.875rem;
  --cards-menu-item-min-height-dt: 11.25rem;
  --cards-menu-content-min-height-dt: 3rem;
  --cards-menu-mobile-button-bottom: var(--spacing-12);
  --cards-menu-mobile-button-left: var(--spacing-3);
  --cards-menu-mobile-padding-bottom: 5.5rem;
  --cards-order-copy-line-height: 1.1;
  --cards-order-body-min-height-mobile: 11.5625rem;
  --cards-order-body-min-height-desktop: 15rem;
  --cards-featured-tag-color: var(--color-neutral-light-cream);
  --cards-featured-tag-radius: var(--radius-sm);
  --cards-featured-primary-gap: var(--spacing-5);
  --cards-featured-secondary-gap-mobile: var(--spacing-3);
  --cards-featured-secondary-gap-desktop: 1.9375rem;
  --cards-order-body-letter-spacing: -0.015rem;
}

/* =========================
   ORDER CARDS
========================= */

.cards.order-cards ul {
  gap: var(--spacing-3);
  list-style: none;
}

.cards.order-cards li {
  position: relative;
  margin-bottom: var(--spacing-2-5);
}

.cards.order-cards img {
  object-fit: cover;
  border-radius: var(--spacing-2);
  gap: var(--spacing-2-5);
  opacity: 1;
  width: 100%;
  height: var(--cards-order-image-min-height-mobile);
}

/* =========================
   FEATURE CARDS
========================= */

.cards.featured-cards ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cards-featured-list-gap, var(--spacing-3));
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.cards.featured-cards .featured-cards-layout {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
}

.cards.menu-cards ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-0);
}

.cards.featured-cards .featured-cards-primary ul {
  grid-template-columns: 1fr;

  --cards-featured-list-gap: var(--cards-featured-primary-gap);
}

.cards.featured-cards .featured-cards-category-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.cards.featured-cards .featured-cards-category-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.cards.featured-cards .featured-cards-category-header h3 {
  color: var(--color-spinach);
  margin: var(--spacing-0);
}

.cards.featured-cards .featured-cards-category-header .button {
  align-self: flex-start;
  background-color: unset;
  border: 1px solid var(--color-spinach);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-full);
  margin: var(--spacing-0);
  color: var(--color-spinach);
  text-decoration: none;
}

.cards.featured-cards li {
  border-radius: unset;
}

.cards.menu-cards .cards-card-body {
  flex: 1;
  padding: var(--spacing-0);
}

.cards.featured-cards .cards-card-body {
  padding: var(--spacing-4);
  gap: var(--spacing-0);
  min-height: var(--cards-featured-card-min-height);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

/* When UE wrapper exists */
.cards.order-cards .cards-card-body {
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: var(--spacing-5);
  left: var(--spacing-5);
  right: var(--spacing-5);
  background: var(--color-neutral-light-cream);
  padding: var(--spacing-3);
  border-radius: var(--spacing-2);
  width: 52%;
  min-height: var(--cards-order-body-min-height-mobile);
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-3);
}

.cards.featured-cards.api-featured-cards .cards-card-body {
  padding: var(--spacing-5) var(--spacing-0) var(--cards-menu-arrow-height);
}

.cards.featured-cards li.featured-cards-secondary-item {
  background-color: var(--color-neutral-dark-cream);
  border-radius: 8px;
}

.cards.featured-cards li.featured-cards-secondary-item .cards-card-body {
  padding: 16px;
}

.cards.menu-cards .cards-card-image img {
  width: var(--cards-menu-image-width);
  height: var(--cards-menu-image-height);
}

.cards.featured-cards.api-featured-cards .featured-cards-primary img {
  width: 100%;
  min-height: var(--cards-featured-primary-image-max-height-mb);
}

.cards.featured-cards.api-featured-cards .featured-cards-grid {
  --cards-featured-list-gap: var(--cards-featured-secondary-gap-mobile);
}

.cards.featured-cards.api-featured-cards .featured-cards-secondary-item img {
  width: 100%;
  min-height: var(--cards-featured-secondary-image-max-height-mb);
}

.cards.featured-cards p {
  margin: var(--spacing-0);
}

.cards .cards-card-image p:has(> picture) {
  margin: var(--spacing-0);
}

.cards.featured-cards h5 {
  margin: var(--spacing-0) var(--spacing-0) var(--spacing-6);
}

.cards.featured-cards h4 {
  margin: var(--spacing-3) var(--spacing-0) var(--spacing-6);
}

.cards.featured-cards .card-description-title {
  margin-right: var(--spacing-1);
}

.cards.featured-cards .card-description-title,
.cards.featured-cards .card-description {
  font-size: var(--cards-featured-description-size);
  display: inline-block;
  line-height: var(--cards-featured-description-line-height);
  color: var(--color-neutral-light-spinach);
  font-weight: 500;
}

.cards.menu-cards li a {
  text-decoration: none;
}

.cards.featured-cards .button-container a {
  background-color: unset;
  border: 1px solid var(--color-spinach);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-full);
  margin: var(--spacing-0);
  color: var(--color-spinach);
}

.cards.featured-cards .button-container a:hover {
  background-color: var(--color-subway-green);
  color: var(--color-neutral-light-cream);
}

.cards.featured-cards .button-container a:focus {
  box-shadow: 0 0 0 3px var(--color-btn-focus-ring);
}

.cards.featured-cards.api-featured-cards .featured-cards-primary .button-container a {
  background-color: var(--color-neutral-lightest-spinach);
  color: var(--color-spinach);
  border: none;
}

.cards.featured-cards.api-featured-cards .featured-cards-primary .button-container a:hover {
  background-color: var(--color-subway-green);
  color: var(--color-neutral-light-cream);
}

.cards.featured-cards .card-featured-badge {
  font-size: var(--cards-featured-description-size);
  display: inline-block;
  font-weight: 700;
  line-height: var(--cards-featured-description-line-height);
  text-transform: uppercase;
  padding: var(--spacing-1);
  border-radius: var(--cards-featured-tag-radius);
  width: fit-content;
  margin-bottom: var(--spacing-3);
}

/* =========================
   MENU CARDS
========================= */

.cards-container:has(.menu-cards) .default-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  padding-bottom: var(--spacing-0);
}

.cards-container:has(.cards.menu-cards:not(.center)) {
  padding: var(--spacing-2) var(--spacing-0) var(--spacing-6);
}

.cards-container:has(.menu-cards) .default-content-wrapper h2,
.cards-container:has(.menu-cards) .default-content-wrapper h3 {
  color: var(--color-spinach);
  margin: var(--spacing-0);
}

.cards-container:has(.menu-cards) .default-content-wrapper .button-container {
  margin: var(--spacing-0);
}

.cards-container:has(.menu-cards) .default-content-wrapper a.secondary {
  border-color: var(--color-spinach);
  border-radius: var(--radius-full);
  color: var(--color-spinach);
  margin: var(--spacing-0);
  min-height: var(--spacing-12);
  display: flex;
  align-items: center;
  padding: var(--spacing-2-5) var(--spacing-4);
}

.cards-container:has(.menu-cards.center) .default-content-wrapper a.secondary {
  padding: var(--spacing-2) var(--spacing-6);
}

.cards.featured-cards.api-featured-cards .featured-cards-category-header a.secondary {
  border-width: 2px;
  border-color: var(--color-spinach);
  border-radius: var(--radius-full);
  color: var(--color-spinach);
  margin: var(--spacing-0);
}

.cards-container:has(.menu-cards) .default-content-wrapper div {
  background-color: var(--color-neutral-dark-cream);
  min-height: var(--spacing-12);
  padding: var(--cards-menu-header-padding);
  border-radius: var(--spacing-1);
}

.cards-container:has(.cards.menu-cards:not(.center)) .default-content-wrapper a.secondary {
  min-height: var(--spacing-9);
  box-sizing: border-box;
}

.cards-container:has(.cards.menu-cards) .default-content-wrapper a.secondary:hover {
  color: var(--color-neutral-white);
  background-color: var(--color-spinach);
}

.cards.featured-cards.api-featured-cards .featured-cards-category-header a.secondary:hover {
  color: var(--color-neutral-white);
  background-color: var(--color-spinach);
}

.cards-container:has(.cards.menu-cards) .default-content-wrapper :is(p, a) {
  margin: var(--spacing-0);
}

.cards-container:has(.cards.menu-cards) .default-content-wrapper div,
.cards-container:has(.menu-cards.center) .default-content-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.cards.menu-cards .cards-card-body :is(h1, h2, h3, h4, h5, h6) {
  margin: var(--spacing-0);
  color: var(--color-spinach);
}

.cards.menu-cards.center .cards-card-body :is(h1, h2, h3, h4, h5, h6) {
  font-size: var(--heading-font-size-m);
  font-weight: var(--text-h4-mobile-weight);
  line-height: var(--text-h5-mobile-line-height);
  letter-spacing: var(--text-h4-mobile-spacing);
}

.cards.menu-cards:not(.center) .cards-card-body :is(h1, h2, h3, h4, h5, h6) {
  font-size: var(--heading-font-size-m);
  font-weight: var(--text-h4-mobile-weight);
  line-height: var(--text-h4-mobile-line-height);
  letter-spacing: var(--text-h4-mobile-spacing);
}

.cards-wrapper:has(.cards.menu-cards) {
  padding: var(--spacing-0) var(--spacing-0) var(--spacing-10);
}

.cards-wrapper:has(.menu-cards.center) {
  padding-top: var(--spacing-6);
}

.cards.menu-cards li {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  padding: var(--spacing-2) var(--spacing-6) var(--spacing-2) var(--spacing-0);
  border-radius: var(--spacing-2);
  background: var(--color-neutral-light-cream);
  cursor: pointer;
}

.cards.menu-cards .cards-card-link {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-4);
  width: 100%;
}

/* arrow */

.cards.menu-cards li::after {
  content: '';
  background: url('../../icons/arrow-large.svg') no-repeat;
  background-size: contain;
  width: var(--cards-menu-arrow-width);
  height: var(--cards-menu-arrow-height);
  color: var(--color-spinach);
  font-size: var(--spacing-5);
}

.cards.order-cards .cards-card-body p {
  margin: 0;
  line-height: var(--text-body-sm-line-height);
  letter-spacing: var(--cards-order-body-letter-spacing);
  font-weight: var(--text-body-sm-weight);
}

.cards.order-cards .cards-card-body :is(h1, h2, h3, h4, h5, h6) {
  margin: var(--spacing-0);
}

.cards.order-cards .card-description-title {
  font-size: var(--text-h4-size);
  color: var(--color-spinach);
  font-weight: var(--text-h4-weight);
}

.cards.order-cards .card-description {
  font-size: var(--text-body-sm-size);
  font-weight: var(--text-body-sm-weight);
  line-height: var(--text-body-sm-line-height);
}

.cards.order-cards .card-eyebrow:not(:empty) {
  align-self: flex-start;
  background: var(--color-subway-green);
  color: var(--color-neutral-light-cream);
  font-size: var(--spacing-3);
  font-weight: var(--text-tag-weight);
  padding: var(--spacing-1);
  border-radius: var(--spacing-0-5);
  margin: var(--spacing-0) var(--spacing-0) var(--spacing-3);
}

.cards.order-cards h1 {
  margin-top: var(--spacing-1);
}

.cards-container:has(.cards.menu-cards) .default-content-wrapper p {
  color: var(--color-spinach);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line-height);
}

.cards.order-cards .btn {
  min-height: var(--spacing-9);
  box-sizing: border-box;
}

.cards.order-cards .btn,
.cards.promo-card .btn {
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-pill);
}

.cards.order-cards .cards-card-body .button-container p{
  font-weight: var(--text-cta-weight);
  letter-spacing: var(--text-body-sm-spacing);
}

.cards.featured-cards.api-featured-cards
  .cards-card-body
  > p:first-child:not(.button-container, .card-description) {
  color: var(--cards-featured-tag-color);
  text-transform: uppercase;
  padding: var(--spacing-1);
  border-radius: var(--cards-featured-tag-radius);
  background-color: var(--color-subway-green);
  width: min-content;
}

.cards.order-cards .cards-card-body .button-container {
  margin-top: auto;
  margin-bottom: var(--spacing-0);
}

@media (width < 1024px) {
  .cards.featured-cards.api-featured-cards .featured-cards-category-section {
    display: flex;
    flex-direction: column;
  }

  .cards.featured-cards.api-featured-cards .featured-cards-category-header {
    display: contents;
  }

  .cards.featured-cards.api-featured-cards .featured-cards-category-header h3 {
    order: 1;
    margin-bottom: var(--spacing-3);
  }

  .cards.featured-cards.api-featured-cards .featured-cards-grid {
    order: 2;
  }

  .cards.featured-cards.api-featured-cards .featured-cards-category-header a.secondary,
  .cards.featured-cards.api-featured-cards .featured-cards-category-header .button {
    order: 3;
    align-self: flex-start;
    margin-top: var(--spacing-4);
  }

  .cards-container:has(.cards.menu-cards) .default-content-wrapper h2 {
    font-size: var(--heading-font-size-m);
    line-height: var(--text-app-h4-line-height);
    letter-spacing: var(--text-app-h4-spacing);
  }

  .cards-container:has(.cards.menu-cards.center) .default-content-wrapper .button-container {
    position: absolute;
    bottom: var(--cards-menu-mobile-button-bottom);
    left: var(--cards-menu-mobile-button-left);
  }

  .cards-container:has(.cards.menu-cards.center) {
    position: relative;
    padding-bottom: var(--cards-menu-mobile-padding-bottom);
  }

  .cards-wrapper:has(.cards.menu-cards) {
    padding-bottom: var(--spacing-6);
  }
}

@media (width >= 1024px) {
  .cards.featured-cards .featured-cards-layout {
    gap: var(--cards-featured-layout-gap);
  }

  .cards.featured-cards ul {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .cards.menu-cards ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--cards-menu-item-gap-dt);
  }

  .cards.order-cards ul {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-5);
  }

  .cards.featured-cards.api-featured-cards .featured-cards-primary ul {
    grid-template-columns: 1fr 1fr;
  }

  .cards.featured-cards.api-featured-cards .featured-cards-category-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .cards.featured-cards.api-featured-cards .featured-cards-category-header .button {
    align-self: auto;
  }

  .cards.featured-cards.api-featured-cards .featured-cards-grid ul {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .cards.featured-cards.api-featured-cards .featured-cards-grid {
    --cards-featured-list-gap: var(--cards-featured-secondary-gap-desktop);
  }

  .cards.featured-cards img {
    min-height: var(--cards-featured-image-max-height-dt);
  }

  .cards-wrapper:has(.cards.menu-cards) {
    padding: var(--cards-menu-item-gap-dt) var(--spacing-15) var(--spacing-0);
  }

  .cards-wrapper:has(.menu-cards.center) {
    padding-top: var(--spacing-10);
  }

  .cards-container:has(.cards.menu-cards:not(.center)) {
    padding: var(--spacing-10) var(--spacing-0) var(--spacing-24);
  }

  .cards.menu-cards.center .cards-card-body :is(h1, h2, h3, h4, h5, h6) {
    font-size: var(--heading-font-size-s);
    font-weight: var(--text-h5-weight);
    line-height: var(--text-h5-line-height);
    letter-spacing: var(--text-h5-spacing);
  }

  .cards.menu-cards:not(.center) .cards-card-body :is(h1, h2, h3, h4, h5, h6) {
    font-size: var(--heading-font-size-xs);
    font-weight: var(--text-h6-weight);
    line-height: var(--text-h6-line-height);
    letter-spacing: var(--text-h6-spacing);
  }

  .cards.menu-cards .cards-card-body {
    min-height: var(--cards-menu-content-min-height-dt);
    align-items: end;
    display: flex;
    flex-direction: row;
    padding: var(--spacing-4);
  }

  .cards.menu-cards li {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border: 1px solid var(--color-neutral-light-grey);
    gap: var(--spacing-0);
    padding: var(--spacing-0);
    min-height: var(--cards-menu-item-min-height-dt);
  }

  .cards.menu-cards .cards-card-link {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-0);
    height: 100%;
  }

  .cards.menu-cards li::after {
    content: none;
  }

  .cards.menu-cards .cards-card-image {
    width: 100%;
  }

  .cards-container:has(.cards.menu-cards) .default-content-wrapper {
    gap: var(--spacing-16);
  }

  .cards-container:has(.cards.menu-cards) .default-content-wrapper div {
    padding: var(--spacing-4);
  }

  .cards.order-cards li {
    position: relative;
    border-radius: var(--spacing-4);
    overflow: hidden;
    margin-bottom: var(--spacing-0);
  }

  .cards.order-cards picture,
  .cards.order-cards img {
    width: 100%;
    height: var(--cards-order-image-min-height-desktop);
    object-fit: cover;
    display: block;
    border-radius: var(--spacing-2);
  }

  .cards.order-cards .cards-card-body {
    bottom: var(--spacing-6);
    left: var(--spacing-6);
    padding: var(--spacing-6);
    min-height: var(--cards-order-body-min-height-desktop);
  }

  .cards.order-cards .card-eyebrow {
    margin: var(--spacing-0) var(--spacing-0) var(--spacing-3-5);
  }

  .cards.menu-cards.center .cards-card-body {
    width: 100%;
    padding: var(--spacing-0);
    align-items: center;
    justify-content: center;
  }

  .cards.menu-cards .cards-card-image img {
    width: 100%;
    height: var(--cards-menu-image-height-desktop);
  }

  .cards.menu-cards.no-border li {
    border: none;
    border-radius: var(--spacing-0);
  }

  .cards-container:has(.cards.menu-cards) .default-content-wrapper p {
    font-size: var(--text-body-lg-size);
    line-height: var(--text-body-md-line-height);
  }

  .cards.featured-cards.api-featured-cards .featured-cards-primary img {
    width: 100%;
    min-height: var(--cards-featured-primary-image-max-height-dt);
  }

  .cards.featured-cards.api-featured-cards .featured-cards-secondary-item img {
    width: 100%;
    min-height: var(--cards-featured-secondary-image-max-height-dt);
  }
}