/*
 * Atlantic public site - small-screen layout layer (v451.270)
 * Loaded last on every public page.
 *
 * Measured on all 52 public pages at 360, 390 and 430 px. Three causes left
 * text narrower than the screen allows:
 *
 *  1. Icon or number columns. Many cards reserve a 30-58 px column for an
 *     icon or a step number over their whole height; the text then starts
 *     about 100 px from the edge of a 390 px screen. Below 576 px, the icon
 *     and the title now share the first row and the description uses the
 *     full width of the card underneath.
 *  2. Grid items centred with automatic margins. In a grid, "margin: 0 auto"
 *     shrinks an item to its content width (the Visual Control Center was
 *     277 px wide in a 358 px column). Such items now take the full width,
 *     their max-width still centring them on tablets.
 *  3. Stacked padding and desktop-only splits (two half-width lists, a
 *     half-width paragraph, a side label column). These are collapsed.
 *
 *  4. Tablets (576-1199 px): in two-column grids with an odd number of
 *     cards, the last card stood alone beside an empty half row; it now
 *     spans the row. A few desktop splits that left half a panel empty
 *     are collapsed in the same range.
 *
 * Nothing changes above 1199 px; rules 1 and 3 apply below 576 px only.
 *
 * Selectors start with "html body:not(#aid-no-match)": the :not(#id) adds
 * ID-level weight, so these corrections win over the page stylesheets
 * without resorting to !important.
 */

/* Card-buttons: the general button rule balances line lengths, which is
   meant for short labels; in a card description it shortens every line and
   leaves an empty band on the right. */
html body:not(#aid-no-match) .aid-request-type-card small,
html body:not(#aid-no-match) .aid-request-type-card strong {
  text-wrap: pretty;
}

/* ---------- 2. Grid items centred with automatic margins ---------- */
@media (max-width: 1199.98px) {
  html body:not(#aid-no-match) .avm-control-visual {
    width: 100%;
  }
}

/* ---------- 4. Tablets ---------- */
@media (min-width: 576px) and (max-width: 1199.98px) {
  /* last card of an odd count spans the row */
  html body:not(#aid-no-match) .aid-institutional-depth__reference-grid > :last-child:nth-child(odd),
  html body:not(#aid-no-match) .aid-trust29-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* monitoring request: the three safeguards on one row */
  html body:not(#aid-no-match) .avm-request-assurances {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  html body:not(#aid-no-match) .aid-legal42-contact-grid > :last-child:nth-child(odd),
  html body:not(#aid-no-match) .aid-legal42-link-grid > :last-child:nth-child(odd),
  html body:not(#aid-no-match) .avm-trust-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* home, recourse to the hosting provider: the illustration used half the
     panel width beside an empty half */
  html body:not(#aid-no-match) .aid-home-external-escalation__visual {
    width: 100%;
  }
  html body:not(#aid-no-match) .aid-home-external-escalation__figure,
  html body:not(#aid-no-match) .aid-home-external-escalation__action {
    width: 100%;
  }
  html body:not(#aid-no-match) .aid-home-external-escalation__figure {
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }
  html body:not(#aid-no-match) .aid-home-external-escalation__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
  }

  /* institutional chapters: the number shares the title row instead of a
     78 px column running down the whole chapter */
  html body:not(#aid-no-match) .aid-institutional-depth__chapter {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 12px;
    align-items: center;
  }
  html body:not(#aid-no-match) .aid-institutional-depth__chapter > div {
    display: contents;
  }
  html body:not(#aid-no-match) .aid-institutional-depth__chapter > .aid-institutional-depth__chapter-number {
    grid-column: 1;
    grid-row: 1;
  }
  html body:not(#aid-no-match) .aid-institutional-depth__chapter > div > :first-child {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }
  html body:not(#aid-no-match) .aid-institutional-depth__chapter > div > :not(:first-child) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 575.98px) {

  /* ---------- 1a. Icon + wrapper (title, text) ---------- */
  html body:not(#aid-no-match) .avm-asset-type,
  html body:not(#aid-no-match) .avm-audience-card,
  html body:not(#aid-no-match) .avm-classification-list > article,
  html body:not(#aid-no-match) .aid-private-code-notice,
  html body:not(#aid-no-match) .aid-trust29-reference-grid > article,
  html body:not(#aid-no-match) .aid-community-guidelines__card,
  html body:not(#aid-no-match) .aid-fw-scope__card,
  html body:not(#aid-no-match) .home_process_steps > li,
  html body:not(#aid-no-match) .aid-contact-guidance-grid > article,
  html body:not(#aid-no-match) .avm-home-chip {
    grid-template-columns: auto minmax(0, 1fr);
    grid-auto-rows: auto;
    column-gap: 12px;
    row-gap: 10px;
    align-items: center;
  }

  html body:not(#aid-no-match) .avm-asset-type > div,
  html body:not(#aid-no-match) .avm-audience-card > .avm-audience-content,
  html body:not(#aid-no-match) .avm-classification-list > article > div,
  html body:not(#aid-no-match) .aid-private-code-notice > .aid-private-code-notice__content,
  html body:not(#aid-no-match) .aid-trust29-reference-grid > article > div,
  html body:not(#aid-no-match) .aid-community-guidelines__card > div,
  html body:not(#aid-no-match) .aid-fw-scope__card > div,
  html body:not(#aid-no-match) .home_process_steps > li > div,
  html body:not(#aid-no-match) .aid-contact-guidance-grid > article > div,
  html body:not(#aid-no-match) .avm-home-chip > div {
    display: contents;
  }

  /* icon: first column, first row */
  html body:not(#aid-no-match) .avm-asset-type > span,
  html body:not(#aid-no-match) .avm-audience-card > .avm-audience-icon,
  html body:not(#aid-no-match) .avm-classification-list > article > i,
  html body:not(#aid-no-match) .aid-private-code-notice > .aid-private-code-notice__icon,
  html body:not(#aid-no-match) .aid-trust29-reference-grid > article > span,
  html body:not(#aid-no-match) .aid-community-guidelines__card > i,
  html body:not(#aid-no-match) .aid-fw-scope__card > .aid-fw-icon,
  html body:not(#aid-no-match) .home_process_steps > li > span,
  html body:not(#aid-no-match) .aid-contact-guidance-grid > article > i,
  html body:not(#aid-no-match) .avm-home-chip > .avm-home-chip-icon {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin: 0;
  }

  /* title: beside the icon */
  html body:not(#aid-no-match) .avm-asset-type > div > :first-child,
  html body:not(#aid-no-match) .avm-audience-card > .avm-audience-content > :first-child,
  html body:not(#aid-no-match) .avm-classification-list > article > div > :first-child,
  html body:not(#aid-no-match) .aid-private-code-notice__content > :first-child,
  html body:not(#aid-no-match) .aid-trust29-reference-grid > article > div > :first-child,
  html body:not(#aid-no-match) .aid-community-guidelines__card > div > :first-child,
  html body:not(#aid-no-match) .aid-fw-scope__card > div > :first-child,
  html body:not(#aid-no-match) .home_process_steps > li > div > :first-child,
  html body:not(#aid-no-match) .aid-contact-guidance-grid > article > div > :first-child,
  html body:not(#aid-no-match) .avm-home-chip > div > :first-child {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin-top: 0;
    margin-bottom: 0;
  }

  /* description and anything after the title: full card width */
  html body:not(#aid-no-match) .avm-asset-type > div > :not(:first-child),
  html body:not(#aid-no-match) .avm-audience-card > .avm-audience-content > :not(:first-child),
  html body:not(#aid-no-match) .avm-classification-list > article > div > :not(:first-child),
  html body:not(#aid-no-match) .aid-private-code-notice__content > :not(:first-child),
  html body:not(#aid-no-match) .aid-trust29-reference-grid > article > div > :not(:first-child),
  html body:not(#aid-no-match) .aid-community-guidelines__card > div > :not(:first-child),
  html body:not(#aid-no-match) .aid-fw-scope__card > div > :not(:first-child),
  html body:not(#aid-no-match) .home_process_steps > li > div > :not(:first-child),
  html body:not(#aid-no-match) .aid-contact-guidance-grid > article > div > :not(:first-child),
  html body:not(#aid-no-match) .avm-home-chip > div > :not(:first-child) {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  /* Home preview: a status chip is a label, not a bar across the card */
  html body:not(#aid-no-match) .avm-home-chip > div > .avm-home-chip-status {
    justify-self: start;
    width: auto;
    max-width: 100%;
  }

  /* ---------- 1b. Icon + title + text as direct children ---------- */
  html body:not(#aid-no-match) .aid-home-special-intake-card,
  html body:not(#aid-no-match) .aid-request-type-card {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 10px;
    align-items: center;
  }
  html body:not(#aid-no-match) .aid-home-special-intake-card > span,
  html body:not(#aid-no-match) .aid-request-type-card > .aid-request-type-number {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }
  html body:not(#aid-no-match) .aid-home-special-intake-card > strong,
  html body:not(#aid-no-match) .aid-request-type-card > strong {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
  }
  html body:not(#aid-no-match) .aid-home-special-intake-card > small,
  html body:not(#aid-no-match) .aid-home-special-intake-card > em,
  html body:not(#aid-no-match) .aid-request-type-card > small {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  /* home path cards: icon, copy (title, text), action */
  html body:not(#aid-no-match) .home_path_card {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 10px;
    align-items: center;
  }
  html body:not(#aid-no-match) .home_path_card > .home_path_copy {
    display: contents;
  }
  html body:not(#aid-no-match) .home_path_card > .home_path_icon {
    grid-column: 1;
    grid-row: 1;
  }
  html body:not(#aid-no-match) .home_path_card > .home_path_copy > strong {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
  }
  html body:not(#aid-no-match) .home_path_card > .home_path_copy > small,
  html body:not(#aid-no-match) .home_path_card > .home_path_action {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  /* ---------- 1c. Section headings with a number badge ---------- */
  html body:not(#aid-no-match) .aid-request-section-heading,
  html body:not(#aid-no-match) .avm-form-section > legend {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
  }
  html body:not(#aid-no-match) .aid-request-section-heading > div,
  html body:not(#aid-no-match) .avm-form-section > legend > div {
    display: contents;
  }
  html body:not(#aid-no-match) .aid-request-section-heading > span,
  html body:not(#aid-no-match) .avm-form-section > legend > span {
    grid-column: 1;
    grid-row: 1;
    width: 40px;
    height: 40px;
  }
  html body:not(#aid-no-match) .aid-request-section-heading > div > :first-child,
  html body:not(#aid-no-match) .avm-form-section > legend > div > :first-child {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }
  html body:not(#aid-no-match) .aid-request-section-heading > div > :not(:first-child),
  html body:not(#aid-no-match) .avm-form-section > legend > div > :not(:first-child) {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  /* ---------- 3. Desktop-only splits and stacked padding ---------- */

  /* DMCA register: the symbol column (58 px) is hidden visually but kept for
     screen readers, which announce the group name it carries; each field
     keeps its own visible label, and the content uses the full width */
  html body:not(#aid-no-match) .aid-dmca53-group {
    grid-template-columns: minmax(0, 1fr);
    margin-left: 0;
    margin-right: 0;
  }
  html body:not(#aid-no-match) .aid-dmca53-group__head--symbol {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* Evidence file checklist: one full-width column, icon hanging */
  html body:not(#aid-no-match) .single_port_details ul.port_details_list {
    float: none;
    width: 100%;
    margin-bottom: 18px;
  }
  html body:not(#aid-no-match) .single_port_details ul.port_details_list li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;
    margin-bottom: 10px;
  }
  html body:not(#aid-no-match) .single_port_details ul.port_details_list li img {
    margin-top: 3px;
  }

  /* 404 page: the explanation used half the width */
  html body:not(#aid-no-match) .error_page p {
    width: auto;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Home control panel: 28 px of padding inside a 16 px gutter */
  html body:not(#aid-no-match) .home_control_panel {
    padding: 20px 18px;
  }

  /* Request form: section > checkbox group > checkbox made three nested
     frames. The group frame is removed; each checkbox keeps its own. */
  html body:not(#aid-no-match) .aid-request-check-grid {
    padding: 0;
    border: 0;
    background: none;
  }

  /* Case access: note framed inside a framed card */
  html body:not(#aid-no-match) .case_access_security_note {
    padding: 16px 14px;
  }

  /* Legal and institutional references: 26 px of padding around cards
     that already have their own */
  html body:not(#aid-no-match) .aid-institutional-depth__reference-grid {
    padding: 0 12px 14px;
  }
}