/* Responsive rules. */
/* Desktop styles live in style.css. */
/* Sponsor detail tablet layout. */
@media (max-width:960px) {
    .sponsor-detail-hero {
        padding: 60px 20px
    }

    .sponsor-detail-content {
        padding: 28px 22px 40px
    }

    .sponsor-detail-hero__inner h1 {
        font-size: clamp(2.4rem, 7vw, 3.2rem)
    }
}

/* Sponsor detail phone layout. */
@media (max-width:680px) {
    .sponsor-detail-page {
        margin: 20px 18px 60px
    }

    .sponsor-detail-hero {
        padding: 50px 16px
    }

    .sponsor-detail-content {
        padding: 24px 18px 32px
    }

    .sponsor-detail-actions {
        flex-direction: column;
        align-items: stretch
    }
}

/* Medium grid layouts. */
@media (max-width:1100px) {
    .treatments-page .treatments-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .treatments-page .specialties-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .overons-page .team-grid {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
        gap: 26px
    }

    .sponsor-page .sponsor-company {
        grid-template-columns: 1fr;
        text-align: center
    }
}

/* Main mobile layout. */
@media (max-width:760px) {
    .main-content {
        padding-inline: var(--page-padding-mobile)
    }

    .homepage,
    .contact-page,
    .treatments-page {
        padding: 20px var(--page-padding-mobile) 60px
    }

    section,
    .section,
    .contact-page .contact-section,
    .contact-page .contact-map-section,
    .treatments-page .treatments-section,
    .treatments-page .specialties-section {
        padding: 30px var(--section-padding-mobile)
    }

    .contact-page .contact-hero,
    .treatments-page .treatments-hero,
    .overons-page .hero-section,
    .tarieven-page .tarieven-hero {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 45px 24px 30px
    }

    .contact-page .contact-grid,
    .contact-page .contact-support-grid,
    .contact-page .contact-map-section,
    .treatments-page .treatments-grid,
    .treatments-page .specialties-grid {
        grid-template-columns: 1fr
    }

    .overons-page .team-grid {
        grid-template-columns: 1fr;
        gap: 22px
    }

    .overons-page .team-card {
        min-height: auto
    }

    .overons-page .image-frame {
        height: 220px
    }

    .overons-page .team-card-content {
        padding: 20px 18px 24px
    }

    .overons-page .content-section {
        padding: 28px 24px
    }

    .tarieven-page .tarieven-container {
        padding: 32px 24px
    }

    .sponsor-page {
        margin: 20px var(--page-padding-mobile) 60px
    }

    .sponsor-page .sponsor-banner {
        height: 300px
    }

    .sponsor-page .sponsor-content {
        padding: 32px 24px
    }

    .therapist-card {
        grid-template-columns: 1fr;
        padding: 24px
    }

    .notfound-page .notfound-card {
        padding: 50px 24px
    }
}

/* Narrow phones. */
@media (max-width:600px) {
    .contact-page .hours-table td {
        display: block;
        width: 100%;
        padding: 8px 0;
        text-align: left
    }

    .contact-page .hours-table td:first-child {
        width: 100%;
        padding-right: 0
    }

    .contact-page .hours-table td:last-child {
        text-align: left
    }

    .treatments-page .tariffs-cta {
        flex-direction: column;
        align-items: flex-start
    }

    .tarieven-page .tarieven-tabel-box {
        overflow-x: auto
    }
}

/* Small about-page cards. */
@media (max-width:520px) {

    .contact-page .contact-hero,
    .treatments-page .treatments-hero,
    .overons-page .hero-section,
    .tarieven-page .tarieven-hero {
        padding: 30px 18px 22px
    }

    .contact-page .hero-highlight,
    .treatments-page .hero-highlight,
    .overons-page .hero-highlight,
    .tarieven-page .hero-highlight {
        padding: 22px
    }

    .contact-page .hero-highlight h2,
    .treatments-page .hero-highlight h2,
    .overons-page .hero-highlight h2,
    .tarieven-page .hero-highlight h2 {
        font-size: 1.25rem
    }

    .overons-page .team-card {
        border-radius: 24px
    }

    .overons-page .team-card-content h3 {
        font-size: 1.18rem
    }

    .overons-page .team-card-content p {
        font-size: 0.92rem
    }
}

/* Homepage carousel tablet size. */
@media (max-width:1100px) {
    .homepage .homepage-team-card {
        flex-basis: calc((100% - 24px) / 2)
    }
}

/* Homepage tablet layout. */
@media (max-width:980px) {

    .homepage .homepage-split,
    .homepage .homepage-location-grid {
        grid-template-columns: 1fr
    }

    .homepage .homepage-hero-chrome .navbar-container {
        padding: 26px 24px
    }

    .homepage .homepage-location-grid {
        grid-template-areas: "info" "image" "contact" "map" "hours"
    }

    .homepage .homepage-service-scroll {
        grid-auto-columns: minmax(260px, 78vw)
    }

    .homepage .homepage-map iframe {
        min-height: 340px
    }
}

/* Homepage phone layout. */
@media (max-width:680px) {
    .homepage {
        gap: 36px;
        padding: 0 16px 58px
    }

    .homepage .homepage-hero {
        width: calc(100% + 32px);
        min-height: 620px;
        margin: 0 -16px
    }

    .homepage .homepage-hero-chrome .navbar-links {
        background: rgba(255, 255, 255, .34)
    }

    .homepage .homepage-hero-overlay {
        width: min(100% - 32px, 1180px);
        padding: 250px 0 56px
    }

    .homepage .homepage-section,
    .homepage .homepage-final-cta {
        padding: 26px;
        border-radius: 24px
    }

    .homepage .homepage-image-panel,
    .homepage .homepage-building-image {
        min-height: 240px
    }

    .homepage .homepage-team-carousel {
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        gap: 10px
    }

    .homepage .homepage-team-card {
        flex-basis: 100%
    }

    .homepage .homepage-slider-control {
        width: 42px;
        height: 42px;
        font-size: 1.6rem
    }

    .homepage .homepage-team-card img {
        height: 220px
    }

    .homepage .homepage-hours td {
        display: block;
        text-align: left
    }

    .homepage .homepage-hours td:last-child {
        text-align: left;
        padding-top: 0
    }
}

/* Homepage hero navbar. */
@media (max-width:980px) {
    .homepage .homepage-hero-chrome .navbar-container {
        padding: 26px 24px
    }
}

/* Homepage hero nav contrast. */
@media (max-width:680px) {
    .homepage .homepage-hero-chrome .navbar-links {
        background: rgba(255, 255, 255, .34)
    }
}

/* Tablet split panels. */
@media (max-width:980px) {

    .contact-page .contact-hero,
    .treatments-page .treatments-hero,
    .overons-page .hero-section,
    .tarieven-page .tarieven-hero {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 45px 24px 30px
    }

    .sponsor-page .sponsor-company {
        grid-template-columns: 1fr;
        text-align: center
    }

    .sponsor-page .sponsor-description,
    .sponsor-page .sponsor-description p {
        text-align: center
    }
}

/* Sponsor and tariff phones. */
@media (max-width:680px) {
    .sponsors-main {
        padding: 20px var(--page-padding-mobile) 60px
    }

    .tarieven-page {
        padding: 20px 0 60px
    }

    .sponsor-page .sponsor-content {
        padding: 32px 24px
    }

    .sponsor-page .sponsor-banner {
        height: 310px
    }

    .sponsor-detail-page {
        margin: 20px var(--page-padding-mobile) 60px
    }
}

/* 404 and therapist tablet layout. */
@media (max-width:980px) {

    .notfound-page .notfound-card,
    .therapist-card {
        grid-template-columns: 1fr
    }
}

/* 404 and therapist phones. */
@media (max-width:680px) {

    .notfound-page .hero-highlight,
    .therapist-highlight {
        padding: 22px
    }

    .notfound-page .notfound-copy,
    .notfound-page .notfound-card {
        text-align: center
    }

    .notfound-page .notfound-card h1 {
        justify-self: center
    }

    .notfound-page .notfound-card .btn {
        width: auto;
        justify-self: center
    }
}

/* Practice photo sections. */
@media (max-width:980px) {

    .contact-page .contact-photo-section,
    .treatments-page .treatments-photo-section {
        grid-template-columns: 1fr;
        padding: 26px
    }

    .treatments-page .treatments-photo {
        order: 2
    }
}

/* Practice photo height. */
@media (max-width:680px) {

    .contact-page .contact-photo,
    .treatments-page .treatments-photo {
        min-height: 230px
    }
}

/* Navbar tablet layout. */
@media (max-width:1200px) {
    .navbar-container {
        padding: 24px 40px;
        gap: 32px
    }

    .navbar-logo img {
        width: 220px
    }

    .navbar-links {
        gap: 10px;
        padding: 10px 12px
    }

    .navbar-btn {
        padding: 9px 20px;
        font-size: 0.9rem
    }
}

/* Wrapped navbar. */
@media (max-width:950px) {
    .navbar-container {
        flex-direction: column;
        justify-content: center;
        gap: 22px;
        padding: 28px 24px;
        min-height: auto
    }

    .navbar-logo img {
        width: 230px
    }

    .navbar-links {
        margin-left: 0;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
        border-radius: 28px
    }

    .navbar-btn {
        padding: 9px 18px
    }
}

/* Footer tablet layout. */
@media (max-width:950px) {
    .footer-container {
        padding: 40px 40px;
        grid-template-columns: 1fr 1fr
    }

    .footer-logo {
        grid-column: 1 / -1
    }

    .footer-credits {
        position: relative;
        max-width: 280px;
        z-index: 500
    }

    .footer-credit-panel {
        right: auto;
        left: 0;
        z-index: 720
    }

    .footer-credit-card {
        right: auto;
        left: 0;
        bottom: calc(100% + 10px);
        z-index: 950;
        transform: translateY(8px)
    }

    .footer-credit-item:hover .footer-credit-card,
    .footer-credit-item:focus-within .footer-credit-card {
        transform: translateY(0)
    }
}

/* Footer phone layout. */
@media (max-width:600px) {
    .site-footer {
        border-top-left-radius: 28px;
        border-top-right-radius: 28px
    }

    .footer-container {
        padding: 34px 24px;
        grid-template-columns: 1fr;
        gap: 32px
    }

    .footer-logo img {
        width: 190px
    }

    .footer-title {
        font-size: 1.6rem
    }

    .footer-credits {
        max-width: none;
        padding-top: 0
    }

    .footer-credit-list {
        display: grid
    }

    .footer-credit-details summary {
        min-width: 0
    }

    .footer-credit-panel {
        position: static;
        width: 100%;
        margin-top: 10px;
        overflow: visible
    }

    .footer-credit-card {
        left: 0;
        right: auto;
        bottom: calc(100% + 10px);
        width: min(260px, 86vw)
    }
}

/* Extra tablet polish. */
@media (max-width:900px) {
    :root {
        --page-padding: 24px;
        --section-padding: 34px;
        --gap-page: 28px;
        --gap-card: 18px
    }

    .contact-page .contact-card,
    .treatments-page .treatment-card,
    .treatments-page .specialty-card,
    .tarieven-page .tarieven-kaart,
    .homepage .homepage-practice-info,
    .homepage .homepage-contact-card,
    .homepage .homepage-hours {
        padding: 22px
    }

    .contact-page .contact-photo-section,
    .treatments-page .treatments-photo-section {
        gap: 22px
    }

    .sponsor-detail-content {
        border-radius: 24px
    }
}

/* Compact mobile navbar. */
@media (max-width:760px) {
    .site-header {
        overflow: visible
    }

    .navbar-container {
        gap: 16px;
        padding: 20px 18px
    }

    .navbar-logo img {
        width: 190px
    }

    .navbar-links {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 10px;
        border-radius: 20px
    }

    .navbar-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 8px 10px;
        font-size: .82rem;
        text-align: center;
        white-space: normal;
        line-height: 1.2
    }

    .homepage .homepage-hero-chrome .navbar-container {
        padding: 18px
    }

    .homepage .homepage-hero-chrome .navbar-links {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        background: rgba(255, 255, 255, .36);
        backdrop-filter: blur(12px)
    }
}

/* Tiny phone navbar. */
@media (max-width:430px) {
    .navbar-logo img {
        width: 170px
    }

    .navbar-links,
    .homepage .homepage-hero-chrome .navbar-links {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .navbar-btn {
        font-size: .8rem;
        padding-inline: 8px
    }

    .homepage .homepage-hero-overlay {
        padding-top: 285px
    }

    .homepage .homepage-hero {
        min-height: 660px
    }
}

/* Mobile type and media. */
@media (max-width:680px) {
    h2 {
        font-size: 2rem;
        margin-bottom: 24px
    }

    .section-header {
        margin-bottom: 24px
    }

    .section-header h2,
    .homepage .homepage-copy-panel h2,
    .homepage .homepage-section-heading h2,
    .homepage .homepage-final-cta h2,
    .contact-page .contact-hero h1,
    .treatments-page .treatments-hero h1,
    .overons-page .hero-section h1,
    .tarieven-page .tarieven-hoofdtitel {
        font-size: 2rem;
        line-height: 1.15
    }

    .contact-page .contact-hero p,
    .treatments-page .treatments-hero-subtitle,
    .overons-page .hero-copy>p:not(.eyebrow),
    .tarieven-page .tarieven-intro,
    .homepage .homepage-hero p {
        font-size: 1rem
    }

    .btn,
    .homepage .homepage-button {
        width: 100%;
        min-height: 46px
    }

    .hero-buttons,
    .contact-actions,
    .homepage-services-action {
        width: 100%;
        align-items: stretch
    }

    .contact-page .map-container iframe,
    .homepage .homepage-map iframe {
        min-height: 280px;
        border-radius: 18px
    }

    .sponsor-page .sponsor-circle {
        width: calc(100% - 32px);
        bottom: 22px;
        padding: 14px 18px
    }

    .sponsor-page .sponsor-circle h1 {
        font-size: 2rem
    }

    .sponsor-page .sponsor-logo img {
        width: 120px;
        height: 120px
    }

    .sponsor-detail-gallery {
        grid-template-columns: 1fr
    }

    .sponsor-detail-caption {
        padding: 20px
    }

    .therapist-image-wrap {
        max-height: 420px
    }

    .therapist-content h1 {
        text-align: left;
        font-size: 2rem
    }
}

/* Short landscape screens. */
@media (max-height:520px) and (orientation:landscape) {
    .navbar-container {
        min-height: auto;
        padding-block: 14px
    }

    .homepage .homepage-hero {
        min-height: 520px
    }

    .homepage .homepage-hero-overlay {
        padding-top: 170px;
        padding-bottom: 44px
    }

    .contact-page .contact-hero,
    .treatments-page .treatments-hero,
    .overons-page .hero-section,
    .tarieven-page .tarieven-hero {
        padding-block: 28px
    }

    .login-page-wrapper {
        align-items: flex-start;
        padding-block: 20px
    }
}