/* === Spinning Dish Plugin — Responsive Design === */

/* ── Custom Properties (Donauwirt Brand) ───────── */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
:root {
  --sd-accent:        #00718d;   /* Donau-Türkis statt Orange */
  --sd-caption-color: #2d4a52;
  --sd-caption-font:  'Lato', 'Segoe UI', system-ui, sans-serif;
  --sd-caption-size:  0.92em;
  --sd-shadow-color:  rgba(0, 66, 79, 0.25);
  --sd-transition:    0.3s ease;
  --sd-radius:        50%;
}

/* ── Wrapper ───────────────────────────────────── */
.sd-wrap {
  display:        inline-flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  position:       relative;

  /* Fluid size: respects the px set via shortcode/widget,
     but never overflows the viewport on small screens.       */
  width:    min(var(--sd-size, 200px), 90vw);
  height:   min(var(--sd-size, 200px), 90vw);

  margin:   clamp(12px, 3vw, 24px) auto;

  /* Remove the hard-coded inline width/height injected by PHP
     on small screens — overridden by max() below via JS patch */
}

/* Tablet (≥ 600 px): up to 80 % of its column */
@media (min-width: 600px) {
  .sd-wrap {
    width:  min(var(--sd-size, 200px), 80vw);
    height: min(var(--sd-size, 200px), 80vw);
  }
}

/* Desktop (≥ 1024 px): use the exact px the user chose */
@media (min-width: 1024px) {
  .sd-wrap {
    width:  var(--sd-size, 200px);
    height: var(--sd-size, 200px);
  }
}

/* ── Dish Image ────────────────────────────────── */
.sd-img {
  width:         100%;
  height:        100%;
  object-fit:    contain;
  border-radius: var(--sd-radius);
  display:       block;
  will-change:   transform;
  /* animation is applied by JS */

  /* Smooth touch interactions on mobile */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ── Drop Shadow (pseudo-element) ──────────────── */
.sd-wrap.sd-has-shadow::after {
  content:       '';
  display:       block;
  width:         70%;
  height:        clamp(8px, 2vw, 14px);   /* thinner on small screens */
  background:    radial-gradient(
                   ellipse at center,
                   var(--sd-shadow-color) 0%,
                   transparent 80%
                 );
  border-radius: 50%;
  margin-top:    clamp(-4px, -1vw, -6px);
  animation:     sd-shadow-pulse var(--sd-speed, 4s) linear infinite;
}

/* ── Caption ───────────────────────────────────── */
.sd-caption {
  margin:      clamp(6px, 1.5vw, 10px) 0 0;
  font-family: var(--sd-caption-font);
  font-size:   clamp(0.78em, 2.5vw, var(--sd-caption-size));
  color:       var(--sd-caption-color);
  text-align:  center;
  font-style:  italic;
  max-width:   100%;
  word-break:  break-word;
  line-height: 1.4;
}

/* ── Keyframes ─────────────────────────────────── */
@keyframes sd-spin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

@keyframes sd-shadow-pulse {
  0%   { transform: scaleX(1);    opacity: 0.60; }
  25%  { transform: scaleX(0.85); opacity: 0.45; }
  50%  { transform: scaleX(1);    opacity: 0.60; }
  75%  { transform: scaleX(0.85); opacity: 0.45; }
  100% { transform: scaleX(1);    opacity: 0.60; }
}

/* ── Hover-only mode ───────────────────────────── */
/* On pointer devices: pause by default, play on hover */
@media (hover: hover) and (pointer: fine) {
  .sd-wrap.sd-hover-mode .sd-img {
    animation-play-state: paused !important;
  }
  .sd-wrap.sd-hover-mode:hover .sd-img,
  .sd-wrap.sd-hover-mode:focus-within .sd-img {
    animation-play-state: running !important;
  }
  .sd-wrap.sd-hover-mode.sd-has-shadow::after {
    animation-play-state: paused !important;
  }
  .sd-wrap.sd-hover-mode:hover.sd-has-shadow::after {
    animation-play-state: running !important;
  }
}
/* On touch-only devices: always spin even in hover mode */
@media (hover: none) {
  .sd-wrap.sd-hover-mode .sd-img {
    animation-play-state: running !important;
  }
  .sd-wrap.sd-hover-mode.sd-has-shadow::after {
    animation-play-state: running !important;
  }
}

/* ── Accessibility: reduced motion ────────────── */
@media (prefers-reduced-motion: reduce) {
  .sd-img,
  .sd-wrap.sd-has-shadow::after {
    animation: none !important;
  }
}