/* iPhone 13 (+ similar) — YesViz: 390×844 portrait / 844 landscape @3x
   Overrides layered after Next static CSS. Safe-area + dvh aware. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

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

/* ---------- Portrait phone (~375–430): iPhone 13 = 390×844 ---------- */
@media (max-width: 430px) and (orientation: portrait) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  .cc-site-top {
    padding-top: env(safe-area-inset-top, 0px);
  }

  .cc-header {
    height: auto;
    min-height: 64px;
  }

  .cc-header__wrap {
    gap: 12px;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  .cc-header__logo img {
    width: auto;
    height: 40px;
    max-width: min(200px, 72vw);
  }

  .cc-landing {
    min-height: calc(100vh - var(--cc-sticky-top-offset, 64px));
    min-height: calc(100dvh - var(--cc-sticky-top-offset, 64px));
  }

  .cc-landing__intro {
    padding: 0.85rem max(14px, env(safe-area-inset-left)) 0.55rem
      max(14px, env(safe-area-inset-right));
  }

  .cc-landing__intro-inner {
    max-width: 100%;
  }

  .cc-landing__eyebrow {
    font-size: 11px;
    letter-spacing: 0.14em;
    margin-bottom: 8px;
  }

  .cc-landing__title {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: clamp(1.05rem, 4.6vw, 1.35rem);
    line-height: 1.2;
    letter-spacing: 0.02em;
    /* long Dutch compounds must not force left overflow */
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
  }

  .cc-landing__title:after {
    margin-left: auto;
    margin-right: auto;
  }

  .cc-landing__intro-inner {
    width: 100%;
    max-width: 100%;
    align-items: center;
  }

  .cc-landing__lead {
    font-size: 0.9rem;
    line-height: 1.45;
    max-width: 32ch;
    margin-left: auto;
    margin-right: auto;
  }

  .cc-landing__grid-wrap {
    padding-left: 0;
    padding-right: 0;
  }

  .cc-landing__grid {
    grid-template-columns: 1fr;
    gap: 12px;
    min-height: 0;
    padding: 0 max(12px, env(safe-area-inset-left))
      calc(4.75rem + env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-right));
  }

  .cc-landing__card {
    min-width: 0;
    min-height: 0;
    /* Two cards share remaining viewport under intro on 844-tall phones */
    height: clamp(200px, 34dvh, 290px);
    min-height: 44px;
  }

  .cc-landing__card-media,
  .cc-landing__card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cc-landing__card-body {
    padding: 1rem 1.1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    gap: 0.35rem;
  }

  .cc-landing__card-title {
    font-size: clamp(1.05rem, 4.6vw, 1.25rem);
    max-width: 16ch;
  }

  .cc-landing__card-text {
    display: none; /* keep hero CTA clean on narrow portrait */
  }

  .cc-landing__card-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    letter-spacing: 0.1em;
  }

  .cc-footer {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  }

  .cc-footer--landing .cc-footer__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  .cc-float-phone {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    min-height: 48px;
    max-width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }

  .cc-float-phone__number {
    font-size: 13px;
  }

  /* Inner pages: readable columns + touch targets */
  .cc-wrap,
  .cc-wrap--large {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  a,
  button,
  .cc-btn,
  .cc-header__cta {
    min-height: 44px;
  }

  input,
  select,
  textarea {
    font-size: 16px; /* prevent iOS focus zoom */
  }
}

/* ---------- Landscape phone: iPhone 13 = 844 × ~390 ---------- */
@media (orientation: landscape) and (min-width: 667px) and (max-width: 926px) and (max-height: 430px) {
  html,
  body {
    overflow-x: hidden;
  }

  .cc-site-top {
    padding-top: env(safe-area-inset-top, 0px);
  }

  .cc-header {
    height: auto;
    min-height: 52px;
  }

  .cc-header__logo img {
    height: 34px;
    max-width: min(180px, 40vw);
  }

  .cc-landing {
    min-height: calc(100vh - var(--cc-sticky-top-offset, 52px));
    min-height: calc(100dvh - var(--cc-sticky-top-offset, 52px));
  }

  .cc-landing__intro {
    padding: 0.45rem max(12px, env(safe-area-inset-left)) 0.35rem
      max(12px, env(safe-area-inset-right));
  }

  .cc-landing__lead {
    display: none;
  }

  .cc-landing__title {
    font-size: clamp(1.1rem, 3.2vh, 1.45rem);
    max-width: 28ch;
  }

  .cc-landing__eyebrow {
    margin-bottom: 4px;
    font-size: 11px;
  }

  .cc-landing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-height: calc(100vh - var(--cc-sticky-top-offset, 52px) - 3.25rem);
    min-height: calc(100dvh - var(--cc-sticky-top-offset, 52px) - 3.25rem);
    padding: 0 max(10px, env(safe-area-inset-left))
      max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right));
  }

  .cc-landing__card {
    min-width: 0;
    min-height: 100%;
    height: auto;
  }

  .cc-landing__card-text {
    display: none;
  }

  .cc-landing__card-body {
    padding: 0.85rem 1rem;
    gap: 0.3rem;
  }

  .cc-landing__card-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .cc-footer--landing {
    padding-top: 0.75rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }

  .cc-float-phone {
    right: max(10px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    min-height: 44px;
    padding: 8px 12px 8px 8px;
  }

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

/* ---------- Exact YesViz iPhone 13 portrait width ---------- */
@media (width: 390px) and (orientation: portrait) {
  .cc-landing__grid {
    gap: 12px;
  }

  .cc-landing__card {
    height: clamp(210px, 33.5dvh, 280px);
  }

  /* Fit "HUIDVERZORGINGSSYSTEMEN &" within 390 − side padding */
  .cc-landing__title {
    font-size: 1.12rem;
    letter-spacing: 0.015em;
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* ---------- Exact YesViz iPhone 13 landscape width ---------- */
@media (width: 844px) and (orientation: landscape) and (max-height: 430px) {
  .cc-landing__grid {
    gap: 12px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* ==========================================================================
   Video banner (.cc-video-banner__text) — iPhone 13 + similar
   Problem: @media (min-width:768px) sets 68px titles; iPhone 13 landscape
   is 844px wide so that desktop rule fires on a ~390px-tall screen.
   ========================================================================== */

/* Portrait phones (~390×844) */
@media (max-width: 430px) and (orientation: portrait) {
  .cc-video-banner,
  .cc-video-banner--compact {
    height: min(72vh, 620px);
    height: min(72dvh, 620px);
    max-height: none;
  }

  .cc-video-banner__container {
    min-width: 0;
    overflow: hidden;
  }

  .cc-video-banner__text {
    inset: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    padding:
      max(12px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      max(28px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
  }

  .cc-video-banner__text .section__intro,
  .cc-video-banner__text .cc-wrap {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    min-width: 0;
  }

  .cc-video-banner__pre-header {
    font-size: clamp(0.7rem, 3.2vw, 0.85rem);
    letter-spacing: 0.12em;
    padding-bottom: 8px;
    max-width: 100%;
  }

  .cc-video-banner .cc-video-banner__header,
  .cc-video-banner h1.cc-video-banner__header {
    font-size: clamp(1.45rem, 7.2vw, 2rem) !important;
    line-height: 1.08 !important;
    padding: 0 0 10px !important;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    overflow-wrap: normal;
    hyphens: manual;
  }

  .cc-video-banner .cc-video-banner__description,
  .cc-video-banner .cc-video-banner__description p {
    font-size: clamp(0.85rem, 3.6vw, 0.95rem) !important;
    line-height: 1.45 !important;
    padding: 0 0 0 !important;
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Landscape phones: 667–926 wide, short height (iPhone 13 = 844×~390)
   Must beat min-width:768px desktop type scale. */
@media (orientation: landscape) and (min-width: 667px) and (max-width: 926px) and (max-height: 430px) {
  .cc-video-banner,
  .cc-video-banner--compact {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
  }

  .cc-video-banner__text {
    justify-content: center;
    padding:
      max(8px, env(safe-area-inset-top))
      max(20px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(20px, env(safe-area-inset-left));
  }

  .cc-video-banner__text .section__intro,
  .cc-video-banner__text .cc-wrap {
    width: 100%;
    max-width: 40rem;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }

  .cc-video-banner__pre-header {
    font-size: 0.75rem !important;
    padding-bottom: 6px !important;
  }

  .cc-video-banner .cc-video-banner__header,
  .cc-video-banner h1.cc-video-banner__header {
    font-size: clamp(1.35rem, 6.5vh, 2.1rem) !important;
    line-height: 1.05 !important;
    padding: 0 0 8px !important;
  }

  .cc-video-banner .cc-video-banner__description,
  .cc-video-banner .cc-video-banner__description p {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    max-width: 52ch;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Exact YesViz iPhone 13 portrait */
@media (width: 390px) and (orientation: portrait) {
  .cc-video-banner .cc-video-banner__header,
  .cc-video-banner h1.cc-video-banner__header {
    font-size: 1.65rem !important;
  }

  .cc-video-banner .cc-video-banner__description,
  .cc-video-banner .cc-video-banner__description p {
    max-width: 32ch;
  }
}

/* Exact YesViz iPhone 13 landscape */
@media (width: 844px) and (orientation: landscape) and (max-height: 430px) {
  .cc-video-banner .cc-video-banner__header,
  .cc-video-banner h1.cc-video-banner__header {
    font-size: 1.85rem !important;
  }
}

/* When video is playing on iOS, keep poster underneath (player already z-index:1) */
.cc-video-banner.is-video-playing .cc-video-banner__player {
  opacity: 1;
  visibility: visible;
}

.cc-video-banner__player {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}