/* Studio Beautify Pack — minimal flair without glitter */
/* Root tokens fallback */
:root {
  --radius: var(--radius, 12px);
  --gap: var(--gap, 1.25rem);
  --brand: var(--brand, #111);
  --accent: var(--accent, #4F46E5);
  --neutral: var(--neutral, #9CA3AF);
}

/* Smooth transitions */
* { transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }

/* Buttons */
.wp-element-button, .wp-block-button__link {
  border-radius: var(--radius);
  padding: .7rem 1rem;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  transform: translateY(0);
}
.wp-block-button.is-style-fill .wp-block-button__link { background: var(--accent); color: #fff; }
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); color: color-mix(in srgb, var(--accent) 90%, #000);
}
.wp-element-button:hover, .wp-block-button__link:hover {
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 15%, transparent);
  transform: translateY(-1px);
}

/* Card hover */
.card {
  border: 1px solid color-mix(in srgb, CanvasText 12%, transparent);
  border-radius: var(--radius);
  padding: 1rem;
  background: color-mix(in srgb, Canvas 90%, transparent);
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 30%, Canvas); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 10%, transparent); }

/* Image placeholders with aspect ratio */
.ratio {
  position: relative; width: 100%; overflow: hidden; border-radius: calc(var(--radius) - 2px);
  background: color-mix(in srgb, CanvasText 6%, Canvas);
}
.ratio::before { content: ""; display: block; padding-top: 62.5%; } /* 16:10 */
.ratio > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}

/* Subtle link underline */
a { text-decoration-thickness: .06em; text-underline-offset: .25em; }
a:hover { text-decoration-color: var(--accent); }

/* Shimmer skeleton */
.skeleton {
  background: linear-gradient(90deg, color-mix(in srgb, Canvas 92%, transparent), color-mix(in srgb, CanvasText 6%, Canvas), color-mix(in srgb, Canvas 92%, transparent));
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: calc(var(--radius) - 2px);
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* KPI stripe */
.kpi { text-align:center; padding:1rem; border:1px dashed color-mix(in srgb, CanvasText 20%, transparent); border-radius: var(--radius); }
.kpi h3 { margin: 0; font-size: clamp(1.5rem, 4vw, 2rem); }

/* Logo wall */
.logo-wall { display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--gap); }
.logo-wall .logo { border:1px solid color-mix(in srgb, CanvasText 14%, transparent); border-radius: var(--radius); padding:.9rem; text-align:center; font-weight:600; opacity:.9 }
.logo-wall .logo:hover { opacity:1; border-color: color-mix(in srgb, var(--accent) 30%, Canvas) }

/* Newsletter row */
.form-row { display:flex; gap:.5rem; flex-wrap:wrap; }
.form-row input[type="email"] { padding:.7rem; border:1px solid color-mix(in srgb, CanvasText 20%, transparent); border-radius: var(--radius); min-width: 260px; }
.form-row button { padding:.7rem 1rem; border-radius: var(--radius); background: var(--accent); color:#fff; border:0; }

/* Responsive tweaks */
@media (max-width: 900px){
  .logo-wall{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 600px){
  .logo-wall{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}