/* [project]/src/app/(public)/blog/_components/slides/slides.css [app-client] (css) */
.slides-container {
  color: #333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: linear-gradient(135deg, #fefefe 0%, #f8f9fa 100%);
  font-family: Georgia, Times New Roman, serif;
}

.slides-container:focus {
  outline: none;
}

.slide {
  animation: .4s ease-out slideIn;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-layout-title {
  text-align: center;
  justify-content: center;
}

.slide-layout-title h2 {
  letter-spacing: -.02em;
  font-size: 3em;
}

.slide-layout-content {
  text-align: left;
}

.slide-layout-cards .slide-fragments {
  background: #00000005;
  border: 1px solid #00000014;
  border-radius: 12px;
  padding: 16px;
}

.slide-layout-split {
  flex-direction: row;
  gap: 40px;
}

.slide-layout-image-full {
  justify-content: center;
  align-items: center;
}

.slide h2 {
  color: #1a1a1a;
  line-height: 1.2;
}

.slide h3 {
  color: #444;
}

.slide p {
  color: #333;
}

.slide-bullet span:first-child {
  font-size: .8em;
  transform: translateY(2px);
}

.slide-fragment {
  will-change: opacity, transform;
}

.slide-card {
  font-size: .9em;
}

.slide-card p {
  margin: 0;
}

.slides-nav button:hover:not(:disabled) {
  background: #f0f0f0;
  border-color: #ccc;
}

.slides-nav button:active:not(:disabled) {
  transform: scale(.95);
}

.slides-footer button:hover {
  background: #0000000d;
}

@media (max-width: 768px) {
  .slides-viewport {
    padding: 20px 30px !important;
  }

  .slide h2 {
    font-size: 1.5em !important;
  }

  .slide h3 {
    font-size: .9em !important;
  }

  .slide-fragments {
    font-size: .85em;
  }

  .slide-card {
    padding: 12px !important;
  }

  .slides-footer {
    padding: 0 16px;
    overflow-x: auto;
    justify-content: flex-start !important;
    gap: 8px !important;
    font-size: 11px !important;
  }
}

@media print {
  @page {
    size: landscape;
    margin: .5in;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .slides-container {
    background: #fff !important;
    height: auto !important;
    overflow: visible !important;
  }

  .slides-viewport {
    page-break-after: always;
    page-break-inside: avoid;
    min-height: 6in;
    height: auto !important;
    padding: 0 !important;
  }

  .slide {
    min-height: auto !important;
    animation: none !important;
  }

  .slides-progress, .slides-nav, .slides-counter, .slides-footer {
    display: none !important;
  }

  .slide-fragment {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .slide-card {
    opacity: 1 !important;
    box-shadow: 0 0 0 1px #0000001a !important;
  }
}

.slide-fragment.past {
  opacity: .5;
}