/**
 * Services Grid - Styly
 *
 * Dlaždicový přehled služeb — dlaždice, hover efekty, detail panel.
 * Barvy: výhradně CSS variables z parent theme (var(--color-*))
 *
 * @package ReactWind_Energy_Child
 * @task TASK-055c
 */

/* =====================================================
   SEKCE — full-width tmavé pozadí
   ===================================================== */

.services-grid {
  background-color: var(--sg-section-bg, var(--color-dark-600));
  color: var(--color-text-primary, #ffffff);
}

/* Gradient pozadí sekce — z editoru (TASK-055h) */
.services-grid.has-section-gradient {
  background-image: var(--sg-section-gradient);
}

/* =====================================================
   GRADIENT DIVIDER — pod nadpisem sekce
   ===================================================== */

/* =====================================================
   NADPIS — custom barva a gradient z editoru (TASK-055h)
   ===================================================== */

.services-grid h2.text-base-content {
  color: var(--sg-title-color, var(--color-text-primary, #ffffff));
}

/* Gradient nadpis — z editoru */
.services-grid .sg-gradient-title {
  background-image: var(--sg-title-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.services-grid .from-blue-light {
  --tw-gradient-from: var(--color-blue-light);
}

.services-grid .to-green {
  --tw-gradient-to: var(--color-green-accent);
}

.services-grid .bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to));
}

/* =====================================================
   GRID — responzivní 1 / 2 / 4 sloupce
   ===================================================== */

.sg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Tablet (≥ 768px): 2 sloupce */
@media (min-width: 768px) {
  .sg-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

/* Desktop (≥ 1024px): 4 sloupce */
@media (min-width: 1024px) {
  .sg-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}

/* =====================================================
   DLAŽDICE (sg-tile) — glass efekt, layout, hover
   ===================================================== */

.sg-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1rem;
  border-radius: var(--radius-box, 0.75rem);
  cursor: pointer;
  position: relative;
  transition:
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* Glass pozadí — přepsání DaisyUI výchozího bg, s podporou custom barev (TASK-055h) */
.sg-tile.card {
  background-color: var(--sg-tile-bg, color-mix(in srgb, var(--color-dark-600) 50%, transparent));
  background-image: var(--sg-tile-gradient, none);
  border: 1px solid var(--sg-tile-border, color-mix(in srgb, var(--color-white, #ffffff) 10%, transparent));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Hover efekt */
.sg-tile:hover {
  border-color: color-mix(in srgb, var(--color-blue-light) 40%, transparent);
  transform: translateY(-4px);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--color-dark-900) 40%, transparent);
}

/* Aktivní dlaždice (rozbalený detail) */
.sg-tile[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--color-blue-light) 50%, transparent);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--color-blue-light) 15%, transparent);
}

/* =====================================================
   IKONA — kruhové pozadí s barvou
   ===================================================== */

.sg-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

/* Lucide SVG ikona */
.sg-icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* =====================================================
   OBSAH DLAŽDICE — název, subtitle
   ===================================================== */

.sg-tile-body {
  flex: 1;
  margin-bottom: 0.75rem;
}

.sg-tile-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.25rem;
}

.sg-tile-subtitle {
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* =====================================================
   BADGE — pozice na dlaždici
   ===================================================== */

.sg-tile-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

/* =====================================================
   DETAIL ODKAZ — "Detail" + chevron
   ===================================================== */

.sg-tile-detail {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-btn, 0.5rem);
  margin-top: auto;
  transition: color 0.2s ease;
}

.sg-tile-detail:hover {
  color: var(--color-blue-light);
}

/* Chevron ikona — rotace při expand */
.sg-detail-chevron {
  transition: transform 0.3s ease;
}

.sg-tile[aria-expanded="true"] .sg-detail-chevron {
  transform: rotate(90deg);
}

/* =====================================================
   DETAIL PANEL — pod celým řádkem (desktop)
   ===================================================== */

.sg-detail-row {
  grid-column: 1 / -1;
  overflow: hidden;
  border-radius: var(--radius-box, 0.75rem);
  background-color: var(--sg-detail-bg, color-mix(in srgb, var(--color-dark-800) 80%, transparent));
  border: 1px solid color-mix(in srgb, var(--color-white, #ffffff) 8%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* Expand/collapse animace přes max-height */
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.5s ease,
    opacity 0.3s ease,
    padding 0.3s ease;
  padding: 0 1.5rem;
}

/* Otevřený stav (JS odstraní hidden a přidá .is-open) */
.sg-detail-row.is-open {
  max-height: 2000px;
  opacity: 1;
  padding: 1.5rem;
}

/* =====================================================
   INLINE DETAIL — pod kliknutou dlaždicí (mobile/tablet)
   JS vytváří .sg-detail-inline dynamicky a vkládá za
   poslední dlaždici ve vizuálním řádku.
   Sdílí styly s .sg-detail-row (třída je na elementu),
   ale grid-column se liší podle breakpointu.
   ===================================================== */

/* Mobile (< 768px): inline detail zabere 1 sloupec (celý řádek = 1) */
.sg-detail-inline {
  grid-column: 1 / -1;
}

/* Tablet (768px-1023px): inline detail zabere 2 sloupce (celý vizuální řádek) */
@media (min-width: 768px) and (max-width: 1023px) {
  .sg-detail-inline {
    grid-column: 1 / -1;
  }
}

/* =====================================================
   DETAIL OBSAH — typografie, prvky uvnitř panelu
   ===================================================== */

.sg-detail-content {
  /* Skrytý obsah — JS přepíná hidden atribut */
}

/* =====================================================
   HIGHLIGHT TEXT — warning/amber barva s levým borderem
   ===================================================== */

.sg-highlight {
  color: var(--color-warning, var(--color-amber, #f59e0b));
  border-left: 3px solid var(--color-warning, var(--color-amber, #f59e0b));
  padding-left: 1rem;
}

/* =====================================================
   BULLET LIST — gradient tečky
   ===================================================== */

.sg-bullets li .w-1\.5 {
  /* Gradient tečka je již v Tailwind (from-blue-light to-green) */
}

/* =====================================================
   COMPARISON BOX — dvě karty vedle sebe
   ===================================================== */

.sg-comparison {
  border-radius: var(--radius-box, 0.75rem);
}

/* =====================================================
   KOLÁČOVÉ GRAFY
   ===================================================== */

.sg-charts {
  /* Wrapper pro grafy + legendu */
}

.sg-chart-wrapper {
  max-width: 200px;
  flex-shrink: 0;
}

.sg-pie-chart {
  width: 100%;
  height: auto;
  max-width: 180px;
}

/* =====================================================
   SCROLL REVEAL ANIMACE — staggered entrance
   ===================================================== */

.services-grid .sg-tile {
  transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Animace se aktivují až když JS přidá třídu .animations-ready */
.services-grid[data-animations="true"].animations-ready .sg-tile {
  opacity: 0;
  transform: translateY(20px);
}

.services-grid[data-animations="true"].animations-ready .sg-tile.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delay — 8 dlaždic */
.services-grid[data-animations="true"].animations-ready .sg-tile:nth-child(1) { transition-delay: 0s; }
.services-grid[data-animations="true"].animations-ready .sg-tile:nth-child(2) { transition-delay: 0.08s; }
.services-grid[data-animations="true"].animations-ready .sg-tile:nth-child(3) { transition-delay: 0.16s; }
.services-grid[data-animations="true"].animations-ready .sg-tile:nth-child(4) { transition-delay: 0.24s; }
.services-grid[data-animations="true"].animations-ready .sg-tile:nth-child(5) { transition-delay: 0.32s; }
.services-grid[data-animations="true"].animations-ready .sg-tile:nth-child(6) { transition-delay: 0.40s; }
.services-grid[data-animations="true"].animations-ready .sg-tile:nth-child(7) { transition-delay: 0.48s; }
.services-grid[data-animations="true"].animations-ready .sg-tile:nth-child(8) { transition-delay: 0.56s; }

/* =====================================================
   FOCUS ACCESSIBILITY
   ===================================================== */

.services-grid [role="button"]:focus-visible {
  outline: 2px solid var(--color-blue-light);
  outline-offset: 2px;
}

/* =====================================================
   PREFERS-REDUCED-MOTION — vypnutí animací
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  .sg-tile {
    transition: none !important;
  }

  .sg-detail-row,
  .sg-detail-inline {
    transition: none !important;
  }

  .sg-detail-chevron {
    transition: none !important;
  }

  .services-grid[data-animations="true"].animations-ready .sg-tile {
    opacity: 1;
    transform: none;
  }
}

/* Animace vypnuté přes data atribut */
.services-grid[data-animations="false"] .sg-tile {
  opacity: 1;
  transform: none;
}

/* =====================================================
   TEXT BARVY — fallback pro DaisyUI třídy v kontextu sekce
   ===================================================== */

.services-grid .text-base-content {
  color: var(--color-text-primary, #ffffff);
}

.services-grid .text-base-content\/70 {
  color: color-mix(in srgb, var(--color-text-primary, #ffffff) 70%, transparent);
}

.services-grid .text-base-content\/60 {
  color: color-mix(in srgb, var(--color-text-secondary) 80%, transparent);
}

.services-grid .text-base-content\/80 {
  color: color-mix(in srgb, var(--color-text-primary, #ffffff) 80%, transparent);
}

.services-grid .text-base-content\/50 {
  color: color-mix(in srgb, var(--color-text-secondary) 60%, transparent);
}

.services-grid .text-base-content\/40 {
  color: color-mix(in srgb, var(--color-text-secondary) 50%, transparent);
}

/* =====================================================
   POZADÍ — glass třídy v kontextu sekce
   ===================================================== */

.services-grid .bg-base-200\/30 {
  background-color: color-mix(in srgb, var(--color-dark-600) 50%, transparent);
}

.services-grid .bg-base-200\/50 {
  background-color: color-mix(in srgb, var(--color-dark-600) 70%, transparent);
}

.services-grid .border-base-300\/50 {
  border-color: color-mix(in srgb, var(--color-white, #ffffff) 10%, transparent);
}

.services-grid .border-base-300\/30 {
  border-color: color-mix(in srgb, var(--color-white, #ffffff) 6%, transparent);
}

/* =====================================================
   IKONY — sémantické barvy pozadí (opacity 20%)
   ===================================================== */

.services-grid .bg-primary\/20 { background-color: color-mix(in srgb, var(--color-blue-500, #3b82f6) 20%, transparent); }
.services-grid .bg-secondary\/20 { background-color: color-mix(in srgb, var(--color-gray-500, #64748b) 20%, transparent); }
.services-grid .bg-accent\/20 { background-color: color-mix(in srgb, var(--color-amber, #f59e0b) 20%, transparent); }
.services-grid .bg-info\/20 { background-color: color-mix(in srgb, var(--color-blue-400, #3b82f6) 20%, transparent); }
.services-grid .bg-success\/20 { background-color: color-mix(in srgb, var(--color-green-accent) 20%, transparent); }
.services-grid .bg-warning\/20 { background-color: color-mix(in srgb, var(--color-amber, #f59e0b) 20%, transparent); }
.services-grid .bg-error\/20 { background-color: color-mix(in srgb, var(--color-error, #ef4444) 20%, transparent); }
.services-grid .bg-neutral\/20 { background-color: color-mix(in srgb, var(--color-dark-800) 20%, transparent); }

/* Ikony — sémantické barvy textu */
.services-grid .text-primary { color: var(--color-blue-500, #3b82f6); }
.services-grid .text-secondary { color: var(--color-gray-500, #64748b); }
.services-grid .text-accent { color: var(--color-amber, #f59e0b); }
.services-grid .text-info { color: var(--color-blue-400, #3b82f6); }
.services-grid .text-success { color: var(--color-green-accent); }
.services-grid .text-warning { color: var(--color-amber, #f59e0b); }
.services-grid .text-error { color: var(--color-error, #ef4444); }
.services-grid .text-neutral { color: var(--color-dark-800); }

/* =====================================================
   COMPARISON BOX — info/success barvy
   ===================================================== */

.services-grid .bg-info\/5 {
  background-color: color-mix(in srgb, var(--color-blue-400, #3b82f6) 5%, transparent);
}

.services-grid .border-info\/10 {
  border-color: color-mix(in srgb, var(--color-blue-400, #3b82f6) 10%, transparent);
}

.services-grid .text-info\/70 {
  color: color-mix(in srgb, var(--color-blue-400, #3b82f6) 70%, transparent);
}

.services-grid .bg-success\/5 {
  background-color: color-mix(in srgb, var(--color-green-accent) 5%, transparent);
}

.services-grid .border-success\/10 {
  border-color: color-mix(in srgb, var(--color-green-accent) 10%, transparent);
}

.services-grid .text-success\/70 {
  color: color-mix(in srgb, var(--color-green-accent) 70%, transparent);
}