/* =========================================================
   MOBILE STYLES — apply only on screens up to 767px wide.
   Edit freely: nothing here changes the desktop version.
   ========================================================= */

@media (max-width: 767px) {

  :root { --side: 16px; }

  /* Header */
  .site-header { padding: 36px 0 28px; }
  .site-logo { font-size: 34px; line-height: 40px; letter-spacing: 0.02em; }
  .site-nav { padding-top: 20px; gap: 6px 20px; }
  .site-nav a { font-size: 22px; line-height: 30px; }

  /* Gallery: one card per row */
  .covers {
    grid-template-columns: 1fr;
    padding-top: 24px;
  }
  .cover-details { padding: 16px 0 36px; }
  .cover-title { font-size: 20px; line-height: 24px; padding-bottom: 4px; }

  /* Project page */
  .page-header { padding: 32px 0; }
  .page-title { font-size: 34px; line-height: 40px; padding-bottom: 12px; }
  .page-description { font-size: 16px; line-height: 24px; }
  .modules.no-title { padding-top: 24px; }

  /* Every block goes full width; desktop spacing is reduced */
  .module {
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 20px !important;
  }

  /* Image grids: stack photos one under another */
  .module-grid .row { flex-direction: column; }
  .module-grid .cell { flex: none !important; width: 100% !important; aspect-ratio: auto !important; }
  .module-grid .cell .ph { height: auto; }

  /* Image + text side by side → stacked */
  .module-split { flex-direction: column; }
  .module-split > div { width: 100% !important; flex: none !important; }

  /* Text sizes (Adobe's own phone sizes) */
  .rich-text div, .rich-text p, .rich-text .main-text { font-size: 15px; line-height: 25px; }
  .rich-text .sub-title { font-size: 19px; line-height: 24px; padding: 8px 0; }
  .rich-text .title { font-size: 36px; line-height: 42px; }
  .rich-text .tagline .tagline-name { font-size: 23px; line-height: 28px; padding-bottom: 2px; }
  .rich-text .tagline .tagline-motto { font-size: 19px; line-height: 26px; }
  .module.module-tagline { padding-bottom: 24px !important; }
  .module:has(+ .module-tagline) { padding-bottom: 20px !important; }
  .module:has(+ .module-tagline.close-to-logo) { padding-bottom: 6px !important; }
  .brand-divider { margin: 32px 0 64px; }
  .logo-rule { margin: 20px 0 24px; }
  .side-motto .tagline { margin: 4px 0 20px; }
  .module.module-tagline::after { margin-top: 14px; }
  .rich-text span { font-size: inherit !important; line-height: inherit !important; }

  .site-footer { padding: 36px 0; }
}