/*
 * Responsywny szlif komponentów ZHP.
 * Plik jest ładowany po stylach komponentów i poprawia układy na telefonach,
 * tabletach, laptopach oraz dużych monitorach bez ingerencji w Flynt core.
 */

flynt-component[name='ContactPeople'] .peopleGrid,
flynt-component[name='VideoGallery'] .videoGallery,
flynt-component[name='TeamsOverview'] .teamsGrid,
flynt-component[name='PostCards'] .postsGrid,
flynt-component[name='UniformGuide'] .uniformItems,
flynt-component[name='InformationTiles'] .tilesGrid,
flynt-component[name='TeamInformation'] .teamInfoGrid {
  min-width: 0;
}

flynt-component[name='ContactPeople'] .personCard,
flynt-component[name='VideoGallery'] .videoCard,
flynt-component[name='TeamsOverview'] .teamCard,
flynt-component[name='PostCards'] .postCard,
flynt-component[name='UniformGuide'] .uniformItem,
flynt-component[name='InformationTiles'] .infoTile,
flynt-component[name='TeamInformation'] .teamInfoPanel {
  min-width: 0;
}

@media (max-width: 47.99rem) {
  flynt-component[name='ContactPeople'] .peopleGrid,
  flynt-component[name='VideoGallery'] .videoGallery,
  flynt-component[name='TeamsOverview'] .teamsGrid,
  flynt-component[name='PostCards'] .postsGrid,
  flynt-component[name='UniformGuide'] .uniformItems,
  flynt-component[name='InformationTiles'] .tilesGrid,
  flynt-component[name='TeamInformation'] .teamInfoGrid,
  flynt-component[name='TeamLeadersBio'] .leadersGrid,
  flynt-component[name='Testimonials'] .testimonialsGrid {
    grid-template-columns: 1fr;
  }

  flynt-component[name='ContactPeople'] .personCard > img,
  flynt-component[name='ContactPeople'] .personPlaceholder {
    aspect-ratio: 4 / 3;
  }

  flynt-component[name='ImageTextStory'] .storyGrid { gap: 1.75rem; }
  flynt-component[name='ImageTextStory'] .storyMedia { aspect-ratio: 4 / 3 !important; }
  flynt-component[name='ImageTextStory'] .storyStat { bottom: 0.75rem; right: 0.75rem; }

  flynt-component[name='PhotoMosaic'] .mosaic { gap: 0.5rem; }
  flynt-component[name='PhotoMosaic'] .mosaicItem { border-radius: 0.85rem; }

  flynt-component[name='CallToAction'] .ctaCard {
    border-radius: 1.25rem;
    min-height: clamp(31rem, 82svh, 42rem);
  }

  flynt-component[name='CallToAction'] .ctaContent { padding: 1.25rem; }

  flynt-component[name='UpcomingEvents'] .eventsHeader,
  flynt-component[name='PostCards'] .postCardsHeader,
  flynt-component[name='YearCalendar'] .calendarHeader {
    align-items: stretch;
    flex-direction: column;
  }

  flynt-component[name='UpcomingEvents'] .eventCard > a {
    align-items: start;
    grid-template-columns: 4.25rem minmax(0, 1fr);
  }

  flynt-component[name='YearCalendar'] .calendarHeader { display: grid; }
  flynt-component[name='YearCalendar'] .calendarYear { font-size: 3.5rem; }
  flynt-component[name='YearCalendar'] .calendarMonth li a {
    align-items: start;
    grid-template-columns: 3.2rem minmax(0, 1fr);
  }
  flynt-component[name='YearCalendar'] .calendarMonth li a > :last-child:not(:nth-child(2)) { grid-column: 2; }

  flynt-component[name='BankAccountCard'] .bankCard { padding: 1rem; }
  flynt-component[name='BankAccountCard'] .bankQr { max-width: 18rem; width: 100%; }

  flynt-component[name='DownloadCards'] .downloadCard {
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
  }

  flynt-component[name='JoinSteps'] .stepItem {
    gap: 0.85rem;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    padding: 1rem;
  }

  flynt-component[name='FrequentlyAskedQuestions'] .faqAnswer { padding-right: 0; }

  flynt-component[name='ImpactNumbers'] .numbersGrid { margin-top: 2.5rem; }
  flynt-component[name='ImpactNumbers'] .numberItem { padding: 1rem 0.75rem; }
  flynt-component[name='ImpactNumbers'] .numberItem dd span { font-size: clamp(2.4rem, 15vw, 4.5rem); }

  flynt-component[name='TeamHero'] {
    min-height: clamp(38rem, 88svh, 50rem);
  }

  flynt-component[name='TeamHero'] .teamHeroInner {
    gap: 1.25rem;
    padding-block: 7rem 1.25rem;
  }

  flynt-component[name='TeamHero'] .teamHeroInfo { padding: 1rem; }

  flynt-component[name='EquipmentChecklist'] .checklistItem { padding-inline: 0.45rem; }

  flynt-component[name='YouTubeParallaxGrid'] .videoGridHeader {
    display: grid;
    gap: 1rem;
  }
}

@media (min-width: 48rem) and (max-width: 79.99rem) {
  flynt-component[name='ContactPeople'] .peopleGrid,
  flynt-component[name='TeamsOverview'] .teamsGrid,
  flynt-component[name='PostCards'] .postsGrid,
  flynt-component[name='UniformGuide'] .uniformItems,
  flynt-component[name='InformationTiles'] .tilesGrid,
  flynt-component[name='TeamLeadersBio'][data-layout='cards'] .leadersGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  flynt-component[name='VideoGallery'] .videoGallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  flynt-component[name='ImageTextStory'] .storyGrid {
    gap: clamp(2rem, 4vw, 3.5rem);
  }

  flynt-component[name='TeamHero'] .teamHeroInner,
  flynt-component[name='HeroRecruitment'] .heroContent {
    max-width: 70rem;
  }
}

@media (min-width: 80rem) {
  flynt-component[name='ContactPeople'] .peopleGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  flynt-component[name='TeamsOverview'] .teamsGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  flynt-component[name='InformationTiles'] .tilesGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (hover: none) {
  flynt-component[name='PostCards'] .postCard:hover,
  flynt-component[name='TeamsOverview'] .teamCard:hover,
  flynt-component[name='TeamLeadersBio'] .leaderCard:hover,
  flynt-component[name='InformationTiles'] .infoTile:hover,
  flynt-component[name='JoinSteps'] .stepItem:hover {
    transform: none;
  }
}