/* Mobile-specific overrides for Gebeya Media */

@media (max-width: 767px) {
  /* Single post */
  .gm-post-wrap { padding: 0 !important; }
  .gm-post-title { font-size: 1.5rem !important; line-height: 1.2; }
  .gm-toc { display: none !important; } /* TOC only on desktop */
  .gm-share-floating { display: none !important; }

  /* Hero cards — 1 column on very small */
  .gm-hero-grid { grid-template-columns: 1fr !important; }
}

/* Drawer animation helper */
#gm-drawer { transition: transform .3s ease; }

/* Prose overrides for Amharic readability */
.gm-prose p { line-height: 1.9; font-size: 1.05rem; }
.gm-prose h2 { font-size: 1.6rem; font-weight: 800; margin-top: 1.75rem; margin-bottom: .75rem; }
.gm-prose h3 { font-size: 1.25rem; font-weight: 700; margin-top: 1.25rem; margin-bottom: .5rem; }
.gm-prose blockquote { border-left: 4px solid #16a34a; padding: .5rem 1rem; margin: 1.25rem 0; background:#f0fdf4; font-style: italic; color:#166534; }
.gm-prose ul { list-style: disc; margin-left: 1.5rem; }
.gm-prose ol { list-style: decimal; margin-left: 1.5rem; }
.gm-prose img { border-radius: .75rem; margin: 1rem 0; max-width: 100%; height: auto; }
.gm-prose a { color:#15803d; text-decoration: underline; }

/* =========================================================================
   Force responsive behaviour on user-generated content inside .gm-prose.
   Posts pasted from Microsoft Word, sites that embed YouTube via raw
   <iframe width="560">, or HTML containing inline pixel widths can break
   the mobile layout. The rules below override any inline style author
   markup might set, without needing to clean the stored post body.
   ========================================================================= */

/* The article container itself must never overflow horizontally. */
#gm-article-body,
.gm-prose {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Strip inline pixel widths from arbitrary block elements (Word/Google Docs
   paste leaves "<div style='width:720px'>" or "<p style='font-size:14pt'>"
   everywhere). We only relax the width — colors, alignment etc. survive. */
.gm-prose [style*="width"]:not(img):not(iframe):not(video):not(svg):not(picture):not(table) {
  max-width: 100% !important;
  width: auto !important;
}

/* Embedded media (YouTube, Vimeo, Twitter, generic iframes, audio, video).
   Make every embed fluid up to its container. Cap raw iframes at a 16:9
   aspect ratio so they never grow taller than the viewport. */
.gm-prose iframe,
.gm-prose video,
.gm-prose embed,
.gm-prose object {
  max-width: 100% !important;
  width: 100% !important;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: .75rem;
  display: block;
  margin: 1rem 0;
}

/* Pictures / responsive image wrappers. */
.gm-prose img,
.gm-prose picture,
.gm-prose figure {
  max-width: 100% !important;
  height: auto !important;
}
.gm-prose figure { margin: 1rem 0; }
.gm-prose figure img { width: 100%; }

/* Tables — wrap in a horizontal scroll container instead of breaking the
   page. Use display:block + overflow-x:auto so wide spreadsheets paste
   from Excel/Word still scroll cleanly on mobile. */
.gm-prose table {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: .95rem;
}
.gm-prose table th,
.gm-prose table td {
  border: 1px solid #e2e8f0;
  padding: .5rem .75rem;
  vertical-align: top;
  white-space: normal;
}
.gm-prose table th { background: #f8fafc; font-weight: 700; text-align: left; }

/* Code blocks — never let a long line stretch the page. */
.gm-prose pre,
.gm-prose code {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.gm-prose pre {
  background: #0f172a;
  color: #f1f5f9;
  padding: 1rem;
  border-radius: .75rem;
  margin: 1rem 0;
  font-size: .9rem;
}
.gm-prose :not(pre) > code {
  background: #f1f5f9;
  padding: .15rem .4rem;
  border-radius: .25rem;
  font-size: .9em;
}

/* Strip MS-Word artefacts: hidden <o:p>, mso-* fonts, fixed pt sizes that
   break readable text on small screens. We only neutralize the bad bits,
   the actual Amharic/English content stays styled by .gm-prose. */
.gm-prose o\:p { display: none !important; }
.gm-prose [style*="mso-"],
.gm-prose [style*="font-family: Nyala"],
.gm-prose [style*="font-family: 'Times New Roman'"],
.gm-prose [style*="font-family:Nyala"] {
  font-family: inherit !important;
}
.gm-prose [style*="font-size: 12.0pt"],
.gm-prose [style*="font-size:12.0pt"],
.gm-prose [style*="font-size: 14.0pt"],
.gm-prose [style*="font-size:14.0pt"] {
  font-size: inherit !important;
}

/* Mobile-only: shrink any oversized inline pt sizes Word/Docs leave behind. */
@media (max-width: 640px) {
  .gm-prose [style*="font-size"]:not(h1):not(h2):not(h3) {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
  }
  .gm-prose iframe { aspect-ratio: 16 / 9; }
  /* MS Word table cells with explicit widths — let them flow. */
  .gm-prose table[style*="width"],
  .gm-prose td[style*="width"],
  .gm-prose th[style*="width"] {
    width: auto !important;
    min-width: 0 !important;
  }
}

/* Ticker on mobile */
@media (max-width: 640px) {
  .gm-ticker .label { padding: .4rem .6rem; font-size: .75rem; }
  .gm-ticker .track { font-size: .85rem; }
}