/* ============================================================
   Block: dl-detal-products
   Skopiowane z mockupu: segment-detal.html linie 507–668
   ============================================================ */

/* --- Trzy linie detalu (03) --- */
.seg-detal-products{
  background: var(--paper);
  padding: var(--section-y) 0;
}
.detal-products-head{
  display:grid; grid-template-columns: 1fr auto;
  align-items: flex-end; gap: 32px;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.detal-products-title{
  font-family: var(--display); font-weight: 350;
  font-variation-settings: "opsz" 144;
  font-size: clamp(36px, 5vw, 72px); line-height: 1.02;
  letter-spacing: -0.02em; margin: 0; color: var(--ink);
}
.detal-products-title em{ font-style: italic; color: var(--karmel); font-weight: 300; }
.detal-products-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.95fr;
  gap: clamp(18px, 2vw, 32px);
  align-items: stretch;
}

/* Karta A — klasyczny: duża, portrait, ciemny overlay na dole */
.detal-card--a{
  display:flex; flex-direction: column;
  background: var(--cream-100);
  overflow: hidden;
  position: relative;
  min-height: 560px;
}
.detal-card--a .dc-photo{
  flex: 1; position: relative; overflow: hidden; min-height: 320px;
}
.detal-card--a .dc-photo .prod-placeholder{ min-height: 320px; }
.detal-card--a .dc-body{
  padding: clamp(22px, 2.5vw, 32px);
  background: var(--ink);
  color: var(--cream-50);
}
.detal-card--a .dc-name{
  font-family: var(--display); font-style: italic; font-weight: 350;
  font-variation-settings: "opsz" 60;
  font-size: clamp(26px, 2.8vw, 38px); letter-spacing: -0.015em; line-height: 1.1;
  margin: 0 0 10px; color: var(--cream-50);
}
.detal-card--a .dc-desc{
  font-size: 14px; line-height: 1.55; margin: 0 0 20px;
  color: color-mix(in srgb, var(--cream-50) 75%, transparent); max-width: 30ch;
}
.detal-card--a .dc-size{
  font-family: ui-monospace, monospace; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px; display:block;
}
.detal-card--a .dc-cta{
  display:inline-flex; align-items:center; gap: 8px;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); border-bottom: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  padding-bottom: 3px; transition: border-color .25s ease;
}
.detal-card--a .dc-cta:hover{ border-color: var(--gold); }

/* Karta B — kakaowy: kremowy, obramowanie, inset foto */
.detal-card--b{
  display:flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--karmel) 20%, transparent);
  overflow: hidden;
  min-height: 520px;
}
.detal-card--b .dc-photo{
  height: 260px; overflow: hidden;
  background: var(--cream-200);
}
.detal-card--b .dc-photo .prod-placeholder{ min-height: 260px; }
.detal-card--b .dc-body{ padding: clamp(20px, 2.5vw, 28px); flex:1; display:flex; flex-direction:column; justify-content: space-between; }
.detal-card--b .dc-name{
  font-family: var(--display); font-style: italic; font-weight: 350;
  font-variation-settings: "opsz" 60;
  font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.015em; line-height: 1.1;
  margin: 0 0 10px; color: var(--ink);
}
.detal-card--b .dc-desc{ font-size: 14px; line-height: 1.55; color: var(--espresso); margin: 0 0 20px; }
.detal-card--b .dc-size{ font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--karmel); margin-bottom: 14px; display:block; }
.detal-card--b .dc-cta{ display:inline-flex; align-items:center; gap: 8px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--karmel); padding-bottom: 3px; align-self:flex-start; }

/* Karta C — mleko zagęszczone: pionowa, minimalna, z obramowaniem karmel */
.detal-card--c{
  display:flex; flex-direction: column;
  background: var(--cream-50);
  border-left: 3px solid var(--karmel);
  overflow: hidden;
  min-height: 520px;
}
.detal-card--c .dc-photo{
  flex: 1; min-height: 200px; overflow: hidden;
  background: var(--cream-200);
}
.detal-card--c .dc-photo .prod-placeholder{ min-height: 200px; }
.detal-card--c .dc-body{ padding: clamp(20px, 2.5vw, 28px); }
.detal-card--c .dc-name{ font-family: var(--display); font-style: italic; font-weight: 350; font-variation-settings: "opsz" 60; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -0.015em; line-height: 1.1; margin: 0 0 10px; color: var(--ink); }
.detal-card--c .dc-desc{ font-size: 14px; line-height: 1.55; color: var(--espresso); margin: 0 0 20px; }
.detal-card--c .dc-size{ font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--karmel); margin-bottom: 14px; display:block; }
.detal-card--c .dc-cta{ display:inline-flex; align-items:center; gap: 8px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--karmel); border-bottom: 1px solid var(--karmel); padding-bottom: 3px; }

/* Placeholder dla brakujących zdjęć */
.prod-placeholder{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  background: var(--cream-200);
  color: color-mix(in srgb, var(--karmel) 50%, transparent);
}
.prod-placeholder-note{
  font-family: ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.7;
  max-width: 18ch;
}

/* Responsive */
@media (max-width: 1080px){
  .detal-products-grid{ grid-template-columns: 1fr 1fr; }
  .detal-card--c{ grid-column: span 2; flex-direction: row; min-height: 280px; }
  .detal-card--c .dc-photo{ flex: 0 0 40%; min-height: auto; }
  .detal-products-head{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .detal-products-grid{ grid-template-columns: 1fr; }
  .detal-card--c{ grid-column: span 1; flex-direction: column; }
  .detal-card--c .dc-photo{ flex: auto; }
}