/* ------------------------------------------------------------
   Shared mobile layout for the Mishkah poster pages.
   Copy this file into <N>-html/mobile.css, link it AFTER style.css,
   and add the page-specific rules at the bottom.

   Above 767px nothing here applies: the poster layout stays as built.
   Below 768px the absolutely-positioned poster is switched off and
   the page becomes a normal flowing document: hero image, headline,
   readable text, lists/tables for data, footer.
   ------------------------------------------------------------ */

@media (max-width: 767px) {

  :root {
    --m-bg: #f4ecdd;          /* cream marble tone used across the posters */
    --m-bg-2: #e9dcc5;
    --m-text: #3b2310;
    --m-muted: #6d5742;
    --m-accent: #4d2c1a;      /* deep brown title bars */
    --m-accent-text: #edeade;
    --m-gold: #c9a97a;
    --m-radius: 14px;
  }

  html { -webkit-text-size-adjust: 100%; }

  body {
    background: var(--m-bg);
    color: var(--m-text);
    font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, sans-serif;
    font-size: 17px;
    line-height: 1.6;
  }

  /* ---- poster shell becomes a document ---- */
  .poster {
    max-width: none;
    aspect-ratio: auto;
    container-type: normal;
    overflow: visible;
    padding: 0 0 32px;
  }
  .poster__bg {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    display: none;            /* page decides: show a cropped hero instead */
  }

  /* ---- every generated text block flows ---- */
  .t {
    position: static;
    display: block;
    transform: none;
    white-space: normal;
    text-align: center;
    height: auto;
    width: auto;
    margin: 0;
  }
  .t span {
    font-size: inherit !important;   /* kill the cqw inline sizes */
    color: inherit !important;
    white-space: normal !important;
    display: inline;
  }
  .t.rot { transform: none; }
  .t:has(> span + span) { display: block; }
  .t:has(> span + span) > span { display: block; }

  /* ---- hero ---- */
  .m-hero {
    width: 100%;
    display: block;
    object-fit: cover;
    max-height: 62vh;
  }

  /* ---- title bar, like the posters' brown ribbon ---- */
  h1.t, .m-title {
    margin: 0;
    padding: 14px 20px;
    background: linear-gradient(90deg, #2e1a0f, #5a3a24 50%, #2e1a0f);
    color: var(--m-accent-text);
    font-family: "Asal Arabic", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.3;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  }
  h2.t, .m-subtitle {
    margin: 20px 16px 8px;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.4;
    color: var(--m-accent);
    text-align: center;
  }

  /* ---- content blocks ---- */
  .m-section { padding: 8px 16px; }
  .m-section + .m-section { padding-top: 0; }
  .m-section p, .t.para { margin: 0 0 14px; text-align: justify; text-align-last: center; }

  /* feature list (icon + label rows) */
  .m-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .m-list li {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(77, 44, 26, 0.12);
    border-radius: var(--m-radius);
    font-weight: 700;
    font-size: 18px;
  }
  .m-list img { width: 52px; height: 52px; flex: none; object-fit: contain; }

  /* key figures (price / area / counts) */
  .m-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 12px 0; }
  .m-stat {
    text-align: center; padding: 12px 8px;
    background: var(--m-accent); color: var(--m-accent-text);
    border-radius: var(--m-radius);
  }
  .m-stat strong { display: block; font-size: 28px; line-height: 1.1; font-family: Arial, sans-serif; }
  .m-stat small { display: block; font-size: 13px; opacity: 0.85; margin-top: 4px; }

  /* data table (feature counts) */
  .m-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15px; }
  .m-table th, .m-table td { padding: 10px 8px; text-align: center; border-bottom: 1px solid rgba(77, 44, 26, 0.15); }
  .m-table th { font-weight: 700; color: var(--m-accent); }
  .m-table td { font-family: Arial, sans-serif; font-weight: 700; font-size: 18px; }

  /* figures (plans, maps, logos cropped from the background) */
  .m-figure { margin: 12px 0; }
  .m-figure img { width: 100%; height: auto; display: block; border-radius: var(--m-radius); }
  .m-figure figcaption { text-align: center; font-size: 14px; color: var(--m-muted); margin-top: 6px; }

  /* call-to-action / links */
  .m-cta {
    display: block; margin: 16px; padding: 14px 18px;
    background: var(--m-accent); color: var(--m-accent-text);
    text-decoration: none; text-align: center; font-weight: 700; font-size: 18px;
    border-radius: var(--m-radius);
  }
  .site-link { position: static; display: block; }

  /* footer handle + logos */
  .m-footer {
    margin-top: 20px; padding: 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border-top: 1px solid rgba(77, 44, 26, 0.15);
    font-size: 14px; color: var(--m-muted);
  }
  .m-footer img { height: 36px; width: auto; }
  .m-footer .t { text-align: start; font-family: Arial, sans-serif; font-weight: 700; }

  .m-hide { display: none !important; }

  /* ============================================================
     Page 1 – cover (image-led)
     brand strip -> hero render -> kicker -> Mishkah mark -> tagline -> badge
     ============================================================ */
  /* mobile-only elements carry the `hidden` attribute so they add nothing on desktop */
  .m-only[hidden] { display: block; }

  .m-brand {
    margin: 0; padding: 18px 24px;
    background: linear-gradient(90deg, #2e1a0f, #5a3a24 50%, #2e1a0f);
    text-align: center;
  }
  .m-brand img { display: block; width: min(300px, 78%); height: auto; margin: 0 auto; }

  .m-cover .m-hero { height: auto; max-height: none; aspect-ratio: 1200 / 1152; }

  /* the inline top/left/width/height percentages are desktop-only; neutralise them here */
  .m-cover .t { width: auto !important; height: auto !important; }

  .m-kicker {
    margin: 22px 16px 6px;
    font-family: Arial, Helvetica, sans-serif; font-weight: 700;
    font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--m-muted); text-align: center;
  }
  .m-mark { margin: 6px auto 20px; text-align: center; }
  .m-mark img { display: block; width: min(280px, 68%); height: auto; margin: 0 auto; border-radius: 0; }

  .m-cover h1.t { font-size: 26px; padding: 16px 20px; text-wrap: balance; }

  .m-badge {
    display: inline-block; margin: 18px auto 0; padding: 10px 22px;
    border: 2px solid var(--m-accent); border-radius: 999px;
    font-size: 18px; font-weight: 700; color: var(--m-accent); text-align: center;
  }
  .m-badge-wrap { text-align: center; padding: 0 16px; }
}