/*
 * Supplementary utilities used by the case studies pages but not present
 * in the original compiled Tailwind stylesheet (which was tree-shaken to
 * only include classes the original site used).
 *
 * All values match Tailwind v3 defaults.
 */

/* Layout */
.block { display: block; }
.max-w-5xl { max-width: 64rem; }
.max-w-none { max-width: none; }
.pb-24 { padding-bottom: 6rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }

/* Aspect ratios */
.aspect-\[16\/9\] { aspect-ratio: 16 / 9; }
.aspect-\[3\/4\] { aspect-ratio: 3 / 4; }

/* Object positioning */
.object-top { object-position: top; }
.object-center { object-position: center; }

/* Positioning shorthand */
.top-2 { top: 0.5rem; }
.left-2 { left: 0.5rem; }

/* Spacing */
.gap-5 { gap: 1.25rem; }
.p-7 { padding: 1.75rem; }
.m-0 { margin: 0; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-8 { margin-top: 2rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }

/* Borders */
.border-l-4 { border-left-width: 4px; }
.border-blue-600 { border-color: rgb(37 99 235); }

/* Amber palette (BEFORE labels) */
.bg-amber-100 { background-color: rgb(254 243 199); }
.bg-amber-500 { background-color: rgb(245 158 11); }
.text-amber-800 { color: rgb(146 64 14); }
.text-white { color: #fff; }

/* Emerald palette (AFTER labels) */
.bg-emerald-100 { background-color: rgb(209 250 229); }
.bg-emerald-600 { background-color: rgb(5 150 105); }
.text-emerald-800 { color: rgb(6 95 70); }

/* ring-1 plus colored rings used in Before/After thumbnails */
.ring-1 {
  box-shadow: 0 0 0 1px var(--ring-color, currentColor),
              0 1px 3px 0 rgb(0 0 0 / 0.1),
              0 1px 2px -1px rgb(0 0 0 / 0.1);
}
.ring-amber-200\/70 { --ring-color: rgb(253 230 138 / 0.7); }
.ring-emerald-200\/70 { --ring-color: rgb(167 243 208 / 0.7); }
.ring-amber-200 { --ring-color: rgb(253 230 138); }
.ring-emerald-200 { --ring-color: rgb(167 243 208); }

/* shadow-xl for hover state */
.hover\:shadow-xl:hover {
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
              0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }

/* Impact card accent gradient */
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent))); }
.from-blue-50 {
  --tw-gradient-from: rgb(239 246 255);
  --tw-gradient-to: rgb(239 246 255 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-white { --tw-gradient-to: #fff; }
.text-blue-700 { color: rgb(29 78 216); }

/* Blue list bullets in Impact card */
.marker\:text-blue-600 > li::marker { color: rgb(37 99 235); }

/* Tiny typography sizes used in badges and refined body text */
.text-\[10px\] { font-size: 10px; }
.text-\[15px\] { font-size: 15px; }

/* Responsive overrides for the refined sections */
@media (min-width: 640px) {
  .sm\:p-7 { padding: 1.75rem; }
  .sm\:gap-7 { gap: 1.75rem; }
  .sm\:text-\[15px\] { font-size: 15px; }
}
@media (min-width: 1024px) {
  .lg\:col-span-1 { grid-column: span 1 / span 1; }
}

/* Typography */
.leading-snug { line-height: 1.375; }
.text-\[11px\] { font-size: 11px; }
.text-blue-300 { color: rgb(147 197 253); }

/* "prose" replacements — keep paragraph spacing sane in the body copy */
.prose { color: rgb(51 65 85); max-width: 65ch; }
.prose.max-w-none { max-width: none; }
.prose p { margin-top: 0; margin-bottom: 1.25em; line-height: 1.75; }
.prose-slate { color: rgb(51 65 85); }

/* Shadows */
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }

/* Borders */
.border-y { border-top-width: 1px; border-bottom-width: 1px; }

/* Transitions */
.transition-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-500 { transition-duration: 500ms; }

/* Gradients */
.from-white { --tw-gradient-from: #fff var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-slate-50 { --tw-gradient-to: #f8fafc var(--tw-gradient-to-position); }

/* Hover */
.hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.hover\:shadow-2xl:hover { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
.hover\:border-blue-300:hover { border-color: rgb(147 197 253); }
.hover\:text-blue-700:hover { color: rgb(29 78 216); }

/* Group hover */
.group:hover .group-hover\:gap-2\.5 { gap: 0.625rem; }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:text-blue-700 { color: rgb(29 78 216); }

/* Responsive overrides */
@media (min-width: 640px) {
  .sm\:gap-6 { gap: 1.5rem; }
  .sm\:pb-14 { padding-bottom: 3.5rem; }
  .sm\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
  .sm\:text-5xl { font-size: 3rem; line-height: 1; }
  .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
}
@media (min-width: 1024px) {
  .lg\:text-6xl { font-size: 3.75rem; line-height: 1; }
}