/* ==========================================================================
 * Mobile refinements added during the 2026-07 static conversion.
 * Loaded after app.css and overrides its two-column / contact behavior
 * below 992px. Desktop rendering is unchanged.
 * ========================================================================== */

@media (max-width: 991.98px) {

  /* --- Two-column sections (Business skills, About me) ------------------
   * app.css stacks .two-column-wrap but leaves the columns display:inline-flex,
   * so each black box only shrink-wraps its content and page-white gaps appear
   * beside the image/text. Stack them as full-width blocks instead. */
  .left-column,
  .right-column {
    display: block;
    width: 100%;
  }

  /* Text halves: keep the theme's 60/20 padding, cap the line length and
   * center the column for readability. */
  .left-column .left-column-content,
  .right-column .right-column-content {
    max-width: 640px;
    margin: 0 auto;
  }

  /* Image halves: full-bleed, no black padding frame around the photo. */
  .left-column:has(.left-column-image),
  .right-column:has(.right-column-image) {
    padding: 0;
  }

  /* Neutralize the TYPO3 gallery centering floats (.ce-center trickery)
   * so the figure can span the full column width. */
  .left-column-image .ce-outer,
  .right-column-image .ce-outer,
  .left-column-image .ce-inner,
  .right-column-image .ce-inner {
    float: none;
    right: auto;
    width: 100%;
  }
  .left-column-image .ce-column,
  .right-column-image .ce-column {
    float: none;
    margin: 0;
  }
  .left-column-image figure.image,
  .right-column-image figure.image {
    display: block;
    margin: 0;
    width: 100%;
  }
  .left-column-image,
  .right-column-image {
    width: 100%;
    height: auto;
  }
  /* app.css forces height:550px with auto width here, which is what left the
   * photo floating on whitespace. Fill the width, keep the aspect sensible. */
  .left-column .left-column-image img,
  .right-column .right-column-image img {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: cover;
  }

  /* --- Contact section ---------------------------------------------------
   * app.css gives the button box min-width:560px + float:right, which
   * overflows narrow screens. Let it flow full-width under the heading. */
  .content-with-buttons {
    min-width: 0;
  }
  .content-with-right-buttons .content-with-buttons {
    float: none;
    max-width: 100%;
    text-align: left;
  }
  .content-with-right-buttons .content-with-buttons .btn {
    margin: 0 15px 10px 0;
  }
}