/* assets/css/fixes.css */
/* Doel: Apple-clean mobile layout voor Diensten & Contact op alle iPhones */

/* 1) Maak de secties container-aware (voor container queries) */
.svc, .contact { container-type: inline-size; }

/* 2) Container query: DIENSTEN (werkt op iOS 16+, Chrome/Edge/Firefox modern) */
@container (max-width: 640px) {
  .svc .svc-header{
    position: relative;
    text-align: left;
    padding: 14px 16px 12px;
    margin-bottom: 12px;
    z-index: 1;
  }
  .svc .svc-header::before{ content:none !important; }       /* blobs/glow uit */

  .svc .svc-title{
    margin: 0 0 6px 0;
    line-height: 1.15;
    letter-spacing: -.01em;
    font-size: clamp(1.45rem, 6.2cqw, 1.8rem);              /* cqw = container width */
  }
  .svc .svc-sub{
    max-width: 30ch;
    margin: 0 0 12px 0;
    font-size: clamp(.95rem, 3.6cqw, 1.05rem);
    line-height: 1.45;
    color: var(--text-muted);
    text-wrap: balance; hyphens: auto;
  }

  .svc .svc-grid { margin-top: 2px; }

  .svc .svc-head{
    display: grid;
    grid-template-columns: 1fr auto; /* titelblok | chevron */
    align-items: center;
    gap: .7rem;
    padding: 14px;
  }
  .svc .svc-ttl{
    display: grid;
    grid-template-columns: 1fr auto; /* tekst | pill */
    align-items: center;
    gap: .55rem;
    min-width: 0;
    font-size: clamp(.97rem, 3.8cqw, 1.06rem);
    font-weight: 700;
  }
  .svc .svc-ttl .svc-pill{
    white-space: nowrap;                /* nooit afbreken */
    min-width: max-content;
    display: inline-flex; align-items: center;
    padding: .34rem .68rem;
    border-radius: 999px;
    font-weight: 700; font-size: .95rem;
    background: var(--accent); color: #fff;
    box-shadow: 0 8px 28px rgba(0,176,239,.35), inset 0 0 0 1px rgba(255,255,255,.08);
  }
  .svc .svc-chevron{ width:20px; height:20px; justify-self:end; }
  .svc .svc-card{ border-radius: 14px; }
}

/* 3) Container query: CONTACT */
@container (max-width: 640px) {
  .contact .ct-header{
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start;
    gap: .45rem;
    text-align: left;
    padding: 14px 16px 12px;
    margin-bottom: 12px;
    z-index: 1;
  }
  .contact .ct-header::before{ content:none !important; }     /* glow uit */

  .contact .ct-title{
    margin: 0;
    line-height: 1.15;
    letter-spacing: -.01em;
    font-size: clamp(1.45rem, 6.2cqw, 1.8rem);
  }
  .contact .ct-sub{
    margin: .25rem 0 .35rem 0;
    max-width: 30ch;
    font-size: clamp(.95rem, 3.6cqw, 1.05rem);
    line-height: 1.45;
    color: var(--text-muted);
    text-wrap: balance; hyphens: auto;
  }
  .contact .ct-pill{
    align-self: flex-start;
    margin-top: .05rem;
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .3rem .6rem; border-radius: 999px;
    font-weight: 700; font-size: .9rem;
    background: color-mix(in oklab, var(--accent) 16%, transparent);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent),
                0 6px 22px rgba(0,176,239,.18);
  }
  .contact .ct-pill br{ display:none; }                       /* 1 regel */
  .contact .ct-card{ border-radius:14px; }
}

/* 4) Fallback voor browsers ZONDER container queries (oude iOS) → media query */
@supports not (container-type: inline-size) {
  @media (max-width: 700px) {
    /* DIENSTEN */
    #diensten .svc-header{
      position: relative; text-align: left;
      padding: 14px 16px 12px; margin-bottom: 12px; z-index: 1;
    }
    #diensten .svc-header::before{ content:none !important; }
    #diensten .svc-title{
      margin: 0 0 6px; line-height: 1.15; letter-spacing: -.01em;
      font-size: clamp(1.45rem, 6.2vw, 1.8rem);
    }
    #diensten .svc-sub{
      max-width: 30ch; margin: 0 0 12px;
      font-size: clamp(.95rem, 3.6vw, 1.05rem);
      line-height: 1.45; color: var(--text-muted);
    }
    #diensten .svc-head{
      display:grid; grid-template-columns:1fr auto; gap:.7rem; padding:14px;
    }
    #diensten .svc-ttl{
      display:grid; grid-template-columns:1fr auto; gap:.55rem; min-width:0;
      font-size: clamp(.97rem, 3.8vw, 1.06rem); font-weight:700;
    }
    #diensten .svc-ttl .svc-pill{
      white-space: nowrap; min-width: max-content;
      display:inline-flex; align-items:center; padding:.34rem .68rem;
      border-radius:999px; font-weight:700; font-size:.95rem;
      background: var(--accent); color:#fff;
      box-shadow: 0 8px 28px rgba(0,176,239,.35), inset 0 0 0 1px rgba(255,255,255,.08);
    }
    #diensten .svc-chevron{ width:20px; height:20px; justify-self:end; }

    /* CONTACT */
    #contact .ct-header{
      position:relative; display:flex; flex-direction:column; align-items:flex-start;
      gap:.45rem; text-align:left; padding:14px 16px 12px; margin-bottom:12px; z-index:1;
    }
    #contact .ct-header::before{ content:none !important; }
    #contact .ct-title{
      margin:0; line-height:1.15; letter-spacing:-.01em;
      font-size: clamp(1.45rem, 6.2vw, 1.8rem);
    }
    #contact .ct-sub{
      margin:.25rem 0 .35rem; max-width:30ch;
      font-size: clamp(.95rem, 3.6vw, 1.05rem); line-height:1.45; color:var(--text-muted);
    }
    #contact .ct-pill{
      align-self:flex-start; margin-top:.05rem;
      display:inline-flex; align-items:center; gap:.45rem;
      padding:.3rem .6rem; border-radius:999px; font-weight:700; font-size:.9rem;
      background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent);
      box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent),
                  0 6px 22px rgba(0,176,239,.18);
    }
    #contact .ct-pill br{ display:none; }
  }
}

/* 5) Safety: nooit stacking issues met header */
#diensten .svc-header, #contact .ct-header { isolation: isolate; }