/* Responsive fixes (added on top of the Bootstrap Studio export) */
img, video { max-width: 100%; height: auto; }
iframe { max-width: 100%; }
iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 10; }

/* Phones and small tablets: stack all content columns */
@media (max-width: 767.98px) {
  .row > [class*="col-"]:not(.front-gutter-column):not(.col-12) {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
  .row > [class*="col-"]:not(.front-gutter-column) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .row > [class*="col-"]:not(.front-gutter-column):not(:last-child) {
    margin-bottom: 1rem;
  }
  .image, .image-big, .image-persona,
  .image[style], .image-big[style] {
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    top: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .image-start { height: 380px; }
  .explain-p-big, .explain-p-small, .project-text-paragraph, .behind-text-paragraph {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .image-persona { height: 420px; }
  .about-text-paragraph { line-height: 1.7; }
  .about-text-paragraph .next { display: inline-block; margin: 4px 4px 4px 0; }
}

/* Two-up grid on small phones: shorter tiles */
@media (max-width: 575.98px) {
  .front-gutter-column .image-frontpage { height: 220px; }
  .front-gutter-column .image-frontpage h1 { font-size: 1rem !important; line-height: 1.2 !important; }
}

/* Keyboard focus must be visible */
a:focus-visible, .btn:focus-visible, #portfolio-flters li:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}

/* Large headings must fit small screens */
.h1-impulse { font-size: clamp(2.25rem, 10vw, 80pt); overflow-wrap: break-word; line-height: 1.05; }
h1, h2, h3 { overflow-wrap: break-word; }

/* About page: keep the two call-to-action buttons intact */
.about-text-paragraph .next { display: inline-block; white-space: nowrap; margin: 4px 4px 4px 0; }

/* Footer legal links */
.legal-links a { color: #fff; text-decoration: underline; }
.legal-links a:hover, .legal-links a:focus { color: #ff0; }

/* Legal pages */
.legal { padding-top: 50px; padding-bottom: 60px; }
.legal-text h2 { margin-top: 1.75rem; }
.legal-text p { font-weight: 300; line-height: 1.7; }
.legal-text h1 { font-size: clamp(1.5rem, 7vw, 2rem) !important; }

/* Impulse buying header: show the full phone screens instead of cropping them */
@media (max-width: 1199.98px) {
  #image-2.image-big, #image-3.image-big {
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 2000 / 1910;
    background-size: contain !important;
    background-position: center !important;
  }
}

/* "Back to top" / "Next up" block: keep it inside the page margins and stack on phones */
@media (max-width: 767.98px) {
  #next-up-footer { padding-left: 16px; padding-right: 16px; margin-top: 40px; }
  #next-up-footer .next-up-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  #next-up-footer .nav-item { width: 100%; text-align: left; }
  #next-up-footer .nav-link { display: block; padding: 10px 12px; line-height: 1.4; }
  #next-up-footer .next-big { font-size: 1rem; overflow-wrap: break-word; }
}

/* Phone typography: body text 18px (recommended range 16-20px), page titles 28-30px,
   big section headings 34px, captions at least 13px */
@media (max-width: 767.98px) {
  .project-text-paragraph, .behind-text-paragraph, .explain-p-big, .about-text-paragraph {
    font-size: 1.125rem;
    line-height: 1.55;
  }
  .explain-p-small { font-size: 1rem; line-height: 1.5; }
  h3.fw-bold { font-size: clamp(1.75rem, 7.5vw, 1.875rem); line-height: 1.2; }
  .h1-impulse { font-size: clamp(1.875rem, 9vw, 2.125rem); line-height: 1.1; }
  .imagetext { font-size: .8125rem; }
  .funiture-waste-text { font-size: .8125rem; }
  .behind-the-scene-badge h5 { font-size: 1rem; line-height: 1.4; }
}
@media (max-width: 767.98px) {
  h3.fw-bold[style] { font-size: clamp(1.75rem, 7.5vw, 1.875rem) !important; }
}

/* Phones: show images in full instead of cropping them (ratio set per image via --ar) */
@media (max-width: 767.98px) {
  .m-fit {
    aspect-ratio: var(--ar);
    height: auto !important;
    max-height: none !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
}

/* Phones: remove desktop-only vertical offsets so blocks follow each other evenly */
@media (max-width: 767.98px) {
  .behind-row, .row[style*="margin-top"] { margin-top: 1.5rem !important; row-gap: 1rem; }
  .behind-text-paragraph[style], .behind-text-paragraph-max[style] {
    margin-top: 0 !important;
    margin-left: 0 !important;
    max-width: none !important;
  }
  .m-fit[style] { margin-top: 0 !important; }
}

/* Readable text on all sizes: captions >= 13px, text-heavy paragraphs 50-75 characters per line */
.imagetext { font-size: .8125rem; }
.project-text-paragraph, .behind-text-paragraph { max-width: 68ch; }
.about-text-paragraph { font-size: 1.125rem; line-height: 1.7; max-width: 65ch; }
@media (min-width: 768px) and (max-width: 991.98px) {
  h3.fw-bold { font-size: 2rem; }
  h3.fw-bold[style] { font-size: 2rem !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .informationtext-credit { padding-top: 2rem; }
}