/* =========================================================
   Domača stran (landing)
   ========================================================= */

/* --- Uvodna pasica ----------------------------------------------- */
.uvod {
  position: relative; isolation: isolate;
  min-height: clamp(32rem, 50vw, 50rem);
  display: flex; align-items: center;
  padding-block: 4rem calc(var(--val-home) + clamp(2.5rem, 4vw, 4.5rem));
  color: #fff;
}
.uvod__slika { position: absolute; inset: 0; z-index: -1; }
.uvod__slika > img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.uvod__vsebina { display: grid; justify-items: start; gap: 1.25rem; max-width: 50rem; }
.uvod h1 { color: #fff; font-size: var(--fs-h1); text-shadow: 0 2px 18px rgba(120, 40, 0, .35); }
.uvod__gumbi { display: flex; flex-wrap: wrap; gap: .75rem; }
.gumb--svetla-obroba { background: rgba(255, 255, 255, .08); border-color: #fff; color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.gumb--svetla-obroba:hover { background: #fff; color: var(--c-oranzna-temna); }
.uvod__podnaslov { font-size: var(--fs-uvod); text-shadow: 0 1px 12px rgba(120, 40, 0, .45); margin-bottom: .5rem; }

/* Telefon in ozka tablica: besedilo nad fotografijo, fotografija kot samostojen blok.
   Ozadje besedila je levi (zamegljen) del iste fotografije. */
@media (max-width: 900px) {
  .uvod {
    flex-direction: column; align-items: stretch; min-height: 0; padding: 0;
    background: #c9650f url("../img/sekcije/cebelarstvo_orel_banner.webp") 0 0 / auto 44rem no-repeat;
  }
  .uvod > .vsebnik { order: 1; padding-block: 2.5rem 1rem; }
  .uvod__vsebina { gap: 1rem; }
  .uvod__slika { order: 2; position: relative; inset: auto; z-index: 0; aspect-ratio: 1 / 1; margin-top: -1rem; }
  .uvod__slika > img {
    object-position: 100% 45%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%);
            mask-image: linear-gradient(180deg, transparent 0, #000 22%);
  }
}
@media (min-width: 561px) and (max-width: 900px) {
  .uvod__slika { aspect-ratio: 16 / 10; }
}

/* --- Naslov sekcije --------------------------------------------- */
.naslov-sekcije { display: grid; justify-items: center; gap: .6rem; text-align: center; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.naslov-sekcije h2 { font-size: var(--fs-h2); }
.naslov-sekcije p { font-size: var(--fs-uvod); }

/* --- Izbirnik medu ----------------------------------------------- */
.ponudba { padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 4vw, 4rem); scroll-margin-top: 4.5rem; }
.izbirnik { margin-inline: auto; display: grid; gap: clamp(2rem, 4vw, 3.25rem); }
.izbirnik__korak { border: 0; margin: 0; padding: 0; min-width: 0; }
.izbirnik__naslov {
  display: flex; align-items: center; gap: 1.1rem; padding: 0; margin-bottom: 1.25rem;
  font-family: var(--f-naslovi); font-variant-ligatures: none; font-weight: 600; font-size: var(--fs-korak); line-height: 1.1; color: var(--c-naslov);
}
.izbirnik__st {
  flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--c-oranzna-svetla); color: var(--c-naslov);
  font-family: var(--f-besedilo); font-size: 1.125rem; font-weight: 500;
}

/* Vrste – "pill" radio gumbi */
.vrste { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }   /* čez celo širino, poravnano s karticami */
.vrste .izbira { display: grid; }
.izbira { position: relative; }
.izbira input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.vrsta__oznaka {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 3.25rem; padding: .6rem 1rem; border-radius: var(--r-gumb);
  background: var(--c-pill); color: var(--c-naslov); font-size: var(--fs-gumb);
  transition: background-color var(--prehod), color var(--prehod), box-shadow var(--prehod);
  cursor: pointer;
}
.izbira:hover .vrsta__oznaka { background: #f1e3cb; }
.izbira input:checked + .vrsta__oznaka { background: linear-gradient(180deg, #f26a12, #dc5506); color: #fff; box-shadow: 0 6px 16px rgba(220, 85, 6, .28); }
.izbira input:focus-visible + .vrsta__oznaka,
.izbira input:focus-visible + .embalaza__kartica { outline: 3px solid var(--c-zelena); outline-offset: 3px; }

/* Embalaže – kartice. Fotografije se obrežejo le v praznem (prozornem) robu. */
.embalaze { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 2vw, 1.75rem); }
.embalaza__kartica {
  position: relative; height: 100%;
  display: grid; justify-items: center; align-content: start; gap: .15rem;
  padding: 1.1rem .75rem 1.3rem; border-radius: var(--r-kartica);
  background: var(--c-kartica); border: 2px solid #f3eadb;
  text-align: center; cursor: pointer;
  transition: border-color var(--prehod), box-shadow var(--prehod), transform var(--prehod);
}
.izbira:hover .embalaza__kartica { border-color: #f0c89c; }
.embalaza__kartica img { width: min(100%, 9.5rem); aspect-ratio: 3 / 4; object-fit: cover; margin-bottom: .5rem; }
.embalaza__teza { font-family: var(--f-besedilo); font-size: clamp(1.3rem, 1.1rem + .6vw, 1.65rem); font-weight: 600; color: var(--c-naslov); line-height: 1.2; }
.embalaza__opis { color: var(--c-besedilo-blago); font-size: clamp(.95rem, .9rem + .25vw, 1.0625rem); line-height: 1.35; }
.embalaza__kljukica {
  position: absolute; top: .8rem; right: .8rem; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--c-oranzna); color: #fff;
  transform: scale(0); transition: transform var(--prehod);
}
.embalaza__kljukica .ikona { width: 1.1rem; height: 1.1rem; stroke-width: 2.6; }
.izbira input:checked + .embalaza__kartica { border-color: var(--c-oranzna); background: #fffaf3; box-shadow: 0 10px 26px rgba(238, 100, 16, .12); }
.izbira input:checked + .embalaza__kartica .embalaza__kljukica { transform: scale(1); }

/* Izbrani izdelek */
.izdelek {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.izdelek__slika { position: relative; justify-self: end; width: min(100%, 25rem); }
.izdelek__slika::after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 0; height: 5%; z-index: -1;
  background: radial-gradient(closest-side, rgba(63, 30, 8, .22), transparent); filter: blur(4px);
}
.izdelek__slika img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.izdelek__podatki { display: grid; justify-items: start; gap: 1.1rem; max-width: 32rem; }
.izdelek__naziv { font-size: var(--fs-h3); }
.izdelek__naziv .locilo { color: var(--c-naslov); }
/* teža v besedilni pisavi (kot v vizualu: »500 g« z malim g), vedno v isti vrstici */
.izdelek__naziv [data-izdelek-teza] { font-family: var(--f-besedilo); font-weight: 500; font-size: .8em; white-space: nowrap; }
.izdelek__crta { width: 13rem; max-width: 60%; height: 1px; background: linear-gradient(90deg, var(--c-oranzna) 0 35%, var(--c-crta) 35%); }
.izdelek__cena { font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.3rem); font-weight: 600; color: var(--c-oranzna-temna); font-variant-numeric: tabular-nums; line-height: 1.1; }
.izdelek__opis { font-size: clamp(1.125rem, 1.05rem + .3vw, 1.25rem); }
.izdelek__gumbi { display: grid; gap: .75rem; width: 100%; margin-top: .25rem; }
.izdelek__opomba { font-size: var(--fs-majhno); color: var(--c-besedilo-blago); }

/* Brezplačna poštnina – ob odločitvi za nakup, pod gumboma */
.postnina {
  display: flex; align-items: center; gap: .85rem; width: 100%;
  padding: .8rem 1rem; border-radius: var(--r-kartica);
  background: #fdf3e2; border: 1px dashed #efc58c;
  font-size: 1rem; line-height: 1.4; color: var(--c-naslov);
}
.postnina strong { font-weight: 600; color: var(--c-oranzna-temna); }
.postnina__ikona {
  flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--c-oranzna); color: #fff;
}
.postnina__ikona .ikona { width: 1.4rem; height: 1.4rem; stroke-width: 1.8; }

@media (max-width: 760px) {
  .embalaze { gap: .5rem; }
  .embalaza__kartica { padding: .8rem .35rem 1rem; }
  .embalaza__kartica img { width: min(100%, 7rem); }
  .embalaza__teza { font-size: 1.25rem; }
  .embalaza__opis { font-size: .9375rem; }
  .embalaza__kljukica { top: .4rem; right: .4rem; width: 1.6rem; height: 1.6rem; }
  .izdelek { grid-template-columns: 1fr; gap: 1.25rem; }
  .izdelek__slika { justify-self: center; width: min(68%, 17rem); }
  .izdelek__podatki { max-width: none; }
  .vrste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .vrsta__oznaka { padding-inline: .5rem; }
}

/* --- Med brez packanja ------------------------------------------- */
.packanje { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: min(50vw, 54rem); }
.packanje__slika { position: absolute; inset: 0; z-index: -1; }
.packanje__slika > img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.packanje__vsebina { padding-block: calc(var(--val-top) + clamp(3rem, 5vw, 5rem)) calc(var(--val-bottom) + clamp(3rem, 4.5vw, 4.5rem)); }
.packanje__vsebina > div { display: grid; justify-items: start; gap: clamp(.9rem, 1.2vw, 1.25rem); max-width: 36rem; }
.packanje .gumb { margin-top: clamp(0rem, .8vw, .75rem); }
.packanje h2 { font-size: clamp(2.7rem, 1.65rem + 3.95vw, 5.6rem); }
.packanje__uvod { font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); line-height: 1.5; }
.packanje__poudarek {
  font-family: var(--f-naslovi); font-variant-ligatures: none; font-weight: 600; line-height: 1.05;
  font-size: clamp(1.6rem, 1.25rem + 1.1vw, 2.2rem); color: var(--c-oranzna-temna);
}
.prednosti { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.prednosti li {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem .5rem .7rem; border-radius: var(--r-gumb);
  background: rgba(255, 252, 245, .82); border: 1px solid #f0d7b0;
  box-shadow: 0 4px 12px rgba(120, 60, 0, .06);
  font-size: 1rem; font-weight: 500; color: var(--c-naslov); line-height: 1.2;
}
.prednosti .ikona { width: 1.35rem; height: 1.35rem; color: var(--c-oranzna); stroke-width: 1.8; flex: none; }
.packanje__zakljucek { font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); color: var(--c-besedilo-blago); line-height: 1.5; }

/* Telefon: besedilo na svetli podlagi, izdelki v ločenem bloku pod njim */
@media (max-width: 900px) {
  .packanje { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
  .packanje__vsebina { order: 1; padding-block: 1rem 1.5rem; }
  .packanje__slika { order: 2; position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 3; }
  .packanje__slika > img { object-position: 100% 55%; }
}
@media (min-width: 561px) and (max-width: 900px) {
  .packanje__slika { aspect-ratio: 16 / 9; }
}

/* --- O nas (predstavitev) ---------------------------------------- */
.o-nas-uvod { padding-block: var(--sekcija); }
/* besedilo 44rem + fotografija 40rem (640 px), preostanek (~96 px pri 1440) je razmik */
.o-nas-uvod__mreza { display: grid; grid-template-columns: minmax(0, 44rem) minmax(0, 40rem); column-gap: clamp(3rem, 6vw, 6rem); row-gap: 2rem; align-items: center; justify-content: space-between; }
.o-nas-uvod__besedilo { display: grid; justify-items: start; gap: 1.25rem; max-width: 44rem; }
.o-nas-uvod__besedilo p { max-width: 38rem; }
.o-nas-uvod h2 { font-size: clamp(2.3rem, 1.7rem + 2.6vw, 3.9rem); margin-bottom: .25rem; }
.o-nas-uvod p { margin-bottom: .75rem; }
.o-nas-uvod .maska { justify-self: end; }
@media (max-width: 1100px) { .o-nas-uvod__mreza { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 860px) {
  .o-nas-uvod__mreza { grid-template-columns: 1fr; }
  .o-nas-uvod .maska { order: 2; justify-self: center; width: min(85%, 22rem); }
}