/* Mobile-only overrides for Fleur Fortuné — 2025-09-10 17:01 */
/* Desktop untouched; rules apply at <= 820px only. */
@media (max-width: 820px) {
  /* ---- Header structure ---- */
  .header {
    display: grid !important;
    grid-template-columns: 1fr !important;  /* single column on mobile */
    row-gap: 12px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  .leftgroup { display: contents !important; }
  .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 0 18px 0 !important; /* more space below brand (before Films) */
  }
  .nav {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-top: 6px !important;
  }
  /* Contacts under About (i.e., below nav) in smaller text */
  .rightcol, .contacts, .contact, .contact-block {
    grid-column: 1 !important;
    grid-row: 3 !important;
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
    margin-top: 8px !important;
    opacity: 0.95;
  }

  /* ---- Global padding on the right to avoid cutoff ---- */
  .wrap, .container, .main, body {
    padding-right: 12px !important; /* keep a slim white margin on the right */
    box-sizing: border-box !important;
  }

  /* ---- Videos: full width, small right margin, no crop ---- */
  .player-home, .player-sm, .video, .video-wrap, .video16x9 {
    width: calc(100% - 12px) !important;  /* keeps white margin on the right */
    margin-right: 12px !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    overflow: visible !important;
    max-width: 100% !important;
  }
  .player-home iframe, .player-sm iframe, .video iframe, .video16x9 iframe,
  iframe[src*="vimeo"], iframe[src*="youtube"] {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
  }

  /* ---- Published / Dreams of Living / Akurat Magazine ---- */
  /* Force one image per row; show right-side photos fully */
  .published .grid, .published .right, .published .gallery,
  .dreams-of-living .grid, .akurat-magazine .grid,
  .published .columns, .dreams-of-living .columns, .akurat-magazine .columns {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .published img, .dreams-of-living img, .akurat-magazine img,
  .published figure, .dreams-of-living figure, .akurat-magazine figure {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Fallback: any 2-col content in main becomes 1 col */
  .main :where(.grid, .columns) { grid-template-columns: 1fr !important; }

  /* ---- Prevent text cutoff on the right (About bio etc.) ---- */
  .bio, .about, .text, p, li {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  /* Generic media safety */
  img, video, iframe { max-width: 100% !important; height: auto !important; }

  html, body { overflow-x: hidden !important; }
}