/* ==========================================================================
   RESPONSIVE OVERRIDES (HP26 homepage, navbar and footer)

   Rewritten to match the page as built in TYPO3, in English and German:
   the HP26 hero visual, stages nav, stage accordions, stats, draggable
   leaders row, reviews marquee, floating newsletter card and the footer.

   Breakpoints:
     1024px  tablet: multi-column rows ease their padding.
      768px  phones / small tablets: side-by-side rows stack.
      480px  small phones: type and padding come down another notch.
   The navbar switches to its drawer at 900px (defined in styles.hp26.css).

   German copy is noticeably longer, so headings and stat titles hyphenate
   instead of breaking mid-word, and button rows stack earlier.
   ========================================================================== */

/* ==========================================================================
   All widths: long words hyphenate (uses the page language, e.g. lang="de")
   ========================================================================== */
.hero__heading,
.stages__title,
.observe__title,
.proof-stats__label,
.leaders__title,
.faq__question {
  hyphens: auto;
  overflow-wrap: break-word;
}

/* ==========================================================================
   1024px: tablet
   ========================================================================== */
@media (max-width: 1024px) {

  /* --- Trio: ease the side padding before the 768px stack --- */
  .trio__col {
    padding: 0 16px;
  }

  /* --- Proof stats: less side padding, keep the space to the frame lines --- */
  .proof-stats__item {
    padding: 28px 16px;
  }

  /* --- Workflow (section not built yet; kept for when it is) --- */
  .workflow__card {
    padding: 32px 16px;
  }
}

/* ==========================================================================
   768px: phones / small tablets
   ========================================================================== */
@media (max-width: 768px) {

  /* --- Hero ---
     Everything centered (the old theme left-aligns headings on phones). */
  .hero .hero__heading,
  .hero .hero__subhead {
    text-align: center;
  }

  .hero__heading {
    font-size: 36px;
    letter-spacing: -1.1px;
  }

  .hero__subhead {
    font-size: 17px;
  }

  /* Ratings wrap onto two lines: no dividers dangling at line ends */
  .hero__ratings {
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 20px;
    row-gap: 12px;
  }

  .hero__ratings .rating__divider {
    display: none;
  }

  /* --- Hero visual ---
     A taller frame for phones: logos in a 3 x 2 grid at a readable size,
     and the mockup shown larger, with its left part in view (the frame
     crops the rest). */
  .hero__visual {
    aspect-ratio: 4 / 3;
    margin-top: 40px;
    border-radius: 16px 16px 0 0;
  }

  .hero__logos {
    top: 5%;
    left: 6%;
    width: 88%;
    height: 24%;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
    row-gap: 6%;
  }

  .hero__logos li {
    display: flex;
    justify-content: center;
    flex: 0 0 30%;
  }

  .hero__logo {
    max-height: 6cqw;
    max-width: 22cqw;
  }

  .hero__visual-mockup {
    top: 34%;
    left: 6%;
    width: 150%;
  }

  /* --- Trio: stacked, divider moves to the top --- */
  .trio {
    flex-direction: column;
    gap: 24px;
    padding: 28px 20px;
  }

  .trio__col {
    padding: 0;
    border-left: none;
    border-top: 1px solid var(--color-border);
    padding-top: 24px;
  }

  .trio__col:first-child {
    border-top: none;
    padding-top: 0;
  }

  /* --- Stages heading + sticky tab bar --- */
  .stages__title {
    font-size: 32px;
    letter-spacing: -0.9px;
  }

  .stages__subhead {
    font-size: 17px;
  }

  .stages__tab {
    padding: 14px 20px;
    font-size: 16px;
  }

  /* --- Stage sections: image first, accordion below --- */
  .observe__row {
    flex-direction: column;
    gap: 24px;
  }

  .observe__mockup {
    order: -1;
    width: 100%;
  }

  .accordion {
    width: 100%;
  }

  .observe__title {
    font-size: 28px;
    margin-bottom: 32px;
  }

  /* Buttons stack full width (the German labels are too long side by side) */
  .observe__ctas {
    flex-direction: column;
    align-items: stretch;
    padding: 0 20px;
  }

  .observe__ctas .btn {
    justify-content: center;
    white-space: normal;
    text-align: center;
  }

  /* --- Proof stats: 2 x 2 grid inside the frame lines --- */
  .proof-stats__inner {
    flex-wrap: wrap;
  }

  .proof-stats__item {
    flex: 1 1 50%;
    padding: 24px 16px;
    border-left: none;
  }

  .proof-stats__item:nth-child(even) {
    border-left: 1px solid var(--color-core-neutral-100);
  }

  .proof-stats__item:nth-child(n + 3) {
    border-top: 1px solid var(--color-core-neutral-100);
  }

  .proof-stats__item:last-child {
    border-right: none;
  }

  .proof-stats__label {
    font-size: 16px;
  }

  /* --- Workflow (section not built yet; kept for when it is) --- */
  .workflow__title {
    font-size: 32px;
    letter-spacing: -0.9px;
  }

  .workflow__cards {
    flex-direction: column;
  }

  .workflow__card {
    padding: 24px 0;
    border-top: none;
    border-bottom: 2px solid var(--color-core-neutral-100);
  }

  .workflow__card:last-child {
    border-bottom: none;
  }

  .workflow__card--active {
    border-top: none;
    border-bottom: 2px solid var(--color-core-700);
  }

  .workflow__mockup-count {
    font-size: 28px;
  }

  /* --- Newsletter card: stacked, pill field full width --- */
  .newsletter__inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .hp26-footer .newsletter__inner {
    padding: 20px;
  }

  .newsletter__left {
    flex-direction: column;
    text-align: center;
  }

  .newsletter__form,
  .hp26-footer .newsletter__form,
  .hp26-footer .newsletter__input {
    width: 100%;
    flex-basis: 100%;
  }

  /* --- Footer --- */
  .footer__top {
    flex-direction: column;
    gap: 40px;
  }

  .footer__brand {
    max-width: none;
  }

  .footer__col {
    width: 100%;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* --- Old theme's orange "scroll to top" square ---
     Overlaps the chat bubble on phones and isn't part of the design. */
  a.scroll-top {
    display: none;
  }
}

/* ==========================================================================
   480px: small phones
   ========================================================================== */
@media (max-width: 480px) {

  /* --- Hero --- */
  .hero__heading {
    font-size: 30px;
  }

  .hero__ctas {
    flex-direction: column;
    width: 100%;
  }

  .hero__ctas .btn {
    width: 100%;
    justify-content: center;
  }

  /* --- Stages sticky tab bar: scrolls sideways instead of wrapping --- */
  .stages__tabs-inner {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .stages__tabs-inner::-webkit-scrollbar {
    display: none;
  }

  .stages__tab {
    padding: 14px 16px;
    white-space: nowrap;
  }

  /* --- Stage titles --- */
  .observe__title {
    font-size: 24px;
  }

  /* --- Proof stats: numbers and labels one notch smaller --- */
  .proof-stats__item {
    padding: 20px 12px;
  }

  .proof-stats__label {
    font-size: 15px;
  }

  /* --- Reviews marquee: narrower cards, so the next one peeks in --- */
  .review-card {
    width: 300px;
    padding: 16px 18px;
    gap: 16px;
  }

  /* --- FAQ --- */
  .faq__question {
    padding: 20px 16px 20px 20px;
    font-size: 17px;
  }

  .faq__answer-text {
    padding: 0 20px 0 20px;
  }

  /* --- Footer --- */
  .footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .footer__cta-row {
    flex-direction: column;
    align-items: stretch;
  }
}