/* ============================================================
   Design v3 reflow — test_ds_v3 arm C.
   Control skin, UNCHANGED markup. This file only re-lays-out the
   existing control hero into two columns (copy + trust badges left,
   upload zone right) to match arm B's winning LAYOUT. No color, font,
   component or spacing-system changes — so A vs C isolates layout alone.
   Everything is scoped under body.ds-reflow, so arms A and B are untouched.
   Loaded from base.html only when ds_reflow (group C) is set.
   ============================================================ */

/* ---- TOOL PAGES (templates/includes/tool_hero.html control branch) ----
   .tph-control-wrap has exactly three children in source order:
     1. .tph-control-copy    — h1 + description
     2. .tool-hero-new       — the upload zone / caller UI
     3. .tph-control-badges  — encryption / instant / no-limits row
   Desktop places 1 and 3 in the left column, 2 in the right. */
@media (min-width: 861px) {
  body.ds-reflow .tph-control .tph-control-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 64px;
    row-gap: 0;
    align-items: start;
    max-width: 1200px;
    /* neutralise the control's flex centering without touching its classes */
    align-content: start;
  }
  /* The upload zone spans both rows and is taller than the copy, so row 1/2 would
     otherwise push the copy and badges apart. Bottom-align the copy and top-align
     the badges so the pair hugs the vertical centre beside the upload zone. */
  body.ds-reflow .tph-control .tph-control-copy {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
    align-self: end;
  }
  /* the description is centered by mx-auto in control; left-align it in the column */
  body.ds-reflow .tph-control .tph-control-copy > p {
    margin-left: 0;
    margin-right: 0;
  }
  body.ds-reflow .tph-control .tool-hero-new {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin: 0;
  }
  body.ds-reflow .tph-control .tph-control-badges {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-start;
    text-align: left;
    align-self: start;
    margin-top: 24px;
  }
}

/* Match the tool pages' header->title gap (32px, Tailwind pt-8). The homepage hero
   is padding-top:0 via .hero-no-bg, which computes to 10px and reads as no gap.
   Applied at every width so mobile spacing matches the tool pages too. */
body.ds-reflow .ds-home-c{padding-top:32px;}

/* ---- HOMEPAGE (templates/index.html) ----
   Arm C reflows the hero into copy-left / upload-right. Only the hero is
   touched: the Trustpilot widget, feature-icon row, tools grid and every
   section below stay exactly as control renders them. */
@media (min-width: 861px) {
  body.ds-reflow .ds-home-c .hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 56px;
    align-items: center;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
  /* `.hero-centered h1/p` hard-code text-align:center, so left-alignment has to be
     restated on the elements themselves, not just on the container. */
  body.ds-reflow .ds-home-c .hero-content > h1,
  body.ds-reflow .ds-home-c .hero-content > p,
  body.ds-reflow .ds-home-c .hero-content > .ds-home-trust {
    grid-column: 1;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }
  /* left column hugs the vertical centre next to the taller upload zone */
  body.ds-reflow .ds-home-c .hero-content > h1 { align-self: end; margin-bottom: 0; }
  body.ds-reflow .ds-home-c .hero-content > p { align-self: center; margin: 14px 0 0; }
  body.ds-reflow .ds-home-c .hero-content > .ds-home-trust { align-self: start; margin-top: 22px; }
  /* Trustpilot + legal, left-aligned under the title */
  body.ds-reflow .ds-home-c .ds-home-trust .reviews-widget {
    margin: 0; display: block; width: 320px; max-width: 100%;
  }
  body.ds-reflow .ds-home-c .ds-home-trust .hero-legal-text {
    margin: 14px 0 0; text-align: left; max-width: 40em;
  }
  /* upload zone alone in the right column, spanning the three left-column rows */
  body.ds-reflow .ds-home-c .hero-content > #heroUploadForm {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    width: 100%;
  }
  /* anything else in the hero (result container, feature row) spans full width
     below the two columns, so no sibling gets pulled into the grid tracks. */
  body.ds-reflow .ds-home-c .hero-content > #heroUploadResult,
  body.ds-reflow .ds-home-c .hero-content > .hero-features-row {
    grid-column: 1 / -1;
  }
}

/* Mobile: no reflow. The trust block precedes the form in the markup for the
   desktop layout, so re-order it back under the upload zone — arm C must render
   identically to control (A) on mobile. */
@media (max-width: 860px) {
  body.ds-reflow .ds-home-c .hero-content > h1 { order: 0; }
  body.ds-reflow .ds-home-c .hero-content > p { order: 1; }
  body.ds-reflow .ds-home-c .hero-content > #heroUploadForm { order: 2; }
  body.ds-reflow .ds-home-c .hero-content > .ds-home-trust { order: 3; width: 100%; }
  body.ds-reflow .ds-home-c .hero-content > #heroUploadResult { order: 4; }
  body.ds-reflow .ds-home-c .hero-content > .hero-features-row { order: 5; }
  body.ds-reflow .ds-home-c .ds-home-trust .reviews-widget { margin: 16px auto 0; }
}

/* Mobile (<=860px): no reflow. The control single-column stack is kept as-is
   so arm C is identical to control on mobile — the layout hypothesis is a
   desktop two-column one; mobile has no room for it. */