/* ============================================================
   SECTION 3 — ZADATAK (Mijenjamo čitav odjel)
   ============================================================ */

/* ── SECTION WRAPPER ── */
.section-zadatak {
  background: #f6f6f6;
  height: auto;
  padding-bottom: 140px;
  margin: 0 auto;
  padding-top: 80px;
  overflow: hidden;
}

/* ── TAG BUTTON ── */
.zadatak__tag {
  display: block;
  width: fit-content;
  margin: 0 auto 30px;
  font-family: var(--font-mont);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-default);
  color: #ffffff;
  background: #111111;
  border: none;
  border-radius: 5px;
  padding: 12px 25px;
  white-space: nowrap;
  cursor: default;
  line-height: 1;
}

/* ── MAIN HEADING ── */
.zadatak__heading {
  margin: 30px 0 0 0;
  padding: 0;
  font-weight: var(--fw-regular);
}

.zadatak__heading-line {
  display: block;
}

.zadatak__heading-line .h2-mont {
  font-family: var(--font-mont);
  font-size: var(--fs-h2-mont);
  font-weight: 400;
  line-height: var(--lh-h2-mont);
  letter-spacing: -0.07em;
  color: #111111;
}

.zadatak__heading-line .h2-dutch {
  font-family: var(--font-dutch);
  font-size: var(--fs-h2-dutch);
  font-weight: 400;
  font-style: italic;
  line-height: var(--lh-h2-mont);
  letter-spacing: var(--ls-default);
  color: #111111;
}

.h2-anchor {
  font-family: var(--font-mont);
  font-size: var(--fs-h2-mont);
  font-weight: var(--fw-regular);
  line-height: var(--lh-h2-mont);
  color: transparent;
  user-select: none;
  pointer-events: none;
  width: 0;
  overflow: hidden;
  display: inline-block;
}

/* ── SUB TEXT (section level) ── */
.zadatak__sub {
  margin: 50px 0 0 0;
  font-family: var(--font-mont);
  font-size: calc(var(--fs-p) * 0.96);
  font-weight: var(--fw-regular);
  line-height: var(--lh-p);
  letter-spacing: var(--ls-default);
  color: #555555;
  max-width: var(--max-content);
  opacity: 0.9;
}

/* ══════════════════════════════════════════════════════
   THREE BOXES
   ══════════════════════════════════════════════════════ */

.zadatak__boxes {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  margin-top: 70px;
  width: 100%;
}

.zadatak__box {
  position: relative;
  flex-shrink: 0;
  width: 448px;
  height: 290px;
  border-radius: 12px;
  box-sizing: border-box;
  overflow: hidden;
}

.zadatak__box--1 { background: #565758; margin-top: 0; }
.zadatak__box--2 { background: #79659b; margin-top: 0; }
.zadatak__box--3 { background: #a48a44; margin-top: 0; }

/* ── CORNER BUTTON — stays top right always ── */
.box__corner-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  background: #ffffff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  flex-shrink: 0;
  transition: background-color 0.3s ease;
  text-decoration: none;
}

.box__corner-btn svg {
  width: 15.1px;
  height: 15.1px;
  transition: stroke 0.3s ease;
}

.box__corner-btn:hover {
  background: #111111;
}

.box__corner-btn:hover svg {
  stroke: #ffffff;
}

/* ── BOX BODY — anchored to bottom, slides up on hover ── */
.box__body {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

/* Hover translate set per-box by JS via --slide variable */
.zadatak__box:hover .box__body {
  transform: translateY(var(--slide, -65px));
}

/* ── BOX SUB TEXT — absolute, takes zero flow space in box__body ── */
.box__sub {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  font-family: var(--font-mont);
  font-size: 13.9px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-default);
  color: #ffffff;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(12px);
  z-index: 2;
  transition: opacity 0.35s ease 0.05s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
}

.zadatak__box:hover .box__sub {
  opacity: 1;
  transform: translateY(0);
} */
.box__overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  pointer-events: none;
  z-index: 1;
  opacity: 0.1;
}

/* ── BOX HEADER — Mont only ── */
.box__header {
  display: block;
  font-family: var(--font-mont);
  font-size: 33.3px;
  font-weight: 500;
  letter-spacing: var(--ls-default);
  color: #ffffff;
  line-height: 1.05;
}

/* ── SMALL TAGS — 26px gap from header ── */
/* Combined 10% smaller overall + top/bottom 10% smaller:
   font: 12 × 0.9 = 10.8px
   padding: top/bottom 10 × 0.9 × 0.9 = 8.1≈8px, sides 11 × 0.9 = 9.9≈10px
   bg: 0.16 × 0.8 = 0.128 ≈ 0.13 (20% more transparent)
*/
.box__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
}

.box__tag {
  display: inline-block;
  font-family: var(--font-mont);
  font-size: 10.8px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-default);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  padding: 8px 10px;
  border-radius: 999px;
  line-height: 1.4;
  transition: background-color 0.25s ease;
}

.box__tag:hover {
  background: rgba(255, 255, 255, 0.23);
}



/* ============================================================
   SECTION 3 ANIMATIONS
   Text: fade in (fast)
   Boxes: fade up (slower, staggered)
   Triggered by JS adding .anim-visible to .section-zadatak
   ============================================================ */

.section-zadatak.will-animate .zadatak__tag,
.section-zadatak.will-animate .zadatak__heading,
.section-zadatak.will-animate .zadatak__sub {
  opacity: 0;
  transition: opacity 1s ease-out;
}

.section-zadatak.will-animate .zadatak__box {
  opacity: 0;
  transform: translateY(40px) /* preserve stair margin-top */;
  transition: opacity 1.6s ease-out, transform 1.6s ease-out;
}

.section-zadatak.anim-visible .zadatak__tag {
  opacity: 1;
}

.section-zadatak.anim-visible .zadatak__heading {
  opacity: 1;
  transition-delay: 0.1s;
}

.section-zadatak.anim-visible .zadatak__sub {
  opacity: 1;
  transition-delay: 0.18s;
}

/* Boxes stagger */
.section-zadatak.anim-visible .zadatak__box--1 { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.section-zadatak.anim-visible .zadatak__box--2 { opacity: 1; transform: translateY(0); transition-delay: 0.32s; }
.section-zadatak.anim-visible .zadatak__box--3 { opacity: 1; transform: translateY(0); transition-delay: 0.44s; }

/* Text layers always above overlay */
.box__corner-btn { z-index: 3; }
.box__body       { z-index: 2; }
.box__sub        { z-index: 2; }

/* ── BOX LABEL — top left, vertically centered with corner button ── */
.box__label {
  position: absolute;
  top: 20px;
  left: 20px;
  height: 30px;
  display: flex;
  align-items: center;
  font-family: var(--font-mont);
  font-size: 14.3px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-default);
  text-transform: none;
  color: #ffffff;
  z-index: 2;
  white-space: nowrap;
}

/* ── BOX IMAGE — centered over box ── */
.box__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  z-index: 0;
}


/* ── BACKGROUND SHADOW BOXES ── */
.zadatak__boxes {
  position: relative;
}

/* Shadow box 1 — 250×150px, 50px left of box 1, 70px below box 1 top */
/* Box 1 visual left ≈ 265px from viewport. Shadow starts at 265-50=215px */
.zadatak__shadow--1 {
  position: absolute;
  width: 250px;
  height: 150px;
  background: #ececec;
  border-radius: 12px;
  left: calc(265px - 50px);   /* 215px from left edge of viewport */
  top: 70px;
  z-index: -1;
}

/* Shadow box 2 — 350×200px, 180px right from start of box 3, 90px above box 3 top */
/* Box 3 visual left ≈ 265 + 450 + 20 + 450 + 20 = 1205px. Shadow at 1205+180=1385px */
/* Box 3 top = 40px (margin-top stair). Shadow top = 40 - 90 = -50px */
.zadatak__shadow--2 {
  position: absolute;
  width: 350px;
  height: 200px;
  background: #ececec;
  border-radius: 12px;
  left: calc(265px + 450px + 20px + 450px + 20px + 180px); /* 1385px */
  top: -50px;
  z-index: -1;
}

/* ── TESTING: centre heading and sub text ── */
.zadatak__heading {
  text-align: center;
}

.zadatak__sub {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* tag centered via display:flex on section */