/* TheSEO 2026.10.26-112: additions after the preserved public stylesheets. */
/* Long card titles can exceed their column at any grid breakpoint. */
.tools105-card-body h3 {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
}

@media (max-width: 650px) {
  /* Flex children must be allowed to wrap instead of widening a glass card. */
  .controls110-dateline > div,
  .controls110-dateline > p,
  .controls110-meta > span,
  .controls110-branch > summary > span:first-child {
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  .controls110-sources > a {
    max-inline-size: 100%;
    min-inline-size: 0;
    gap: 14px;
    overflow-wrap: anywhere;
  }

  .controls110-sources > a > span {
    flex: 0 0 auto;
  }

  /* The table stays a semantic table. Its date column already wraps in 110. */
  .controls110-stats > div,
  .controls110-stats dt,
  .controls110-stats dd {
    min-inline-size: 0;
    box-sizing: border-box;
  }

  /* The embedded dashboard must use the laptop screen's available width. */
  .interactive-myparcel__screen iframe {
    min-width: 0;
    min-inline-size: 0;
    width: 100%;
    inline-size: 100%;
  }

  /* Home case titles already disable the duplicate/flip; let their row grow. */
  .home-case-grid .krow-flip.geen-flip {
    height: auto;
    min-inline-size: 0;
  }

  .home-case-grid .krow-flip.geen-flip .krow-t {
    overflow-wrap: anywhere;
  }

  /* Related-page titles must keep their reserved arrow space available. */
  .tseo-vraag-kop {
    min-inline-size: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

@media (max-width: 480px) {
  /* Three narrow columns cannot fit a four-digit count. Use readable rows. */
  .controls110-stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .controls110-stats > div {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    column-gap: 18px;
    row-gap: 0;
    padding: 18px 20px;
  }

  .controls110-stats dt {
    grid-column: 2;
    grid-row: 1;
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .controls110-stats dd {
    grid-column: 1;
    grid-row: 1;
    font-size: 32px;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  /* Keep the receipt's full amount, with its label above at phone widths. */
  .general-showroom .g-receipt dl > .g-receipt-total {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 12px;
  }

  .general-showroom .g-receipt .g-receipt-total > dt,
  .general-showroom .g-receipt .g-receipt-total > dd {
    min-inline-size: 0;
    max-inline-size: 100%;
  }
}

@media (max-width: 360px) {
  /* A fluid title keeps complete words readable on the smallest phones. */
  .topic-hero h1 {
    font-size: clamp(42px, calc(17.5vw - 14px), 49px);
  }
}

@media (min-width: 701px) and (max-width: 800px) {
  /* The tablet hero column also needs room for a complete long word. */
  .topic-hero h1 {
    font-size: clamp(49px, 7.5vw, 60px);
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  /* The carousel switches to two columns before the time label spans them. */
  .pg-plan .pl-na-in .pl-na-rij {
    grid-template-columns: 24px minmax(0, 1fr);
    row-gap: 6px;
  }

  .pg-plan .pl-na-in .pl-na-t {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-top: 0;
  }

  .pg-plan .pl-na-in .pl-na-p {
    grid-column: 1;
    grid-row: 2;
  }

  .pg-plan .pl-na-in .pl-na-c {
    grid-column: 2;
    grid-row: 2;
    min-inline-size: 0;
  }
}