/* Responsive fixes shared by every page in this folder and subfolders. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg,
iframe,
embed,
object {
  max-width: 100%;
}

img,
picture,
video,
canvas,
svg {
  height: auto;
}

iframe,
embed,
object {
  display: block;
}

table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

pre,
code {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

p,
li,
h1,
h2,
h3,
h4,
h5,
h6,
a,
button,
span,
strong {
  overflow-wrap: anywhere;
}

input,
select,
textarea,
button {
  max-width: 100%;
  font: inherit;
}

input,
select,
textarea {
  font-size: 16px;
}

section,
main,
header,
footer,
nav,
article,
aside,
.container,
.wrapper,
.content,
.content-section,
.section,
.inner,
.hero-content,
.footer-inner {
  max-width: 100%;
}

.visual-nav,
.site-nav,
header nav,
.navbar,
.nav,
.main-nav {
  max-width: 100vw;
}

.visual-nav-links,
.site-nav-links,
.nav-links,
.navbar ul,
header nav ul,
nav ul,
.menu {
  max-width: 100%;
  flex-wrap: wrap;
}

.visual-nav-links,
.site-nav-links,
.nav-links,
.menu {
  min-width: 0;
}

.galeria-masonry,
.masonry-grid {
  width: 100%;
}

.ia-grid,
.skills-grid,
.programs-grid,
.portal-grid,
.cards-grid,
.cv-grid,
.cv-highlights,
.contact-grid,
.gallery-grid,
.grid,
.projects-grid,
.team-grid,
.services-grid,
.features-grid,
.products-grid,
.product-grid,
.char-grid,
.character-grid,
.characters-grid,
.news-grid,
.cast-grid,
.activity-grid,
.activities-grid,
.grid-activities {
  min-width: 0;
}

.gallery-grid,
.product-grid,
.activity-grid,
.activities-grid,
.grid-activities {
  width: 100% !important;
  max-width: 100% !important;
}

.shop-container {
  max-width: 100% !important;
}

.ia-card,
.skill-card,
.portal-card,
.project-card,
.cv-card,
.contact-info-card,
.contact-form,
.gallery-item,
.galeria-card,
.card,
.product-card,
.char-card,
.character-card,
.news-card,
.cast-card {
  max-width: 100%;
  min-width: 0;
}

.activity-card,
.activity-content,
.product-grid,
.gallery-grid {
  max-width: 100%;
}

.btn,
.button,
.cta,
.cta-button,
.btn-submit,
.btn-github,
.galeria-page-btn,
.skills-pagination button,
.ia-pagination button {
  white-space: normal;
}

@media (max-width: 900px) {
  .visual-nav,
  .site-nav {
    position: sticky;
    top: 0;
    align-items: flex-start;
  }

  .visual-nav {
    flex-direction: column;
  }

  .visual-nav-links,
  .site-nav-links {
    width: 100%;
    justify-content: flex-start;
    gap: 10px 14px;
  }

  .page-intro,
  .contact-hero,
  .hero-content,
  .section-title,
  .projects-header,
  .section-header {
    padding-left: 16px;
    padding-right: 16px;
  }

  .contact-grid,
  .ia-grid,
  .cv-grid,
  .cv-highlights,
  .portal-grid,
  .cards-grid,
  .gallery-grid,
  .product-grid,
  .activity-grid,
  .activities-grid,
  .grid-activities,
  .skills-grid,
  .programs-grid {
    grid-template-columns: 1fr;
  }

  .activity-card,
  .activity-content {
    flex-direction: column;
  }
}

@media (max-width: 700px) {
  body.has-visual-nav,
  body.page-inner {
    padding-top: 0;
  }

  .visual-nav,
  .site-nav,
  header,
  .navbar {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .visual-nav-brand,
  .site-nav a.nav-brand,
  .brand,
  .logo {
    max-width: 100%;
    white-space: normal;
  }

  .visual-nav-links a,
  .site-nav a,
  .nav-links a,
  header nav a,
  .navbar a {
    white-space: normal;
  }

  .hero,
  .hero--medium,
  .hero-compact {
    min-height: min(760px, 100svh);
    height: auto;
    padding-top: 96px;
    padding-bottom: 48px;
  }

  .hero-content h1,
  .page-intro h1,
  .section-title h2,
  .projects-header h3,
  .section-header h3 {
    letter-spacing: 0.08em;
  }

  .cta-group,
  .filter-row,
  .galeria-toolbar-row,
  .social-links,
  .video-links {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .cta-group .btn,
  .filter-row > *,
  .galeria-toolbar-row > *,
  .social-links a,
  .video-links a,
  .btn-submit {
    width: 100%;
  }

  .galeria-count {
    margin-left: 0;
  }

  .galeria-masonry,
  .masonry-grid {
    column-count: 1 !important;
    padding-left: 14px;
    padding-right: 14px;
  }

  .ia-main,
  .cv-main,
  .cv-wrapper,
  .contact-main,
  .gallery-wrapper,
  .projects-section,
  .skills-section,
  .portal-section,
  .content-section,
  main {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .ia-card,
  .skill-card,
  .cv-card,
  .contact-info-card,
  .contact-form,
  .project-card {
    padding: 18px;
  }

  .galeria-card,
  .gallery-item,
  .card,
  .product-card,
  .char-card,
  .character-card,
  .news-card,
  .cast-card {
    width: 100% !important;
  }

  .product-grid,
  .gallery-grid,
  .activity-grid,
  .activities-grid,
  .grid-activities {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-content: stretch !important;
    gap: 18px;
  }

  .shop-container {
    flex-direction: column !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    gap: 24px !important;
  }

  .shop-container .sidebar {
    width: 100% !important;
    flex: 1 1 auto !important;
  }

  .grid-activities::after {
    display: none !important;
  }

  .activity-card,
  .product-card,
  .gallery-item {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .activity-card {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 420px) {
  .visual-nav-links,
  .site-nav-links,
  .ia-tabs,
  .cv-tabs,
  .skills-tabs,
  .galeria-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .visual-nav-links a,
  .site-nav a,
  .ia-tab,
  .cv-tab,
  .skills-tab,
  .galeria-filter-btn {
    width: 100%;
    text-align: center;
  }

  .galeria-pagination,
  .skills-pagination,
  .ia-pagination,
  .gallery-pagination {
    flex-direction: column;
  }

  .galeria-page-btn,
  .skills-pagination button,
  .ia-pagination button,
  .gallery-pagination button {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .cat-card,
  .cat-info,
  .special-item,
  .column {
    width: calc(100vw - 60px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .news-card,
  .news-image,
  .news-content {
    width: calc(100vw - 28px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}