/* ---------- CARD GRID ---------- */
.special-list .list-specials,
.special-detail-page .list-specials {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 28px;
}

.special-list .row-list-specials {
  display: grid;
}

/* ---------- CARD ---------- */
.wrap-card-special {
  max-width: none;
}

.spc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.08);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  height: 100%;
}

.spc-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.10);
  transform: translateY(-3px);
}

/* ---------- CARD IMAGE ---------- */
.spc-card__image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 8;
  background: #e8eaed;
}

.spc-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* subtle overlay on image */
.spc-card__image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.22);
  pointer-events: none;
}

.spc-card__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 16px;
  font-family: Inter, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  background: rgba(62,176,73,0.65);
  border-radius: 100px;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 2;
}

/* ---------- CARD BODY ---------- */
.spc-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* Top pad sets the gap under the valid-dates strip. The brand row adds a few
     px of its own on top of this, since its 36px min-height is taller than the
     28px logo cap and centres the logo in the difference.
     Bottom pad is the gap between the actions and the footer strip below, which
     is a sibling now rather than a child. */
  padding: 14px 24px 20px;
}

/* ---------- VALID DATES STRIP ---------- */
/* Full-width band between the photo and the body, replacing the pill that used
   to sit in the brand row. Side padding matches the body so the text lines up
   with the title below it. Micro-label type: smaller and wider-tracked than a
   kicker, since it labels the card rather than announcing a section. */
.spc-card__valid {
  background: var(--brand-primary);
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 24px;
}

/* Brand logo row — sits at top of body. Only renders when the special carries a
   logo, so the row cannot leave an empty 36px gap now that the dates have moved
   out of it. */
.spc-card__brand-row {
  display: flex;
  align-items: center;
  min-height: 36px;
  margin-bottom: 10px;
}

/* Stays under the brand row's 36px min-height, so growing it does not move the
   title below or change the card height. */
.spc-card__brand-logo {
  max-height: 31px;
  max-width: 120px;
  object-fit: contain;
}

.spc-card__title {
  font-family: Inter, sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--brand-primary);
  line-height: 1.2;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* subTitle is the offer line, shortDescription the supporting detail. The two are
   separated by size and color rather than weight: at nearly the same size, a
   weight change reads as emphasis inside one paragraph instead of as two
   different fields. With the title now blue, this is the only near-black text in
   the body, so it owns that role.
   The 14px bottom margin is the break between the two blocks. */
.spc-card__subtitle {
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.45;
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Genuinely muted and a clear step smaller, so it reads as detail under the
   offer line rather than competing with it. */
.spc-card__desc {
  font-family: Inter, sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  color: #6b7280;
  line-height: 1.55;
  margin: 0 0 20px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  flex: 1;
}

/* ---------- CARD ACTIONS ---------- */
.spc-card__actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
}

.spc-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  font-family: Inter, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  text-align: center;
}

/* Green primary, solid blue secondary, matching the site button pairing. Fills
   come from the same tokens .btn-cta-green and .btn-cta-blue-solid use, so the
   card buttons stay in step with them; only the card's tighter size is local. */
.spc-card__btn--primary {
  background: var(--brand-secondary-cta);
  color: #fff !important;
}

.spc-card__btn--primary:hover {
  background: var(--brand-secondary-cta-hover);
  color: #fff !important;
  text-decoration: none;
}

.spc-card__btn--secondary {
  background: var(--brand-primary);
  color: #fff !important;
}

.spc-card__btn--secondary:hover {
  background: var(--brand-primary-hover);
  color: #fff !important;
  text-decoration: none;
}

.spc-card__btn:focus-visible {
  outline: 2px solid #1D4288;
  outline-offset: 2px;
}

/* ---------- CARD FOOTER ---------- */
/* Sibling of .spc-card__body, not a child, so it spans the card on its own
   padding with no negative margins reaching back through the body's gutters.
   The body carries flex: 1, so this sits flush at the bottom and the strips line
   up across cards of differing content height. Symmetric padding centres the
   row. */
.spc-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
  background: #f8f9fa;
}

.spc-card__terms {
  background: none;
  border: none;
  padding: 0;
  font-family: Inter, sans-serif;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--brand-primary);
  cursor: pointer;
  /* Underlined at rest. At 0.6 opacity with no underline it read as disabled
     text rather than a control. */
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}

.spc-card__terms:hover {
  opacity: 1;
}

.spc-card__terms:focus-visible {
  opacity: 1;
  outline: 2px solid #1D4288;
  outline-offset: 2px;
}

/* The logo is the tallest thing in the footer, so it sets the strip height. It
   grew by exactly what the strip's vertical padding gave up (22 -> 28 against
   11 -> 8), leaving the strip the same 44px tall. max-width is raised past what
   the mark needs at this height so the height cap stays the governing one. */
.spc-card__small-logo {
  max-height: 28px;
  max-width: 100px;
  object-fit: contain;
}

/* Opens directly beneath the footer strip and carries the same tint, so the two
   read as one foot area with a hairline between them. Was an inset rounded panel
   back when it sat inside the body padding. */
.spc-card__terms-body {
  padding: 12px 24px 14px;
  background: #f8f9fa;
  border-top: 1px solid #eceef1;
  font-family: Inter, sans-serif;
  font-size: 0.76rem;
  line-height: 1.6;
  color: #555;
}

/* ---------- MODAL ---------- */
.spc-card-modal .modal-dialog {
  max-width: 560px;
}

.spc-card-modal .modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid #eee;
}

.spc-card-modal .modal-header img {
  cursor: pointer;
  width: 20px;
  height: 20px;
}

.spc-card-modal .modal-title {
  font-family: Inter, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1D4288;
  margin: 0;
}

.spc-card-modal .modal-body {
  padding: 24px;
  font-family: Inter, sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #333;
}

.spc-card-modal .modal-footer {
  padding: 12px 24px 20px;
  border-top: none;
}

.spc-card-modal .close-button-modal {
  background: #fff;
  border: 1.5px solid #1D4288;
  border-radius: 10px;
  padding: 10px 28px;
  font-family: Inter, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1D4288;
  cursor: pointer;
  transition: all 0.15s ease;
}

.spc-card-modal .close-button-modal:hover {
  background: rgba(29,66,136,0.06);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  .special-list .list-specials,
  .special-detail-page .list-specials {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .spc-card__body {
    padding: 12px 20px 18px;
  }

  /* Side padding tracks the body's narrower mobile gutter so the strip content
     stays aligned with the title above it. */
  .spc-card__valid,
  .spc-card__footer,
  .spc-card__terms-body {
    padding-left: 20px;
    padding-right: 20px;
  }

  .spc-card__title {
    font-size: 1.15rem;
  }

  .spc-card__actions {
    flex-direction: column;
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  .special-list .list-specials,
  .special-detail-page .list-specials {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .special-list .list-specials,
  .special-detail-page .list-specials {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- DETAIL PAGE OVERRIDES ---------- */
.spc-card--detail {
  flex-direction: row;
  border-radius: 16px;
  max-width: none;
}

.spc-card--detail .spc-card__image-wrap {
  flex: 0 0 45%;
  aspect-ratio: auto;
  min-height: 360px;
}

.spc-card--detail .spc-card__body {
  padding: 28px 32px;
}

.spc-card--detail .spc-card__title {
  font-size: 1.6rem;
  -webkit-line-clamp: unset;
}

.spc-card--detail .spc-card__subtitle {
  -webkit-line-clamp: unset;
}

.spc-card--detail .spc-card__desc {
  -webkit-line-clamp: unset;
}

@media (max-width: 992px) {
  .spc-card--detail {
    flex-direction: column;
  }

  .spc-card--detail .spc-card__image-wrap {
    flex: none;
    aspect-ratio: 16 / 10;
    min-height: auto;
  }
}