/* Direction 17 component adjustments. Load after the component styles. */

/* Keep the comparison's deliberate horizontal scroll inside its own region. */
.oci-direction :is(.o-cost-disclosure, .o-cost-content, .o-annual-table-wrap) {
  min-width: 0;
  max-width: 100%;
}

.oci-direction .o-annual-table-wrap {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* A horizontal image gesture can change chapters while vertical scrolling works.
   The video and its native controls retain their normal touch behaviour. */
.oci-direction .o-fund-story-media > img[data-fund-image] {
  touch-action: pan-y pinch-zoom;
}

@media (max-width: 1024px) {
  .oci-direction :is(.o-training-takeaway, .o-training-details, .o-cost-footnotes,
    .o-iq-stage, .o-iq-copy, .o-company-team .o-person,
    .o-company-team .o-person-meta, .o-footer-top > *, .o-footer-addresses > *) {
    min-width: 0;
  }

  .oci-direction :is(.o-cost-footnotes, .o-training-details,
    .o-company-team .o-person-meta, .o-person-background, .o-footer) {
    overflow-wrap: anywhere;
  }

  .oci-direction .o-footer-top nav a,
  .oci-direction .o-footer-top > a,
  .oci-direction .o-footer-bottom a {
    display: flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
  }

  .oci-direction .o-footer-top nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 20px;
  }

  .oci-direction .o-training-takeaway .o-action {
    max-width: 100%;
  }
}

/* Give tablet readers a usable product view and full-width training copy. */
@media (max-width: 900px) {
  .oci-direction .o-iq-slider article {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    min-height: 0;
  }

  .oci-direction .o-iq-slider .o-iq-copy {
    min-height: 0;
  }

  .oci-direction .o-iq-slider figure img {
    height: auto;
    max-height: min(70svh, 560px);
    object-fit: contain;
  }
}

@media (max-width: 850px) {
  .oci-direction .o-legal-training-head,
  .oci-direction .o-training-path,
  .oci-direction .o-training-details dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .oci-direction .o-training-path p {
    max-width: 60ch;
  }

  .oci-direction .o-training-step {
    margin-bottom: 16px;
  }
}

@media (max-width: 600px) {
  .oci-direction .o-footer-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .oci-direction .o-footer-top > a {
    grid-column: auto;
    justify-self: start;
  }

  .oci-direction .o-footer-top nav {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .oci-direction .o-cost-disclosure > summary {
    gap: 14px;
  }

  .oci-direction .o-cost-disclosure > summary > span:first-child {
    min-width: 0;
  }

  .oci-direction .o-training-takeaway .o-action {
    gap: 12px;
  }

  .oci-direction .o-fund-story-controls {
    flex-wrap: wrap;
    gap: 12px;
  }

  .oci-direction .o-fund-story-controls p {
    flex: 1 1 140px;
    min-width: 0;
    flex-wrap: wrap;
    gap: 4px 12px;
  }

  .oci-direction .o-fund-story-controls > div {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .oci-direction .o-fund-story-media figcaption > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* Seven buttons need two rows once the available width falls below 338 px. */
@media (max-width: 380px) {
  .oci-direction .o-fund-story-steps ol {
    display: grid;
    grid-template-columns: repeat(4, minmax(44px, 1fr));
    gap: 8px;
  }

  .oci-direction .o-iq-slider-heading {
    flex-wrap: wrap;
    row-gap: 16px;
  }

  .oci-direction .o-iq-slider-controls {
    flex: 0 0 auto;
    margin-left: auto;
  }
}

/* Avoid a fixed 440 px image height on short landscape screens. */
@media (max-width: 1024px) and (max-height: 620px) {
  .oci-direction .o-iq-slider article {
    min-height: 0;
  }

  .oci-direction .o-iq-slider figure img {
    height: auto;
    max-height: 70svh;
    object-fit: contain;
  }
}