/* =========================
   06. SZCZEGÓŁY
   ========================= */
#szczegoly{
  --detailsGridCols:minmax(340px,29vw) minmax(0,1fr);
  --detailsGridRows:auto;
  --detailsMinH:100svh;

  --detailsBodyPad:56px 72px;
  --detailsContentW:min(1120px,100%);

  --detailsTitleSize:clamp(2.45rem,3.8vw,4.25rem);
  --detailsLeadSize:clamp(1.06rem,1.45vw,1.45rem);

  --detailsActionsCols:repeat(4,minmax(0,1fr));
  --detailsActionsGap:22px;
  --detailsActionsTop:56px;
  --detailsActionMinH:168px;
  --detailsActionPad:18px;
  --detailsActionLabelSize:clamp(.92rem,1.05vw,1.16rem);

  --detailsDeadlinesTop:34px;
  --detailsDeadlinesCols:repeat(2,minmax(0,1fr));
  --detailsDeadlinesGap:18px;
  --detailsDeadlinePad:18px 20px;
  --detailsDeadlineDateSize:clamp(1.3rem,1.8vw,1.9rem);
  --detailsDeadlineTextSize:clamp(.98rem,1.05vw,1.08rem);

  background:var(--bgSoft);
  color:var(--text);
  min-height:100svh;
  height:auto;
  overflow:visible;
}

main > section#szczegoly{overflow:visible}

#szczegoly > .container{
  width:100vw;
  max-width:none;
  height:auto;
  margin:0;
  padding:0;
}

#szczegoly .details-grid{
  display:grid;
  grid-template-columns:var(--detailsGridCols);
  grid-template-rows:var(--detailsGridRows);
  align-items:stretch;
  width:100%;
  min-height:var(--detailsMinH);
}

#szczegoly .details-media{
  position:relative;
  min-height:100%;
  overflow:hidden;
}

#szczegoly .details-media-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

#szczegoly .details-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.03) 58%, rgba(0,0,0,0) 100%);
}

#szczegoly .details-body{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100%;
  padding:var(--detailsBodyPad);
}

#szczegoly .details-content{
  width:var(--detailsContentW);
  margin:0 auto;
}

#szczegoly .details-head h2{
  margin:0 0 22px;
  font-family:var(--fontA);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1;
  font-size:var(--detailsTitleSize);
  color:var(--heading);
  white-space:nowrap;
}

#szczegoly .details-lead{
  max-width:980px;
  margin:0;
  font-size:var(--detailsLeadSize);
  line-height:1.38;
  font-weight:400;
  color:var(--text);
}

#szczegoly .details-lead + .details-lead{
  margin-top:8px;
}

#szczegoly .details-actions{
  display:grid;
  grid-template-columns:var(--detailsActionsCols);
  gap:var(--detailsActionsGap);
  align-items:stretch;
  width:100%;
  max-width:1120px;
  margin-top:var(--detailsActionsTop);
}

#szczegoly .details-action{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:var(--detailsActionMinH);
  padding:var(--detailsActionPad);
  border-radius:14px;
  text-align:center;
  background:var(--detailsBtnBg);
  color:var(--detailsBtnText);
  box-shadow:0 14px 30px rgba(98,57,29,.12);
  transition:transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

#szczegoly .details-action:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 36px rgba(98,57,29,.16);
}

#szczegoly .details-action:focus-visible{
  outline:3px solid var(--ringCoffee4);
  outline-offset:4px;
}

#szczegoly .details-action-label{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  width:100%;
  font-family:var(--fontA);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  line-height:1.02;
  font-size:var(--detailsActionLabelSize);
  color:var(--detailsBtnText);
  text-align:center;
}

#szczegoly .details-action-label > span{
  display:block;
  width:100%;
  text-align:center;
}

/* =========================
   06a. TERMINY
   ========================= */
#szczegoly .details-deadlines{
  width:100%;
  max-width:1120px;
  margin-top:var(--detailsDeadlinesTop);
}

#szczegoly .details-deadlines-title{
  margin:0 0 14px;
  font-family:var(--fontA);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:clamp(.95rem,1vw,1.05rem);
  color:rgba(98,57,29,.76);
}

#szczegoly .details-deadlines-grid{
  display:grid;
  grid-template-columns:var(--detailsDeadlinesCols);
  gap:var(--detailsDeadlinesGap);
}

#szczegoly .details-deadline-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:10px;
  min-height:100%;
  padding:var(--detailsDeadlinePad);
  border:1px solid rgba(98,57,29,.12);
  border-radius:18px;
  background:rgba(255,255,255,.62);
  box-shadow:0 10px 24px rgba(98,57,29,.08);
  backdrop-filter:blur(4px);
}

#szczegoly .details-deadline-date{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(98,57,29,.10);
  color:var(--heading);
  font-family:var(--fontA);
  font-weight:800;
  letter-spacing:.08em;
  font-size:var(--detailsDeadlineDateSize);
  line-height:1;
}

#szczegoly .details-deadline-text{
  margin:0;
  font-size:var(--detailsDeadlineTextSize);
  line-height:1.5;
  color:var(--text);
}

/* =========================
   06m. TABLET
   ========================= */
@media (max-width:1200px){
  #szczegoly{
    --detailsGridCols:minmax(280px,32vw) minmax(0,1fr);
    --detailsBodyPad:42px 40px;
    --detailsContentW:min(920px,100%);
    --detailsTitleSize:clamp(2.2rem,4.4vw,3.2rem);
    --detailsLeadSize:clamp(1rem,1.8vw,1.2rem);

    --detailsActionsCols:repeat(2,minmax(0,1fr));
    --detailsActionsGap:18px;
    --detailsActionsTop:34px;
    --detailsActionMinH:146px;
    --detailsActionLabelSize:clamp(.95rem,1.5vw,1.1rem);

    --detailsDeadlinesTop:26px;
    --detailsDeadlinesGap:14px;
    --detailsDeadlinePad:16px 18px;
    --detailsDeadlineTextSize:1rem;
  }

  #szczegoly .details-head h2{
    white-space:normal;
  }

  #szczegoly .details-actions,
  #szczegoly .details-deadlines{
    max-width:860px;
  }
}

/* =========================
   06m. MOBILE
   ========================= */
@media (max-width:900px){
  #szczegoly{
    --detailsGridCols:1fr;
    --detailsGridRows:42vh auto;
    --detailsMinH:auto;
    --detailsBodyPad:26px 18px 30px;
    --detailsTitleSize:clamp(2rem,8vw,2.7rem);
    --detailsLeadSize:1rem;

    --detailsActionsCols:1fr;
    --detailsActionsGap:14px;
    --detailsActionsTop:24px;
    --detailsActionMinH:132px;
    --detailsActionPad:16px 14px;
    --detailsActionLabelSize:1.08rem;

    --detailsDeadlinesCols:1fr;
    --detailsDeadlinesTop:20px;
    --detailsDeadlinesGap:12px;
    --detailsDeadlinePad:16px 16px;
    --detailsDeadlineDateSize:1.15rem;
    --detailsDeadlineTextSize:.98rem;
  }

  #szczegoly{
    min-height:auto;
  }

  #szczegoly > .container{
    width:100%;
  }

  #szczegoly .details-media{
    min-height:42vh;
  }

  #szczegoly .details-body{
    min-height:auto;
    justify-content:flex-start;
  }

  #szczegoly .details-content{
    width:100%;
  }

  #szczegoly .details-head h2{
    margin-bottom:14px;
    line-height:1.02;
    white-space:normal;
  }

  #szczegoly .details-lead{
    line-height:1.42;
  }
}

@media (max-width:520px){
  #szczegoly{
    --detailsGridRows:34vh auto;
    --detailsBodyPad:22px 14px 26px;
    --detailsTitleSize:clamp(1.75rem,8.5vw,2.2rem);
    --detailsLeadSize:.96rem;
    --detailsActionMinH:118px;
    --detailsActionLabelSize:1rem;

    --detailsDeadlinePad:14px 14px;
    --detailsDeadlineDateSize:1.05rem;
    --detailsDeadlineTextSize:.95rem;
  }

  #szczegoly .details-media{
    min-height:34vh;
  }

  #szczegoly .details-action-label{
    letter-spacing:.04em;
  }
}

@media (prefers-reduced-motion:reduce){
  #szczegoly .details-action{transition:none}
  #szczegoly .details-action:hover{transform:none}
}