/*
 ASEMANEEHA - PHASE 225
 Home responsive refinement.
 Scoped to the home page.
*/

/* =========================================
   1. HOME TITLE
========================================= */

@media (max-width: 640px) {

  .asem-home-responsive-223
  .asem-home-title-223 {

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 30px !important;

    padding: 0 2px !important;

    font-size: clamp(12px, 3.15vw, 16px) !important;
    font-weight: 600 !important;

    line-height: 1.5 !important;
    letter-spacing: -0.45px !important;

    white-space: nowrap !important;
    text-align: center !important;

    box-sizing: border-box !important;
  }

  .asem-home-responsive-223
  .flex:has(> .asem-home-title-223) {

    width: 100% !important;
    max-width: 100% !important;

    gap: 0 !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
  }

  .asem-home-responsive-223
  .flex:has(> .asem-home-title-223)
  > span:not(.asem-home-title-223) {

    display: none !important;
  }
}

/* =========================================
   2. ORGANIZATION TITLE - SINGLE LINE
========================================= */

.asem-home-responsive-223
.flex.flex-1.flex-col.items-end.justify-end.text-white:has(
  > span.font-benazanin
) {

  display: flex !important;

  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: center !important;
  justify-content: flex-end !important;

  gap: 6px !important;

  min-width: 0 !important;
  white-space: nowrap !important;
}

.asem-home-responsive-223
.flex.flex-1.flex-col.items-end.justify-end.text-white
> span.font-benazanin {

  display: inline-block !important;

  width: auto !important;

  font-size: clamp(10px, 1.1vw, 19px) !important;
  line-height: 1.4 !important;

  white-space: nowrap !important;
}

@media (max-width: 640px) {

  .asem-home-responsive-223
  .flex.flex-1.flex-col.items-end.justify-end.text-white:has(
    > span.font-benazanin
  ) {

    width: 100% !important;

    justify-content: center !important;

    gap: 4px !important;
  }

  .asem-home-responsive-223
  .flex.flex-1.flex-col.items-end.justify-end.text-white
  > span.font-benazanin {

    font-size: clamp(9px, 2.35vw, 12px) !important;

    letter-spacing: -0.2px !important;
  }
}

/* =========================================
   3. DESKTOP POSTER HIGHLIGHT WIDTH
========================================= */

@media (min-width: 1025px) {

  .asem-home-responsive-223
  .asem-home-posters-222
  .swiper-slide
  .group.relative.my-auto {

    width: 181px !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }

  .asem-home-responsive-223
  .asem-home-posters-222
  .swiper-slide
  .group.relative.my-auto
  img[alt="Banner Poster"] {

    display: block !important;

    width: 181px !important;
    max-width: 100% !important;

    height: 256px !important;
    max-height: 256px !important;

    object-fit: contain !important;
    object-position: center !important;
  }

  .asem-home-responsive-223
  .asem-home-posters-222
  .swiper-slide
  .group.relative.my-auto
  > div.absolute {

    width: 100% !important;
    height: 100% !important;

    border-radius: 8px !important;
  }
}

/* =========================================
   4. MOBILE BANNER TOP SPACING
========================================= */

@media (max-width: 640px) {

  .asem-home-responsive-223.home
  > br {

    display: none !important;
  }

  .asem-home-responsive-223
  .flex.items-center.justify-center.px-24.py-5 {

    padding-top: 10px !important;
    padding-bottom: 10px !important;

    margin-top: 0 !important;
  }
}

/* =========================================
   5. BANNER TO SERVICES TITLE
========================================= */

@media (max-width: 640px) {

  .asem-home-responsive-223
  .asem-home-title-223 {

    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .asem-home-responsive-223
  .relative.min-h-96.py-8 {

    padding-top: 12px !important;
  }
}

/* =========================================
   6. CALENDAR TO FEATURED MARTYRS
========================================= */

@media (max-width: 640px) {

  .asem-home-responsive-223
  .asem-home-calendar-222 {

    padding-bottom: 12px !important;
  }

  .asem-home-responsive-223
  .asem-home-calendar-222
  + .container {

    margin-top: 20px !important;
  }
}

/* =========================================
   7. KEEP POSTER HEIGHTS UNCHANGED
========================================= */

.asem-home-responsive-223
.asem-home-posters-222
.swiper-slide
.h-64 {

  height: 256px !important;
  min-height: 256px !important;
  max-height: 256px !important;
}

/* =========================================
   8. MOBILE POSTER CENTERING
========================================= */

@media (max-width: 1024px) {

  .asem-home-responsive-223
  .asem-home-posters-222
  .swiper-slide {

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .asem-home-responsive-223
  .asem-home-posters-222
  img[alt="Banner Poster"] {

    display: block !important;

    width: auto !important;
    max-width: 100% !important;

    height: 256px !important;
    max-height: 256px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    object-fit: contain !important;
  }
}