html,
body {
  max-width: 100%;
  overflow-x: clip;
}

body.nav-open {
  overflow: hidden;
}

.page-container {
  width: 100%;
  overflow-x: clip;
}

img,
video,
iframe {
  max-width: 100%;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.event-detail-page .table-responsive,
.resources-content-tab .table-responsive,
.content-area .table-responsive,
.hall-of-fame-grid + .table-responsive,
.dog-details-container .table-responsive {
  margin-inline: 0;
}

.info-section,
.partners-section,
.three-column-section,
.gallery-section,
.subscribe-section {
  width: 100%;
  margin-left: 0;
}

.three-col-item,
.event-card,
.clinics-grid-item,
.custom-clinic-card,
.footer-column,
.details-column {
  min-width: 0;
}

.event-buttons .btn,
.buttons a,
.subscribe-form button,
.custom-clinic-button {
  white-space: normal;
}

.dog-year-table,
.lifetime-table,
.hof-table,
.event-table {
  min-width: 680px;
}

.details-table {
  table-layout: fixed;
}

.details-table td,
.details-table th {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 991px) {
  .three-column-section {
    padding: 24px 16px 40px !important;
    gap: 16px !important;
  }

  .three-col-item {
    flex: 1 1 100% !important;
    width: 100%;
    max-width: 100% !important;
    margin: 0;
    padding: 20px 16px !important;
  }

  header .container {
    gap: 12px;
    padding-inline: 16px;
  }

  .logo-container {
    flex: 1 1 auto;
    min-width: 0;
    gap: 12px;
  }

  .logo-text {
    white-space: normal;
    line-height: 1.2;
  }

  header nav {
    width: min(320px, 100vw) !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    padding: 96px 20px 24px !important;
    overflow-y: auto;
    overflow-x: hidden;
    align-items: stretch !important;
    gap: 8px !important;
  }

  header nav a,
  header nav .username {
    width: 100%;
    margin: 0 !important;
    padding-inline: 0 !important;
  }

  header nav .nav-social {
    margin: 12px 0 0;
    flex-wrap: wrap;
  }

  .dropdown-content {
    min-width: 0;
  }

  .banner-slider-section,
  .banner-slider-section > .slider-left,
  .banner-slider-section > .banner-right {
    width: 100% !important;
    max-width: 100% !important;
  }

  .banner-slider-section > .banner-right,
  .banner-right {
    position: static !important;
    transform: none !important;
    inset: auto !important;
    height: auto !important;
  }

  .banner-overlay-content {
    justify-content: space-between !important;
    gap: 24px;
    text-align: center;
    padding: 28px 18px 44px !important;
  }

  .description-text {
    margin: 0 auto !important;
    max-width: min(92vw, 42rem) !important;
  }

  .two-column-section,
  section.two-column-section {
    max-height: none !important;
  }

  .two-column-section .container {
    width: 100%;
    max-width: 100%;
    gap: 0;
  }

  .two-col-left,
  .two-col-right {
    width: 100%;
    padding-inline: 20px !important;
  }

  .two-col-right {
    height: auto !important;
    flex-wrap: wrap;
  }

  .two-col-right .img {
    width: 100%;
    height: auto;
  }

  .events-page,
  .content-wrapper,
  .event-container {
    flex-direction: column;
  }

  .events-sidebar,
  .main-sidebar {
    position: static !important;
    top: auto !important;
    height: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .events-main,
  .content-area {
    width: 100%;
  }

  .events-list {
    flex-direction: column;
  }

  .event-card {
    width: 100% !important;
  }

  .event-container {
    padding: 32px 16px 0 !important;
    gap: 24px;
  }

  .event-logo {
    width: auto !important;
    align-self: center;
  }

  .event-info-section,
  .trial-details-section.container,
  .event-register-section {
    width: 100% !important;
    max-width: 100% !important;
  }

  .event-columns {
    gap: 24px !important;
    justify-content: flex-start !important;
  }

  .event-column {
    flex: 1 1 260px;
  }

  .event-buttons {
    width: 100%;
    max-width: 100%;
  }

  .event-buttons .btn {
    width: 100%;
  }

  .details-row {
    flex-direction: column;
    gap: 24px;
  }

  .footer-content {
    gap: 16px;
    padding-inline: 20px !important;
  }
}

@media (max-width: 767px) {
  .container,
  header .container,
  .footer-content,
  .slider-container,
  .clinics-grid-container,
  .content-area,
  .events-page {
    padding-inline: 16px;
  }

  .logo img {
    width: auto;
    max-width: 100%;
    height: 72px;
  }

  .logo-text {
    font-size: 0.95rem;
  }

  .banner-slider-section {
    min-height: clamp(320px, 72vw, 520px) !important;
    aspect-ratio: auto !important;
  }

  .heading-text {
    font-size: clamp(1.1rem, 5vw, 1.6rem) !important;
    text-align: center !important;
  }

  .description-text {
    font-size: clamp(0.9rem, 3.8vw, 1rem) !important;
  }

  .partners-section,
  .info-section,
  .gallery-section,
  .subscribe-section,
  .three-column-section {
    padding-inline: 0;
  }

  .info-content,
  .subscribe-content,
  .slider-content,
  .slider-wrapper {
    width: 100%;
    max-width: 100%;
  }

  .news-item,
  .event {
    width: 100%;
  }

  .event {
    align-items: flex-start;
    gap: 12px;
  }

  .details {
    min-width: 0;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    padding-inline: 16px !important;
  }

  .subscribe-content {
    flex-direction: column;
    align-items: stretch !important;
    gap: 16px;
    padding-inline: 16px !important;
  }

  .subscribe-form {
    flex-direction: column;
    align-items: stretch;
  }

  .subscribe-form input[type="email"],
  .subscribe-form button {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .event-banner-img img,
  .event-banner-img .overlay {
    height: clamp(260px, 58vw, 380px);
  }

  .event-banner-overlay {
    left: 50% !important;
    width: min(calc(100% - 32px), 42rem);
    padding: 20px 18px !important;
    transform: translate(-50%, -60%) !important;
  }

  .event-banner-details {
    align-items: center;
    text-align: center;
  }

  h1.event-banner-title {
    max-width: 100%;
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
    text-align: center !important;
  }

  .details-table,
  .details-table tbody,
  .details-table tr,
  .details-table td {
    display: block;
    width: 100%;
  }

  .details-table tr {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
  }

  .details-table td {
    padding: 4px 0;
    border: 0;
  }

  .details-table td:first-child {
    width: 100% !important;
    padding-bottom: 2px;
  }

  .dog-year-filters div,
  .lifetime-filters div {
    flex: 1 1 100%;
  }

  .dog-year-filters select,
  .lifetime-filters select {
    width: 100% !important;
  }

  .footer-column {
    flex: 1 1 100%;
    margin: 0;
  }
}

@media (max-width: 479px) {
  header .container {
    height: 84px !important;
    padding-inline: 12px;
  }

  .logo img {
    height: 60px;
  }

  .logo-text {
    display: block !important;
    font-size: 0.8rem;
  }

  .hamburger {
    width: 24px;
    height: 24px;
  }

  .hamburger-bar {
    width: 18px;
  }

  header nav {
    padding-top: 84px !important;
  }

  .heading-text {
    font-size: 1rem !important;
  }

  .description-text {
    font-size: 0.82rem !important;
  }

  .gallery-grid {
    grid-template-columns: 1fr !important;
  }

  .date,
  .event-date,
  .event-date-badge {
    flex: 0 0 auto;
  }

  .footer-copy {
    padding-inline: 12px;
    line-height: 1.4;
  }
}