/*
 * Tailwind spacing & layout utilities — AI-generoitujen sectioneiden tueksi.
 * Kattaa py/pt/pb/mt/mb/my/gap/grid arvot joita ei ole Tailwind-bundlessa
 * mutta joita AI tyypillisesti käyttää.
 * Syntaksi: calc(var(--spacing) * N) — sama kuin Tailwind 4 bundle.
 */

/* ==========================================================================
   PADDING
   ========================================================================== */

/* ----- py (padding-block) ----- */
.py-12{padding-block:calc(var(--spacing)*12)}
.py-24{padding-block:calc(var(--spacing)*24)}
.py-28{padding-block:calc(var(--spacing)*28)}
.py-32{padding-block:calc(var(--spacing)*32)}
.py-36{padding-block:calc(var(--spacing)*36)}
.py-44{padding-block:calc(var(--spacing)*44)}
.py-48{padding-block:calc(var(--spacing)*48)}
.py-52{padding-block:calc(var(--spacing)*52)}
.py-56{padding-block:calc(var(--spacing)*56)}
.py-64{padding-block:calc(var(--spacing)*64)}
.py-72{padding-block:calc(var(--spacing)*72)}
.py-80{padding-block:calc(var(--spacing)*80)}
.py-96{padding-block:calc(var(--spacing)*96)}

/* ----- pt (padding-top) ----- */
.pt-4{padding-top:calc(var(--spacing)*4)}
.pt-5{padding-top:calc(var(--spacing)*5)}
.pt-10{padding-top:calc(var(--spacing)*10)}
.pt-12{padding-top:calc(var(--spacing)*12)}
.pt-14{padding-top:calc(var(--spacing)*14)}
.pt-16{padding-top:calc(var(--spacing)*16)}
.pt-24{padding-top:calc(var(--spacing)*24)}
.pt-28{padding-top:calc(var(--spacing)*28)}
.pt-32{padding-top:calc(var(--spacing)*32)}
.pt-36{padding-top:calc(var(--spacing)*36)}
.pt-44{padding-top:calc(var(--spacing)*44)}
.pt-48{padding-top:calc(var(--spacing)*48)}
.pt-52{padding-top:calc(var(--spacing)*52)}
.pt-56{padding-top:calc(var(--spacing)*56)}
.pt-60{padding-top:calc(var(--spacing)*60)}
.pt-64{padding-top:calc(var(--spacing)*64)}
.pt-72{padding-top:calc(var(--spacing)*72)}
.pt-80{padding-top:calc(var(--spacing)*80)}

/* ----- pb (padding-bottom) ----- */
.pb-2{padding-bottom:calc(var(--spacing)*2)}
.pb-12{padding-bottom:calc(var(--spacing)*12)}
.pb-14{padding-bottom:calc(var(--spacing)*14)}
.pb-16{padding-bottom:calc(var(--spacing)*16)}
.pb-24{padding-bottom:calc(var(--spacing)*24)}
.pb-28{padding-bottom:calc(var(--spacing)*28)}
.pb-32{padding-bottom:calc(var(--spacing)*32)}
.pb-36{padding-bottom:calc(var(--spacing)*36)}
.pb-40{padding-bottom:calc(var(--spacing)*40)}
.pb-44{padding-bottom:calc(var(--spacing)*44)}
.pb-48{padding-bottom:calc(var(--spacing)*48)}
.pb-52{padding-bottom:calc(var(--spacing)*52)}
.pb-56{padding-bottom:calc(var(--spacing)*56)}
.pb-60{padding-bottom:calc(var(--spacing)*60)}
.pb-64{padding-bottom:calc(var(--spacing)*64)}
.pb-72{padding-bottom:calc(var(--spacing)*72)}

/* ----- px (padding-inline) ----- */
.px-20{padding-inline:calc(var(--spacing)*20)}
.px-24{padding-inline:calc(var(--spacing)*24)}

/* ----- p (padding) ----- */
.p-12{padding:calc(var(--spacing)*12)}
.p-14{padding:calc(var(--spacing)*14)}
.p-16{padding:calc(var(--spacing)*16)}

/* ==========================================================================
   MARGIN
   ========================================================================== */

/* ----- mt (margin-top) ----- */
.mt-12{margin-top:calc(var(--spacing)*12)}
.mt-24{margin-top:calc(var(--spacing)*24)}
.mt-28{margin-top:calc(var(--spacing)*28)}
.mt-32{margin-top:calc(var(--spacing)*32)}
.mt-36{margin-top:calc(var(--spacing)*36)}
.mt-40{margin-top:calc(var(--spacing)*40)}
.mt-48{margin-top:calc(var(--spacing)*48)}

/* ----- mb (margin-bottom) ----- */
.mb-16{margin-bottom:calc(var(--spacing)*16)}
.mb-24{margin-bottom:calc(var(--spacing)*24)}
.mb-28{margin-bottom:calc(var(--spacing)*28)}
.mb-32{margin-bottom:calc(var(--spacing)*32)}
.mb-36{margin-bottom:calc(var(--spacing)*36)}
.mb-40{margin-bottom:calc(var(--spacing)*40)}
.mb-48{margin-bottom:calc(var(--spacing)*48)}

/* ----- my (margin-block) ----- */
.my-4{margin-block:calc(var(--spacing)*4)}
.my-10{margin-block:calc(var(--spacing)*10)}
.my-12{margin-block:calc(var(--spacing)*12)}
.my-14{margin-block:calc(var(--spacing)*14)}
.my-16{margin-block:calc(var(--spacing)*16)}
.my-20{margin-block:calc(var(--spacing)*20)}
.my-24{margin-block:calc(var(--spacing)*24)}

/* ----- mx (margin-inline) ----- */
.mx-8{margin-inline:calc(var(--spacing)*8)}
.mx-10{margin-inline:calc(var(--spacing)*10)}

/* ==========================================================================
   GAP
   ========================================================================== */
.gap-9{gap:calc(var(--spacing)*9)}
.gap-14{gap:calc(var(--spacing)*14)}
.gap-16{gap:calc(var(--spacing)*16)}
.gap-20{gap:calc(var(--spacing)*20)}

/* ----- gap-x / gap-y ----- */
.gap-x-4{column-gap:calc(var(--spacing)*4)}
.gap-x-6{column-gap:calc(var(--spacing)*6)}
.gap-x-8{column-gap:calc(var(--spacing)*8)}
.gap-x-10{column-gap:calc(var(--spacing)*10)}
.gap-x-12{column-gap:calc(var(--spacing)*12)}
.gap-y-4{row-gap:calc(var(--spacing)*4)}
.gap-y-6{row-gap:calc(var(--spacing)*6)}
.gap-y-8{row-gap:calc(var(--spacing)*8)}
.gap-y-10{row-gap:calc(var(--spacing)*10)}
.gap-y-12{row-gap:calc(var(--spacing)*12)}

/* ==========================================================================
   SPACE
   ========================================================================== */
.space-y-8>:not(:last-child){margin-bottom:calc(var(--spacing)*8)}
.space-y-10>:not(:last-child){margin-bottom:calc(var(--spacing)*10)}
.space-y-12>:not(:last-child){margin-bottom:calc(var(--spacing)*12)}
.space-x-4>:not(:last-child){margin-right:calc(var(--spacing)*4)}
.space-x-6>:not(:last-child){margin-right:calc(var(--spacing)*6)}
.space-x-8>:not(:last-child){margin-right:calc(var(--spacing)*8)}

/* ==========================================================================
   GRID
   ========================================================================== */
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* ==========================================================================
   TEXT SIZE (puuttuvat)
   ========================================================================== */
.text-8xl{font-size:6rem;line-height:1}
.text-9xl{font-size:8rem;line-height:1}

/* ==========================================================================
   md: RESPONSIVE (768px+)
   ========================================================================== */
@media (width >= 48rem) {
  /* padding */
  .md\:py-12{padding-block:calc(var(--spacing)*12)}
  .md\:py-16{padding-block:calc(var(--spacing)*16)}
  .md\:py-20{padding-block:calc(var(--spacing)*20)}
  .md\:py-28{padding-block:calc(var(--spacing)*28)}
  .md\:py-32{padding-block:calc(var(--spacing)*32)}
  .md\:py-36{padding-block:calc(var(--spacing)*36)}
  .md\:py-40{padding-block:calc(var(--spacing)*40)}
  .md\:py-48{padding-block:calc(var(--spacing)*48)}
  .md\:py-56{padding-block:calc(var(--spacing)*56)}
  .md\:py-60{padding-block:calc(var(--spacing)*60)}

  .md\:pt-10{padding-top:calc(var(--spacing)*10)}
  .md\:pt-12{padding-top:calc(var(--spacing)*12)}
  .md\:pt-16{padding-top:calc(var(--spacing)*16)}
  .md\:pt-20{padding-top:calc(var(--spacing)*20)}
  .md\:pt-24{padding-top:calc(var(--spacing)*24)}
  .md\:pt-28{padding-top:calc(var(--spacing)*28)}
  .md\:pt-32{padding-top:calc(var(--spacing)*32)}
  .md\:pt-36{padding-top:calc(var(--spacing)*36)}
  .md\:pt-40{padding-top:calc(var(--spacing)*40)}

  .md\:pb-10{padding-bottom:calc(var(--spacing)*10)}
  .md\:pb-12{padding-bottom:calc(var(--spacing)*12)}
  .md\:pb-16{padding-bottom:calc(var(--spacing)*16)}
  .md\:pb-20{padding-bottom:calc(var(--spacing)*20)}
  .md\:pb-24{padding-bottom:calc(var(--spacing)*24)}
  .md\:pb-28{padding-bottom:calc(var(--spacing)*28)}
  .md\:pb-32{padding-bottom:calc(var(--spacing)*32)}
  .md\:pb-36{padding-bottom:calc(var(--spacing)*36)}
  .md\:pb-40{padding-bottom:calc(var(--spacing)*40)}

  /* margin */
  .md\:mt-12{margin-top:calc(var(--spacing)*12)}
  .md\:mt-16{margin-top:calc(var(--spacing)*16)}
  .md\:mt-20{margin-top:calc(var(--spacing)*20)}
  .md\:mt-24{margin-top:calc(var(--spacing)*24)}

  .md\:mb-12{margin-bottom:calc(var(--spacing)*12)}
  .md\:mb-20{margin-bottom:calc(var(--spacing)*20)}
  .md\:mb-24{margin-bottom:calc(var(--spacing)*24)}

  .md\:my-10{margin-block:calc(var(--spacing)*10)}
  .md\:my-12{margin-block:calc(var(--spacing)*12)}
  .md\:my-16{margin-block:calc(var(--spacing)*16)}

  /* gap */
  .md\:gap-10{gap:calc(var(--spacing)*10)}
  .md\:gap-14{gap:calc(var(--spacing)*14)}
  .md\:gap-16{gap:calc(var(--spacing)*16)}

  /* grid */
  .md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}

  /* text */
  .md\:text-4xl{font-size:2.25rem;line-height:2.5rem}
  .md\:text-5xl{font-size:3rem;line-height:1}
  .md\:text-6xl{font-size:3.75rem;line-height:1}
  .md\:text-7xl{font-size:4.5rem;line-height:1}
  .md\:text-8xl{font-size:6rem;line-height:1}
}

/* ==========================================================================
   lg: RESPONSIVE (1024px+)
   ========================================================================== */
@media (width >= 64rem) {
  /* padding */
  .lg\:py-12{padding-block:calc(var(--spacing)*12)}
  .lg\:py-14{padding-block:calc(var(--spacing)*14)}
  .lg\:py-16{padding-block:calc(var(--spacing)*16)}
  .lg\:py-24{padding-block:calc(var(--spacing)*24)}
  .lg\:py-28{padding-block:calc(var(--spacing)*28)}
  .lg\:py-32{padding-block:calc(var(--spacing)*32)}
  .lg\:py-36{padding-block:calc(var(--spacing)*36)}
  .lg\:py-44{padding-block:calc(var(--spacing)*44)}
  .lg\:py-48{padding-block:calc(var(--spacing)*48)}
  .lg\:py-52{padding-block:calc(var(--spacing)*52)}
  .lg\:py-56{padding-block:calc(var(--spacing)*56)}
  .lg\:py-60{padding-block:calc(var(--spacing)*60)}
  .lg\:py-64{padding-block:calc(var(--spacing)*64)}
  .lg\:py-72{padding-block:calc(var(--spacing)*72)}
  .lg\:py-80{padding-block:calc(var(--spacing)*80)}
  .lg\:py-96{padding-block:calc(var(--spacing)*96)}

  .lg\:pt-12{padding-top:calc(var(--spacing)*12)}
  .lg\:pt-14{padding-top:calc(var(--spacing)*14)}
  .lg\:pt-16{padding-top:calc(var(--spacing)*16)}
  .lg\:pt-20{padding-top:calc(var(--spacing)*20)}
  .lg\:pt-24{padding-top:calc(var(--spacing)*24)}
  .lg\:pt-28{padding-top:calc(var(--spacing)*28)}
  .lg\:pt-32{padding-top:calc(var(--spacing)*32)}
  .lg\:pt-36{padding-top:calc(var(--spacing)*36)}
  .lg\:pt-44{padding-top:calc(var(--spacing)*44)}
  .lg\:pt-48{padding-top:calc(var(--spacing)*48)}
  .lg\:pt-52{padding-top:calc(var(--spacing)*52)}
  .lg\:pt-56{padding-top:calc(var(--spacing)*56)}
  .lg\:pt-64{padding-top:calc(var(--spacing)*64)}
  .lg\:pt-70{padding-top:calc(var(--spacing)*70)}
  .lg\:pt-72{padding-top:calc(var(--spacing)*72)}
  .lg\:pt-80{padding-top:calc(var(--spacing)*80)}

  .lg\:pb-12{padding-bottom:calc(var(--spacing)*12)}
  .lg\:pb-14{padding-bottom:calc(var(--spacing)*14)}
  .lg\:pb-16{padding-bottom:calc(var(--spacing)*16)}
  .lg\:pb-20{padding-bottom:calc(var(--spacing)*20)}
  .lg\:pb-24{padding-bottom:calc(var(--spacing)*24)}
  .lg\:pb-28{padding-bottom:calc(var(--spacing)*28)}
  .lg\:pb-32{padding-bottom:calc(var(--spacing)*32)}
  .lg\:pb-36{padding-bottom:calc(var(--spacing)*36)}
  .lg\:pb-40{padding-bottom:calc(var(--spacing)*40)}
  .lg\:pb-44{padding-bottom:calc(var(--spacing)*44)}
  .lg\:pb-48{padding-bottom:calc(var(--spacing)*48)}
  .lg\:pb-52{padding-bottom:calc(var(--spacing)*52)}
  .lg\:pb-56{padding-bottom:calc(var(--spacing)*56)}
  .lg\:pb-64{padding-bottom:calc(var(--spacing)*64)}
  .lg\:pb-70{padding-bottom:calc(var(--spacing)*70)}
  .lg\:pb-72{padding-bottom:calc(var(--spacing)*72)}
  .lg\:pb-80{padding-bottom:calc(var(--spacing)*80)}

  /* margin */
  .lg\:mt-12{margin-top:calc(var(--spacing)*12)}
  .lg\:mt-14{margin-top:calc(var(--spacing)*14)}
  .lg\:mt-16{margin-top:calc(var(--spacing)*16)}
  .lg\:mt-24{margin-top:calc(var(--spacing)*24)}
  .lg\:mt-28{margin-top:calc(var(--spacing)*28)}
  .lg\:mt-30{margin-top:calc(var(--spacing)*30)}
  .lg\:mt-32{margin-top:calc(var(--spacing)*32)}
  .lg\:mt-40{margin-top:calc(var(--spacing)*40)}

  .lg\:mb-10{margin-bottom:calc(var(--spacing)*10)}
  .lg\:mb-12{margin-bottom:calc(var(--spacing)*12)}
  .lg\:mb-14{margin-bottom:calc(var(--spacing)*14)}
  .lg\:mb-16{margin-bottom:calc(var(--spacing)*16)}
  .lg\:mb-20{margin-bottom:calc(var(--spacing)*20)}
  .lg\:mb-24{margin-bottom:calc(var(--spacing)*24)}
  .lg\:mb-28{margin-bottom:calc(var(--spacing)*28)}
  .lg\:mb-30{margin-bottom:calc(var(--spacing)*30)}
  .lg\:mb-32{margin-bottom:calc(var(--spacing)*32)}
  .lg\:mb-40{margin-bottom:calc(var(--spacing)*40)}

  .lg\:my-10{margin-block:calc(var(--spacing)*10)}
  .lg\:my-12{margin-block:calc(var(--spacing)*12)}
  .lg\:my-16{margin-block:calc(var(--spacing)*16)}
  .lg\:my-20{margin-block:calc(var(--spacing)*20)}

  /* gap */
  .lg\:gap-6{gap:calc(var(--spacing)*6)}
  .lg\:gap-14{gap:calc(var(--spacing)*14)}
  .lg\:gap-16{gap:calc(var(--spacing)*16)}
  .lg\:gap-20{gap:calc(var(--spacing)*20)}

  /* grid */
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}

  /* text */
  .lg\:text-5xl{font-size:3rem;line-height:1}
  .lg\:text-6xl{font-size:3.75rem;line-height:1}
  .lg\:text-7xl{font-size:4.5rem;line-height:1}
  .lg\:text-8xl{font-size:6rem;line-height:1}
  .lg\:text-9xl{font-size:8rem;line-height:1}
}

/* ==========================================================================
   xl: RESPONSIVE (1280px+)
   ========================================================================== */
@media (width >= 80rem) {
  .xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .xl\:py-24{padding-block:calc(var(--spacing)*24)}
  .xl\:py-32{padding-block:calc(var(--spacing)*32)}
  .xl\:py-40{padding-block:calc(var(--spacing)*40)}
  .xl\:pt-20{padding-top:calc(var(--spacing)*20)}
  .xl\:pt-24{padding-top:calc(var(--spacing)*24)}
  .xl\:pb-20{padding-bottom:calc(var(--spacing)*20)}
  .xl\:pb-24{padding-bottom:calc(var(--spacing)*24)}
  .xl\:gap-10{gap:calc(var(--spacing)*10)}
  .xl\:gap-12{gap:calc(var(--spacing)*12)}
  .xl\:gap-16{gap:calc(var(--spacing)*16)}
}