/* =============================================================================
   File        : public/assets/css/frontend/responsive.css
   Project     : GyanPeeth Academy
   Framework   : CodeIgniter 4

   Description
   -----------------------------------------------------------------------------
   Global Responsive Framework

   This file contains ONLY global responsive rules.

   Component specific responsive rules should remain inside their own files.

   Breakpoints

   XXL  >= 1400px
   XL   >= 1200px
   LG   >= 992px
   MD   >= 768px
   SM   >= 576px

=============================================================================*/

/* =============================================================================
   XXL DESKTOP
============================================================================= */

@media (min-width: 1400px) {
  .fe-container {
    max-width: 1320px;
  }
}

/* =============================================================================
   LARGE LAPTOP
============================================================================= */

@media (max-width: 1200px) {
  .fe-container {
    max-width: 1140px;

    padding-inline: 22px;
  }

  .fe-grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =============================================================================
   TABLET
============================================================================= */

@media (max-width: 992px) {
  :root {
    --fe-section-padding: 80px;
  }

  .fe-container {
    max-width: 960px;

    padding-inline: 20px;
  }

  .fe-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .fe-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =============================================================================
   MOBILE TABLET
============================================================================= */

@media (max-width: 768px) {
  :root {
    --fe-section-padding: 70px;
  }

  .fe-container {
    padding-inline: 18px;
  }

  .fe-grid-2,
  .fe-grid-3,
  .fe-grid-4 {
    grid-template-columns: 1fr;
  }

  .fe-grid-auto {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   SMALL MOBILE
============================================================================= */

@media (max-width: 576px) {
  :root {
    --fe-section-padding: 60px;
  }

  .fe-container {
    padding-inline: 16px;
  }
}
/* =============================================================================
   RESPONSIVE TYPOGRAPHY
============================================================================= */

@media (max-width: 992px) {
  h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
  }

  h2 {
    font-size: clamp(2rem, 4vw, 2.8rem);
  }

  h3 {
    font-size: 1.5rem;
  }

  p {
    font-size: 0.98rem;
  }
}

@media (max-width: 768px) {
  h1 {
    font-size: 2.25rem;
  }

  h2 {
    font-size: 1.9rem;
  }

  h3 {
    font-size: 1.45rem;
  }

  h4 {
    font-size: 1.2rem;
  }

  p {
    font-size: 0.95rem;

    line-height: 1.7;
  }
}

@media (max-width: 576px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.65rem;
  }

  h3 {
    font-size: 1.3rem;
  }

  p {
    font-size: 0.92rem;
  }
}

/* =============================================================================
   RESPONSIVE SECTION HEADER
============================================================================= */

@media (max-width: 768px) {
  .fe-section-header {
    margin-bottom: 45px;
  }

  .fe-section-title {
    margin-bottom: 0.75rem;
  }
}

/* =============================================================================
   FLEX HELPERS
============================================================================= */

@media (max-width: 768px) {
  .fe-flex-between {
    flex-direction: column;

    align-items: flex-start;
  }

  .fe-flex-wrap {
    flex-wrap: wrap;
  }
}

/* =============================================================================
   BUTTON GROUP
============================================================================= */

@media (max-width: 768px) {
  .fe-btn-group {
    width: 100%;

    flex-direction: column;
  }

  .fe-btn-group .fe-btn {
    width: 100%;
  }
}

/* =============================================================================
   CARD GRID
============================================================================= */

@media (max-width: 768px) {
  .fe-card-hover {
    transform: none !important;
  }
}

/* =============================================================================
   IMAGES
============================================================================= */

img {
  max-width: 100%;

  height: auto;
}

/* =============================================================================
   RESPONSIVE TABLE
============================================================================= */

.fe-table-responsive {
  width: 100%;

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;
}

.fe-table-responsive table {
  min-width: 700px;
}

/* =============================================================================
   VIDEO
============================================================================= */

.fe-video {
  position: relative;

  width: 100%;

  overflow: hidden;

  border-radius: var(--fe-radius-lg);
}

.fe-video iframe,
.fe-video video {
  width: 100%;

  aspect-ratio: 16/9;

  border: 0;
}

/* =============================================================================
   FORM ELEMENTS
============================================================================= */

@media (max-width: 768px) {
  input,
  textarea,
  select {
    font-size: 16px;
  }
}

/* =============================================================================
   VISIBILITY HELPERS
============================================================================= */

.fe-show-mobile {
  display: none !important;
}

.fe-show-tablet {
  display: none !important;
}

.fe-show-desktop {
  display: block !important;
}

@media (max-width: 992px) {
  .fe-hide-tablet {
    display: none !important;
  }

  .fe-show-tablet {
    display: block !important;
  }
}

@media (max-width: 768px) {
  .fe-hide-mobile {
    display: none !important;
  }

  .fe-show-mobile {
    display: block !important;
  }

  .fe-show-desktop {
    display: none !important;
  }
}

/* =============================================================================
   SPACING HELPERS
============================================================================= */

@media (max-width: 768px) {
  .fe-mt-mobile-0 {
    margin-top: 0 !important;
  }

  .fe-mb-mobile-0 {
    margin-bottom: 0 !important;
  }

  .fe-text-center-mobile {
    text-align: center !important;
  }
}

/* =============================================================================
   OVERFLOW HELPERS
============================================================================= */

@media (max-width: 768px) {
  .fe-overflow-mobile {
    overflow: auto;
  }
}

/* =============================================================================
   LANDSCAPE MOBILE
============================================================================= */

@media (max-height: 500px) and (orientation: landscape) {
  .fe-section {
    padding-block: 50px;
  }
}

/* =============================================================================
   PRINT
============================================================================= */

@media print {
  .fe-hide-print {
    display: none !important;
  }
}