@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes slideInRight {
  0% {
    transform: translateX(2.5rem);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fadeIn 0.7s ease-out forwards;
}

.animate-slide-in-from-right-10 {
  animation: slideInRight 0.7s ease-out forwards;
}

/* Mobile Adaptation */
@media (max-width: 768px) {

  /* Fix container padding for mobile */
  .max-w-7xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Reduce sizing for main landing cards */
  .landing-card {
    border-radius: 1.5rem !important;
    min-height: 400px;
  }

  .landing-card .p-12 {
    padding: 2rem !important;
  }

  .landing-card h2 {
    font-size: 2.5rem !important;
  }

  .landing-card p {
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
  }

  /* General Typography Scale Down */
  h1 {
    font-size: 2.25rem !important;
    line-height: 1.2 !important;
  }

  h2 {
    font-size: 1.875rem !important;
  }

  /* Button adjustments */
  button,
  a.bg-\[\#1667E9\],
  a.bg-gray-900 {
    width: 100%;
    justify-content: center;
    padding: 1rem !important;
    font-size: 1.125rem !important;
  }

  /* Navbar Adjustments */
  nav .h-20 {
    height: 4rem;
  }

  nav img {
    height: 2rem !important;
  }

  nav .text-2xl {
    font-size: 1.25rem !important;
  }

  /* Subject Cards Fix - Robust Liquid Layout */
  .subject-grid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .subject-card {
    padding: 0.75rem !important;
    width: 100% !important;
    min-height: 70px;
    /* Ensure 2 lines can fit comfortably */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .subject-card span {
    line-height: 1.2;
    /* Tight leading for multi-line */
    /* Dynamic font size: allow it to shrink on tight 2-col instances, but cap it */
    font-size: clamp(0.75rem, 2.8vw, 1rem) !important;

    /* Text wrapping rules */
    white-space: normal !important;
    /* Allow wrapping for "Українська мова" */
    word-break: normal !important;
    /* Don't break words arbitrarily */
    overflow-wrap: break-word !important;
    /* Break long words if absolutely necessary (e.g. slight overflow) */
    hyphens: none !important;
    /* No auto hyphens */
    -webkit-hyphens: none !important;

    letter-spacing: -0.3px !important;
    width: 100%;
  }
}

/* Force 1 column on all mobile phones and small tablets */
@media (max-width: 600px) {
  .subject-grid {
    grid-template-columns: 1fr !important;
  }

  .subject-card {
    padding: 1rem !important;
    /* More breathing room in 1 col */
    min-height: 60px;
  }

  .subject-card span {
    font-size: 1rem !important;
    white-space: normal !important;
    line-height: 1.25;
  }
}