/**
 * Featured Promos Section Styles
 *
 * @package BaitAlKaram
 */

.promos {
  padding: clamp(64px, 9vw, 120px) 0 80px;
}

.promos-heading {
  margin-bottom: 36px;
}

.promos-heading p {
  margin: 0 0 6px;
  color: var(--red);
  font-size: 14px;
}

.promos-heading h2 {
  margin: 0;
  font-size: clamp(32px, 3.4vw, 50px);
  font-weight: 600;
  letter-spacing: -1.8px;
}

.promo-grid {
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(320px, 1.05fr);
  grid-template-rows: repeat(2, 290px);
  gap: 20px;
}

.promo-card {
  direction: rtl;
  position: relative;
  overflow: hidden;
  min-height: 0;
  color: #fff;
  background: #262626;
  isolation: isolate;
  border-radius: 6px;
}

.promo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(270deg, rgba(20, 20, 20, 0.85) 0%, rgba(20, 20, 20, 0.45) 50%, rgba(20, 20, 20, 0.05) 80%);
  transition: opacity 0.38s ease;
  pointer-events: none;
}

.promo-card img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.promo-hob {
  grid-column: 1;
  grid-row: 1;
  background: #2a2a2a;
}
.promo-hob img {
  transform: scaleX(-1);
  object-position: center;
}
.promo-hob:hover img {
  transform: scaleX(-1) scale(1.055);
}

.promo-oven {
  grid-column: 1;
  grid-row: 2;
  background: #dedede;
  color: var(--ink);
}
.promo-oven::after {
  background: linear-gradient(270deg, rgba(241, 241, 241, 0.94) 0%, rgba(241, 241, 241, 0.68) 48%, rgba(241, 241, 241, 0.04) 80%);
}
.promo-oven img {
  transform: scaleX(-1);
  object-position: center;
}
.promo-oven:hover img {
  transform: scaleX(-1) scale(1.055);
}

.promo-microwave {
  grid-column: 2;
  grid-row: 1 / span 2;
  background: #202020;
}
.promo-microwave::after {
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.05) 0%, rgba(20, 20, 20, 0.35) 45%, rgba(20, 20, 20, 0.9) 88%);
}
.promo-microwave img {
  object-position: center 25%;
}
.promo-microwave:hover img {
  transform: scale(1.055);
}

.promo-copy {
  position: relative;
  z-index: 2;
  height: 100%;
  width: min(58%, 390px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 34px 36px;
}

.promo-microwave .promo-copy {
  width: 100%;
  justify-content: flex-end;
  padding: 40px 36px;
}

.promo-kicker {
  color: currentColor;
  opacity: 0.78;
  font-size: 12px;
  letter-spacing: 0.5px;
}
.promo-hob .promo-kicker { color: #fff; }

.promo-card h3 {
  margin: 14px 0 auto;
  font-size: clamp(25px, 2.3vw, 34px);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 1.25;
}
.promo-microwave h3 {
  margin: 12px 0 22px;
  font-size: clamp(28px, 2.6vw, 42px);
}

.promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--red);
  font-size: 13px;
  font-weight: 600;
  padding-bottom: 5px;
  border-bottom: 1.5px solid currentColor;
}
.promo-hob .promo-cta, .promo-microwave .promo-cta { color: #fff; }
.promo-cta .jelly-arrow { width: 20px; height: 14px; transition: transform 0.32s ease; }

.promo-card:hover img { transform: scale(1.055); }
.promo-hob:hover img { transform: scaleX(-1) scale(1.055); }
.promo-oven:hover img { transform: scaleX(-1) scale(1.055); }
.promo-card:hover::after { opacity: 0.75; }
.promo-card:hover .promo-cta .jelly-arrow { transform: translateX(-4px); }

@media (max-width: 700px) {
  .promos { padding: 58px 0; }
  .promos-heading { margin-bottom: 28px; }
  .promos-heading p { font-size: 12px; }
  .promos-heading h2 { font-size: 30px; letter-spacing: -1.2px; }
  .promo-grid { grid-template-columns: 1fr; grid-template-rows: 240px 240px 420px; gap: 16px; }
  .promo-hob, .promo-oven, .promo-microwave { grid-column: 1; }
  .promo-hob { grid-row: 1; }
  .promo-oven { grid-row: 2; }
  .promo-microwave { grid-row: 3; }
  .promo-copy { width: 70%; padding: 26px; }
  .promo-microwave .promo-copy { padding: 28px; }
  .promo-card h3 { font-size: 26px; }
  .promo-microwave h3 { font-size: 32px; }
  .promo-microwave img { object-position: center 30%; }
}