/*
 * ESN phone-only responsive overrides.
 * This file is injected at runtime only on templates that already load /css/esn.css.
 */
@media (max-width: 767px), (hover: none) and (pointer: coarse) and (max-width: 932px) and (max-height: 500px) {
  :root {
    --topbar-h: 30px;
    --navbar-only-h: 68px;
    --nav-h: calc(var(--topbar-h) + var(--navbar-only-h));
  }

  html,
  body {
    overflow-x: hidden;
  }

  .container,
  .wrap,
  .navbar .container,
  .navbar .nav-wrap,
  .diensten-filter .container,
  .proj-filter .container {
    padding-inline: 16px !important;
  }

  .section-label {
    margin-bottom: 10px !important;
  }

  .section-title {
    font-size: clamp(1.7rem, 8vw, 2.25rem) !important;
    line-height: 1.22 !important;
    margin-bottom: 14px !important;
  }

  .section-desc {
    font-size: 0.96rem !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
  }

  .topbar {
    height: var(--topbar-h) !important;
    font-size: 0.64rem !important;
  }

  .topbar .container {
    justify-content: center !important;
    gap: 0 !important;
    padding-inline: 4px !important;
  }

  .topbar-left,
  .topbar-right {
    display: none !important;
  }

  .topbar-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 auto !important;
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .topbar-center .topbar-item {
    gap: 2px !important;
    font-size: clamp(0.54rem, 2.25vw, 0.66rem) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  .topbar-center .topbar-item svg {
    display: block !important;
    width: 9px !important;
    height: 9px !important;
  }

  .topbar-center .topbar-item + .topbar-item::before {
    content: none !important;
  }

  .topbar-phone {
    display: none !important;
  }

  .navbar {
    height: var(--navbar-only-h) !important;
    transform: translateY(var(--topbar-h)) !important;
  }

  .navbar.navbar-lifted,
  body.nav-compact .navbar {
    transform: translateY(0) !important;
  }

  .nav-logo img {
    height: clamp(38px, 10vw, 46px) !important;
    top: 0 !important;
  }

  .nav-toggle {
    padding: 10px !important;
    margin-inline-start: 8px;
  }

  .nav-toggle span {
    width: 22px !important;
  }

  .mobile-menu {
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: calc(var(--nav-h) + 18px) 12px 18px !important;
    overflow-y: auto !important;
    gap: 4px !important;
  }

  .mobile-menu a {
    width: 100% !important;
    max-width: 520px;
    margin: 0 auto;
    font-size: 1.04rem !important;
    line-height: 1.3;
    padding: 14px 16px !important;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.65);
    transform: none !important;
    opacity: 1 !important;
  }

  .mobile-menu-subservice-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-inline-start: 8px;
    white-space: normal;
  }

  .mobile-menu-subservice-sep {
    font-size: 0.76em;
    opacity: 0.82;
  }

  .mobile-menu-subservice {
    font-size: 0.78em;
    font-weight: 500;
    letter-spacing: 0.01em;
    opacity: 0.9;
  }

  .mobile-menu.active a {
    transform: none !important;
    opacity: 1 !important;
  }

  .mobile-menu a:hover {
    background: var(--c-accent-soft);
    color: var(--c-accent) !important;
  }

  .mobile-menu a.active {
    color: var(--c-accent) !important;
    background: var(--c-accent-soft) !important;
    box-shadow: inset 0 0 0 1px var(--c-border-accent);
    font-weight: 700;
  }

  .hero,
  .diensten,
  .over-ons,
  .projecten,
  .werkwijze,
  .reviews,
  .alle-diensten,
  .offerte,
  .faq,
  .cta-banner,
  .blog-featured,
  .blog-grid-section,
  .blog-seo,
  .blog-cta,
  .proj-content,
  .proj-gallery,
  .proj-related,
  .proj-cta,
  .service-seo-block,
  .sub-diensten,
  .werkwijze-section,
  .service-projecten,
  .service-faq,
  .service-cta,
  .contact-section,
  .contact-diensten {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  #hero {
    display: block !important;
    min-height: calc(100vh - 56px) !important;
    min-height: calc(100svh - 56px) !important;
  }

  .hero {
    min-height: auto !important;
    padding-bottom: 36px !important;
  }

  #hero > .container {
    width: 100% !important;
  }

  .hero-content {
    max-width: 100% !important;
    padding-top: calc(var(--nav-h) + 18px) !important;
    padding-bottom: 4px !important;
  }

  .hero h1 {
    font-size: clamp(1.7rem, 8vw, 2.3rem) !important;
    line-height: 1.2 !important;
  }

  .hero-subtitle,
  .hero .hero-sub,
  .dienst-hero .hero-sub,
  .service-hero .hero-desc,
  .blog-hero .hero-sub,
  .page-hero p,
  .dienst-cta p,
  .blog-cta p,
  .proj-cta p {
    font-size: 0.96rem !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
  }

  .hero-actions,
  .hero-trust,
  .hero-ctas,
  .cta-buttons,
  .cta-btns,
  .blog-cta .cta-buttons,
  .dienst-cta .cta-buttons,
  .proj-cta .cta-btns {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .hero .hero-actions {
    margin-bottom: 6px !important;
  }

  .btn,
  .btn-sm,
  .btn-lg,
  .btn--sm,
  .btn--full,
  .hero-ctas .btn,
  .cta-buttons .btn,
  .cta-btns a {
    width: 100%;
    justify-content: center;
    min-height: 46px;
    padding-inline: 16px !important;
  }

  .hero-scroll {
    display: none !important;
  }

  #hero .hero-trustoo-widget {
    display: none !important;
  }

  #hero .hero-trustoo-widget .trustoo-widget {
    width: 100% !important;
    transform: scale(0.72) !important;
    transform-origin: bottom center !important;
  }

  #hero .hero-trustoo-widget .scss-widget__reviewSourcesContainer,
  #hero .hero-trustoo-widget .scss-widget__sourceLogos,
  #hero .hero-trustoo-widget .scss-widget__sourceLogosRow,
  #hero .hero-trustoo-widget [class*="reviewSourcesContainer"],
  #hero .hero-trustoo-widget [class*="sourceLogos"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }

  #hero .hero-trustoo-widget .scss-widget__sourceLogosRow > *,
  #hero .hero-trustoo-widget [class*="sourceLogosRow"] > * {
    flex: 0 0 auto !important;
  }

  #hero .hero-trustoo-widget .scss-widget__sourceLogosRow .scss-widget__logoCard,
  #hero .hero-trustoo-widget .scss-widget__sourceLogosRow .logoCard,
  #hero .hero-trustoo-widget [class*="sourceLogosRow"] [class*="logoCard"],
  #hero .hero-trustoo-widget [class*="sourceLogosRow"] .logoCard {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #hero .hero-trustoo-widget .scss-widget__sourceLogosRow img,
  #hero .hero-trustoo-widget [class*="sourceLogosRow"] img {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    height: 16px !important;
  }

  #hero .hero-trustoo-widget .scss-widget__sourceLogosRow .scss-widget__googleLogo,
  #hero .hero-trustoo-widget .scss-widget__sourceLogosRow .googleLogo,
  #hero .hero-trustoo-widget [class*="sourceLogosRow"] [class*="googleLogo"],
  #hero .hero-trustoo-widget [class*="sourceLogosRow"] .googleLogo {
    height: 14px !important;
  }

  .hero .stats {
    position: relative !important;
    inset: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin-top: 2px !important;
    padding-top: 0 !important;
    z-index: 4 !important;
  }

  .hero .stats-inner {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px 0 !important;
    overflow: visible !important;
  }

  .hero .stats-inner::before {
    display: block !important;
    left: -2% !important;
    right: -2% !important;
    top: 50% !important;
    height: 68px !important;
    transform: translateY(-50%) rotate(-1deg) !important;
    opacity: 0.76 !important;
    clip-path: inset(0 100% 0 0) !important;
    -webkit-clip-path: inset(0 100% 0 0) !important;
  }

  .hero .stats-inner.smeared::before {
    clip-path: inset(0 0 0 0) !important;
    -webkit-clip-path: inset(0 0 0 0) !important;
  }

  .hero .stat-item {
    padding: 5px 6px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    gap: 5px !important;
  }

  .hero .stat-icon {
    width: 24px !important;
    height: 24px !important;
  }

  .hero .stat-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

  .hero .stat-icon::after {
    display: none !important;
  }

  .hero .stat-number {
    font-size: 1.16rem !important;
    margin-bottom: 0 !important;
  }

  .hero .stat-label {
    font-size: 0.58rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.015em !important;
  }

  .diensten-grid,
  .diensten-row,
  .projecten-grid,
  .reviews-grid,
  .alle-diensten-grid,
  .offerte-grid,
  .blog-grid,
  .proj-grid,
  .gallery-grid,
  .related-grid,
  .post-nav,
  .service-seo-grid,
  .sub-grid,
  .project-row,
  .features-grid,
  .toepassing-grid,
  .werkgebied-inner,
  .contact-grid,
  .footer-grid,
  .footer-services-groups,
  .form-row,
  .form-grid,
  .featured-card,
  .proj-stats .grid,
  .proj-seo .content-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .dienst-card,
  .sub-card,
  .seo-card,
  .featured-card .feat-body,
  .post-nav-card,
  .contact-info-card,
  .offerte-form-wrap,
  .proj-highlights,
  .faq-question,
  .faq-q,
  .form-wrapper {
    padding: 18px 16px !important;
  }

  .dienst-card,
  .sub-card {
    min-height: 0 !important;
  }

  .gallery-item,
  .related-img,
  .featured-card .feat-img {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }

  .related-img {
    height: auto !important;
  }

  /* Project cards: keep full-bleed image on phone */
  .projecten-grid .project-card,
  .project-row .project-card {
    padding: 0 !important;
  }

  /* Keep original desktop ratios per context */
  .projecten-grid .project-card {
    aspect-ratio: 4 / 5 !important;
  }

  .project-row .project-card {
    aspect-ratio: 4 / 3 !important;
  }

  /* Project images: slightly more zoomed in phone cards */
  .projecten-grid .project-card img,
  .project-row .project-card img {
    transform: scale(1.14) !important;
    object-position: center center !important;
  }

  .projecten-grid .project-card:hover img,
  .project-row .project-card:hover img {
    transform: scale(1.2) !important;
  }

  /* Homepage projects: hover-only content must be visible on touch devices */
  .projecten-grid .project-card .project-card-overlay p,
  .projecten-grid .project-card .project-card-link {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Keep article cards on blog page visually equal to desktop: full-bleed top image */
  .blog-grid .blog-card {
    padding: 0 !important;
  }

  .blog-grid .blog-card .card-img {
    height: 220px !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
  }

  .blog-grid .blog-card .card-body {
    padding: 1.35rem !important;
  }

  /* Blog cards: zoom article thumbnails on phone for cleaner crop */
  .blog-grid .blog-card .card-img img {
    transform: scale(1.16) !important;
    object-position: center center !important;
  }

  .blog-grid .blog-card:hover .card-img img {
    transform: scale(1.2) !important;
  }

  .timeline {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .timeline::before {
    display: none !important;
  }

  .step {
    text-align: left !important;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 14px 14px 12px;
  }

  .step .num {
    width: 42px !important;
    height: 42px !important;
    font-size: 0.95rem !important;
    margin: 0 0 10px 0 !important;
  }

  .step h4 {
    font-size: 0.92rem !important;
  }

  .step p {
    font-size: 0.82rem !important;
  }

  .werkwijze-timeline {
    max-width: 100% !important;
  }

  .werkwijze-step {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding-bottom: 20px !important;
  }

  .step-indicator {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  .step-line {
    display: none !important;
  }

  .step-content h3 {
    margin-top: 0 !important;
    font-size: 1rem !important;
  }

  .step-content p {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
  }

  .featured-card .feat-body {
    gap: 0.7rem !important;
  }

  .offerte-form-wrap,
  .form-wrapper {
    border-radius: 14px !important;
  }

  .offerte-form-wrap h3,
  .form-wrapper h2 {
    font-size: 1.2rem !important;
  }

  .form-input,
  .form-select,
  .form-textarea {
    font-size: 0.95rem !important;
    padding: 11px 12px !important;
  }

  .service-dropdown summary {
    min-height: 50px !important;
    padding: 12px !important;
    font-size: 0.95rem !important;
  }

  .service-dropdown-panel {
    position: static !important;
    max-height: 260px !important;
    margin-top: 8px !important;
    box-shadow: none !important;
  }

  .service-dropdown-option {
    min-height: 48px !important;
    padding: 11px 10px !important;
    font-size: 0.9rem !important;
  }

  .form-textarea {
    min-height: 96px !important;
  }

  .diensten-filter,
  .proj-filter {
    position: sticky;
    top: var(--nav-h) !important;
  }

  body.nav-compact .diensten-filter,
  body.nav-compact .proj-filter {
    top: var(--navbar-only-h) !important;
  }

  .diensten-filter .container,
  .proj-filter .container {
    gap: 8px !important;
    padding-block: 2px !important;
  }

  .filter-btn,
  .proj-filter-btn {
    padding: 12px 14px !important;
    min-height: 42px;
    font-size: 0.82rem !important;
  }

  .footer {
    padding-top: 52px !important;
  }

  .footer-brand img {
    height: clamp(88px, 30vw, 124px) !important;
  }

  .footer-services-groups {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .footer-bottom,
  .footer-legal {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .footer-legal a {
    word-break: break-word;
  }

  .page-hero,
  .contact-section,
  .contact-diensten {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .contact-map {
    height: 260px !important;
    margin-top: 32px !important;
  }

  .contact-diensten-grid {
    justify-content: stretch !important;
  }

  .contact-diensten-grid a {
    width: 100%;
    justify-content: center;
  }

  .reviews-widget-wrap .trustoo-review-widget {
    position: relative !important;
    padding-inline: 16px !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .reviews-widget-wrap .trustoo-review-widget .scss-widget__reviewContainer {
    padding-inline: 40px !important;
  }

  .reviews-widget-wrap .trustoo-review-widget .scss-widget__carousel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    border: 1px solid var(--c-border-accent) !important;
    background: var(--c-bg-card) !important;
    color: var(--c-accent) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 6 !important;
    box-shadow: 0 4px 14px rgba(26, 20, 16, 0.12) !important;
  }

  .reviews-widget-wrap .trustoo-review-widget .scss-widget__carousel svg {
    width: 12px !important;
    height: 12px !important;
    display: block !important;
  }

  .reviews-widget-wrap .trustoo-review-widget .scss-widget__carousel.scss-widget__prev {
    left: 4px !important;
  }

  .reviews-widget-wrap .trustoo-review-widget .scss-widget__carousel.scss-widget__next {
    right: 4px !important;
  }

  .marquee-section {
    margin-top: 0 !important;
    padding: 14px 0 !important;
  }

  .marquee-track {
    gap: 24px !important;
  }

  .marquee-item {
    font-size: 0.82rem !important;
  }

  .whatsapp-float {
    width: 50px !important;
    height: 50px !important;
    right: 12px !important;
    bottom: 12px !important;
    z-index: 910 !important;
  }

  .whatsapp-float svg {
    width: 24px !important;
    height: 24px !important;
  }

  .wa-popup-layer {
    padding: 0 !important;
  }

  .wa-popup-card {
    right: 8px !important;
    bottom: calc(12px + 50px + 8px) !important;
    width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    border-radius: 14px !important;
  }

  .wa-popup-head {
    padding: 10px 12px !important;
  }

  .wa-popup-title {
    font-size: 0.98rem !important;
  }

  .wa-popup-subtitle {
    font-size: 0.8rem !important;
  }

  .wa-popup-actions {
    padding: 12px !important;
  }

  .wa-popup-cta {
    padding: 12px 14px !important;
    font-size: 0.98rem !important;
  }

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