/* AgroNetwork mobile full-bleed contract.
 * Scope: only the main /network/ page, because this stylesheet is loaded only by home.html.
 * Goal: the mobile feed uses the full viewport width on every phone size/orientation.
 * Cards/sections touch the viewport edges; readable text keeps a safe inner gutter;
 * photo/video media bleeds through that gutter to the viewport edges.
 * Desktop is intentionally untouched.
 */

@media (max-width: 960px) {
  body.agronet-shell {
    --agronet-mobile-gutter-left: max(16px, env(safe-area-inset-left, 0px));
    --agronet-mobile-gutter-right: max(16px, env(safe-area-inset-right, 0px));
    overflow-x: hidden;
  }

  body.agronet-shell .agronet-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 calc(80px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-x: clip;
    box-sizing: border-box;
  }

  body.agronet-shell .agronet-layout,
  body.agronet-shell .agronet-left,
  body.agronet-shell .agronet-left-stack,
  body.agronet-shell .agronet-mobile-composer,
  body.agronet-shell .agronet-feed,
  body.agronet-shell .agronet-list,
  body.agronet-shell .agronet-right {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }

  body.agronet-shell .agronet-layout {
    gap: 10px;
  }

  body.agronet-shell .agronet-panel,
  body.agronet-shell .agronet-premium-cta,
  body.agronet-shell .agronet-composer,
  body.agronet-shell .agronet-card,
  body.agronet-shell .agronet-ad,
  body.agronet-shell .agronet-vacancies {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-sizing: border-box;
  }

  /* LinkedIn-like compact separator between feed posts on mobile. */
  body.agronet-shell .agronet-list > .agronet-card {
    margin-bottom: 8px;
  }

  /* Keep text, author information and actions readable on every phone width. */
  body.agronet-shell .agronet-card {
    padding-left: var(--agronet-mobile-gutter-left);
    padding-right: var(--agronet-mobile-gutter-right);
  }

  body.agronet-shell .agronet-card__head,
  body.agronet-shell .agronet-card__body,
  body.agronet-shell .agronet-card__title,
  body.agronet-shell .agronet-card__foot,
  body.agronet-shell .agronet-comments {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Photo/video media must touch the mobile viewport edges, including landscape safe areas. */
  body.agronet-shell .agronet-card .agronet-media,
  body.agronet-shell .agronet-card .agronet-media--video {
    width: calc(100% + var(--agronet-mobile-gutter-left) + var(--agronet-mobile-gutter-right));
    max-width: none;
    margin-left: calc(0px - var(--agronet-mobile-gutter-left));
    margin-right: calc(0px - var(--agronet-mobile-gutter-right));
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
    box-sizing: border-box;
  }

  body.agronet-shell .agronet-card .agronet-media img,
  body.agronet-shell .agronet-card .agronet-media video,
  body.agronet-shell .agronet-card .agronet-media--video .agronet-video,
  body.agronet-shell .agronet-card .agronet-media--video .agronet-video__tag {
    display: block;
    width: 100%;
    max-width: none;
    border-radius: 0;
    box-sizing: border-box;
  }

  body.agronet-shell .agronet-card .agronet-media--video .agronet-video {
    box-shadow: none;
  }

  /* Image-only advertising follows the same full-width mobile contract. */
  body.agronet-shell .agronet-ad--main,
  body.agronet-shell .agronet-ad--main img,
  body.agronet-shell .agronet-ad__image-link {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
    box-sizing: border-box;
  }

  /* Never let long text or controls create horizontal scrolling. */
  body.agronet-shell .agronet-card,
  body.agronet-shell .agronet-panel,
  body.agronet-shell .agronet-composer,
  body.agronet-shell .agronet-premium-cta,
  body.agronet-shell .agronet-ad {
    overflow-wrap: anywhere;
  }
}