/* =========================================================
   HOMEPAGE.CSS — clean single-source layout + spacing
   ========================================================= */

/* ========== HERO (FULL-WIDTH WOOD, iOS-safe layers) ========== */
.hero{
  position: relative;
  background: #fff;            /* fallback */
  color: #3f4447;
  padding: 52px 16px 28px;
  text-align: center;          /* KEY: iOS bug workaround */
}

/* LAYER 1: DRVO (iza svega) */
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image: url("/assets/img/ui/wood-hero.webp");
  background-repeat: no-repeat;
  background-position: center bottom;

  /* stabilno na iOS-u: cover (ne “nestaje” kao kad je na elementu) */
  background-size: cover;

  /* po želji: malo tamnije/vidljivije */
  opacity: 1;
}

/* LAYER 2: PRIRODNI FADE NA DNU U BIJELO */
.hero::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 130px;
  z-index: 1;
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.55) 55%,
    rgba(255,255,255,1) 100%
  );
}

/* sadržaj iznad layera */
.hero__inner,
.hero__extras,
.hero__ctaRow{
  position: relative;
  z-index: 2;
}

.hero__inner{
  max-width: 720px;
  margin: 0 auto;
}

/* H1 (efekt + fade-in) */
.hero__title.hero__title--fx{
  margin: 0 0 14px;
  font-weight: 900;
  letter-spacing: -0.03em;

  font-size: clamp(3.05rem, 10vw, 3.55rem);
  line-height: 1.02;

  background: linear-gradient(135deg, #3f4447 0%, #6a6f74 45%, #3f4447 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  animation: h1FadeIn .5s ease-out both;
  text-wrap: balance;
}

@keyframes h1FadeIn{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* lead */
.hero__lead{
  margin: 0;
  color: #6b6f73;
  font-size: clamp(1.18rem, 2.7vw, 1.48rem);
  line-height: 1.7;
}

/* chips (tag look, not buttons) */
.hero__extras{ margin-top: 16px; }

.hero__chips{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.chip{
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;

  color: #6b6f73;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .1px;

  display: inline-flex;
  align-items: center;
}

.chip + .chip::before{
  content: "•";
  margin-right: 10px;
  color: rgba(63,68,71,0.30);
}

/* CTA row */
.hero__ctaRow{
  width: 100%;
  text-align: center;
  margin-top: 16px;
}

.hero__ctaRow a{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 46px;
  padding: 0 18px;
  border-radius: 14px;

  background: var(--brand);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,0.16);

  box-shadow: 0 10px 24px rgba(0,0,0,0.10);

  opacity: 0;
  animation: ctaFadeIn .45s ease-out both;
  animation-delay: .18s;

  transition: transform .15s ease, opacity .2s ease;
}

@keyframes ctaFadeIn{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}

.hero__ctaRow a:hover{ transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce){
  .hero__title.hero__title--fx{ animation: none; }
  .hero__ctaRow a{ animation: none; opacity: 1; }
}

/* desktop sizing */
@media (min-width: 900px){
  .hero{
    padding: 62px 16px 34px;
  }
  .hero__title.hero__title--fx{
    font-size: clamp(3.25rem, 6vw, 4.35rem);
  }
}

/* mobile tuning (ne diramo background više!) */
@media (max-width: 480px){
  .hero{
    padding: 44px 12px 22px;
  }
  .hero__lead{
    font-size: 1.12rem;
    line-height: 1.55;
  }
  .hero__chips{
    gap: 8px;
    margin-top: 10px;
  }
  .chip{ font-size: 0.98rem; }
  .hero__ctaRow{
    margin-top: 12px;
  }
  .hero__ctaRow a{
    height: 44px;
    padding: 0 16px;
  }
}

/* ========== ABOUT SOVA ========== */
.about-sova{
  background: #ffffff;
  padding: 56px 16px 34px;
}

.about-sova__inner{
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.about-sova__title{
  margin: 0 0 18px;
  font-size: clamp(1.9rem, 5vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #3f4447;
}

.about-sova__text{
  margin: 0 0 14px;
  font-size: 1.15rem;
  line-height: 1.7;
  color: #5f6468;
}

.about-sova__cta{
  margin: 10px 0 28px;
  font-size: 1.15rem;
  font-weight: 800;
  color: #3f4447;
}

.about-sova__imageWrap{
  border-radius: 20px;
  overflow: hidden;
}

.about-sova__imageWrap img{
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 900px){
  .about-sova{
    padding: 84px 16px 46px;
  }
  .about-sova__imageWrap{
    border-radius: 26px;
  }
}

/* ========== PARTY (card) ========== */
.party{
  position: relative;
  background: var(--brand);
  color: #fff;

  padding: 40px 16px;
  margin: 36px 16px;
  border-radius: 22px;

  box-shadow: 0 10px 26px rgba(0,0,0,0.16);
  overflow: hidden; /* KLJUČNO za fade */
}

.party__inner{
  max-width: 1140px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.party__title{
  margin: 0 0 10px;
  text-align: left;
  font-weight: 900;
  font-size: clamp(1.8rem, 4.4vw, 2.35rem);
  letter-spacing: -0.015em;
  color: #fff;
}

.party__newline{ display: inline; }
@media (min-width: 900px){
  .party__newline{
    display: block;
    margin-top: 6px;
  }
}

.party__row{
  display: grid;
  gap: 22px;
  align-items: center;
}

.party__media{ margin: 0; }
.party__media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

.party__copy{
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.party__text{
  margin: 0;
  color: rgba(255,255,255,0.92);
  font-size: clamp(1.05rem, 2.2vw, 1.22rem);
  line-height: 1.55;
  font-weight: 650;
}

.party__copy .party__text:not(:last-child){
  margin-bottom: 36px;
}

.party__text--spaced::after{
  content: "";
  display: block;
  width: 72px;
  height: 2px;
  margin: 28px auto 0;
  background: rgba(255,255,255,0.35);
  border-radius: 2px;
}

.party__text--cta{
  font-weight: 850;
  color: #fff;
}

@media (min-width: 900px){
  .party{
    padding: 52px 24px;
    margin: 54px auto;
    max-width: 1180px;
  }

  .party__row{
    grid-template-columns: 1.15fr 1.2fr 1.15fr;
    gap: 26px;
  }

  .party__media--drinks{ order: 1; }
  .party__copy{ order: 2; }
  .party__media--food{ order: 3; }

  .party__copy{ max-width: 760px; }

  .party__copy .party__text:not(:last-child){
    margin-bottom: 44px;
  }

  .party__text--spaced::after{
    margin-top: 34px;
    width: 84px;
  }
}

@media (prefers-reduced-motion: reduce){
  .party{ box-shadow: none; }
}
/* ========== DINNER (same structure as party, NO card, white bg) ========== */
.dinner{
  background: #fff;
  color: #3f4447;
  padding: 0 16px;          /* da prati layout */
  margin: 36px 0;           /* uniformni razmak između sekcija */
}

.dinner__inner{
  max-width: 1140px;
  margin: 0 auto;
}

.dinner__title{
  margin: 0 0 14px;
  text-align: left;
  font-weight: 900;
  font-size: clamp(1.8rem, 4.4vw, 2.35rem);
  letter-spacing: -0.015em;
  color: #3f4447;
}

.dinner__row{
  display: grid;
  gap: 22px;
  align-items: center;
}

.dinner__media{ margin: 0; }

.dinner__media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

.dinner__copy{
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.dinner__text{
  margin: 0;
  color: #5f6468;
  font-size: clamp(1.05rem, 2.2vw, 1.18rem);
  line-height: 1.55;
  font-weight: 650;
}

/* veliki razmak između paragrafa (ne između linija) */
.dinner__copy .dinner__text:not(:last-child){
  margin-bottom: 28px;
}

/* separator nakon 2. paragrafa */
.dinner__text--spaced::after{
  content: "";
  display: block;
  width: 72px;
  height: 2px;
  margin: 22px auto 0;
  background: rgba(63,68,71,0.18);
  border-radius: 2px;
}

/* zadnji paragraf jači */
.dinner__text--cta{
  font-weight: 850;
  color: #3f4447;
}

/* Desktop: WINE | TEXT | FOOD (isti ritam kao party) */
@media (min-width: 900px){
  .dinner{
    margin: 54px 0;
  }

  .dinner__row{
    grid-template-columns: 1.15fr 1.2fr 1.15fr;
    gap: 26px;
  }

  .dinner__media--wine{ order: 1; }
  .dinner__copy{ order: 2; }
  .dinner__media--food{ order: 3; }

  .dinner__copy{ max-width: 760px; }

  .dinner__copy .dinner__text:not(:last-child){
    margin-bottom: 34px;
  }

  .dinner__text--spaced::after{
    width: 84px;
    margin-top: 26px;
  }
}
/* ========== OFFERS ========== */
.offers{
  background: #ffffff;
  margin-top: 0;
  padding: 24px 16px 56px;
}

.offers__inner{
  max-width: 1100px;
  margin: 0 auto;
}

.offers__title{
  margin: 0 0 16px;
  font-size: 1.35rem;
  font-weight: 900;
  color: #3f4447;
  letter-spacing: -0.01em;
  text-align: center;
}

.offers__grid{
  display: grid;
  gap: 16px;
}

.offer{
  background: var(--brand);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
}

.offer__media{ position: relative; }

.offer__img{
  width: 100%;
  height: auto;
  display: block;
}

.offer__validBanner{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  padding: 10px 12px;
  background: rgba(220, 35, 35, 0.62);
  color: #fff;

  font-weight: 900;
  font-size: 1.02rem;
  letter-spacing: .2px;

  text-shadow: 0 1px 2px rgba(0,0,0,0.35);

  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.offer__validBanner time{ color: inherit; }

.offer__body{
  padding: 16px 16px 18px;
}

.offer__h{
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 900;
  color: #fff;
}

.offer__p{
  margin: 0 0 10px;
  color: rgba(255,255,255,0.92);
  line-height: 1.6;
}

.offer__cta{
  display: inline-flex;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

@media (min-width: 900px){
  .offers{
    padding: 30px 16px 70px;
  }
  .offers__grid{
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}
/* === DINNER: images slightly smaller than party === */
.dinner__media{
  transform: scale(0.88);
}

/* da ostane centrirano */
.dinner__media{
  transform-origin: center;
}