/* =====================================================
   FINCHI – Featured (Kiemelt termékek)
   Offer.css designrendszerhez igazítva
   ===================================================== */

.featured {
  position: relative;
  padding: 88px 0;
  overflow: hidden;
}

/* háttér */
.featured-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.featured-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* overlay – sötétebb, mint offer */
.featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.42) 45%,
      rgba(0, 0, 0, 0.55) 100%
    );
  z-index: 1;
}

.featured > .container {
  position: relative;
  z-index: 2;
}

/* header */
.featured-head {
  text-align: center;
  margin-bottom: 28px;
}

.featured-title {
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.featured-subtitle {
  margin-top: 10px;
  color: rgba(255,255,255,0.85);
  font-size: 15px;
  line-height: 1.55;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

/* cards grid */
.featured-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* tablet */
@media (min-width: 768px) {
  .featured-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

/* desktop */
@media (min-width: 1024px) {
  .featured-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}

/* card – megegyezik az offer-card filozófiával */
.featured-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(18, 18, 18, 0.08);
  border-radius: 18px;
  overflow: hidden;

  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.12),
    0 2px 10px rgba(0, 0, 0, 0.06);

  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease,
    background 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .featured-card:hover {
    transform: translateY(-3px);
    background: #ffffff;
    border-color: rgba(217, 176, 116, 0.32);
    box-shadow:
      0 18px 46px rgba(0, 0, 0, 0.16),
      0 6px 16px rgba(0, 0, 0, 0.08);
  }
}

/* image */
.featured-card-media {
  position: relative;
  height: 150px;
  background: #eee8de;
}

.featured-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* badge */
.featured-badge {
  position: absolute;
  top: 12px;
  left: 12px;

  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;

  background: #ffffff;
  color: #121212;
  border: 1px solid rgba(18,18,18,0.1);

  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

/* body */
.featured-card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.featured-card-title {
  font-size: 18px;
  font-weight: 650;
  color: #121212;
}

/* footer row */
.featured-card-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.featured-price {
  font-size: 16px;
  font-weight: 800;
  color: #121212;
}

/* button – az offer-product-add logikáját követi */
.featured-add {
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;

  border: 1px solid rgba(0,0,0,0.12);
  background: #121212;
  color: #ffffff;

  cursor: pointer;
  transition: transform 180ms ease, filter 180ms ease;
}

.featured-add:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}

.featured-add:active {
  transform: translateY(0);
}


/* =========================
   FEATURED (Kiemelt termékek)
   - háttér a szekció mögött
   - kártyák rajta, mint az Offer-ben
   ========================= */

.featured {
  position: relative;
  padding: 64px 0;
  background-image: url("assets/images/kiemelt/kiemelt_bg_mobile_900x1200.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Sötét overlay a háttérre (olvashatóság) */
.featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.58) 45%,
    rgba(0,0,0,0.72) 100%
  );
  z-index: 0;
}

/* Minden tartalom az overlay fölött */
.featured .container {
  position: relative;
  z-index: 1;
}

/* Head */
.featured-head {
  margin-bottom: 18px;
}

.featured-title {
  margin: 0 0 10px 0;
}

.featured-subtitle {
  margin: 0;
  opacity: 0.9;
  max-width: 62ch;
}

/* Grid: ugyanaz a ritmus, mint a kínálat kártyáknál */
.featured-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 22px;
}

/* Ha a kiemelt kártyák ugyanazt az "offer-card" markupot használják,
   akkor elég ezeket a belső részeket egységesíteni. */
.featured .offer-card,
.featured-card {
  border-radius: 18px;
  overflow: hidden;
}

/* Egységes kép-magasság, hogy a gomb/ár mindig egy vonalban legyen */
.featured .offer-card-media,
.featured-card-media {
  width: 100%;
  height: 220px;            /* mobil */
}

.featured .offer-card-media img,
.featured-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Badge (ha van) */
.featured-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

/* Tablet */
@media (min-width: 768px) {
  .featured {
    padding: 76px 0;
    background-image: url("assets/images/kiemelt/kiemelt_bg_tablet_1200x900.webp");
    background-position: center;
  }

  .featured-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .featured .offer-card-media,
  .featured-card-media {
    height: 240px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .featured {
    padding: 88px 0;
    background-image: url("assets/images/kiemelt/kiemelt_bg_desktop_1920x900.webp");
  }

  .featured-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }

  .featured .offer-card-media,
  .featured-card-media {
    height: 260px;
  }
}


/* =========================
   VISUAL TUNING (featured)
   ========================= */
.featured-card, .featured-item, .featured-product{
  border-radius: var(--finchi-radius-lg);
  border-color: rgba(255,255,255,.12);
  box-shadow: var(--finchi-shadow-1);
}
.featured-card:hover, .featured-item:hover, .featured-product:hover{
  transform: translateY(-3px);
  border-color: rgba(214,181,106,.28);
  box-shadow: var(--finchi-shadow-2);
}


/* =====================================================
   Stock sync (sold out state)
   - Used by js/stock-sync.js
===================================================== */
.featured-card.is-soldout .featured-card-media img,
.featured-card-media.is-soldout img {
  filter: grayscale(1) contrast(1.05);
  opacity: 0.72;
}

.featured-card .finchi-soldout-badge {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 6;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #ffffff;
  background: rgba(18, 18, 18, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.featured-card-media {
  position: relative;
}

button.is-soldout {
  cursor: not-allowed;
}