/* ------------------------------------------------------------
   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 2 – location map: specific rules (same breakpoint)
   ------------------------------------------------------------ */
@media (max-width: 767px) {

  /* this page's .t blocks carry inline transform / height:0 / width:0 for the
     rotated road labels – the inline values beat the shared rules, so force them off */
  .t {
    transform: none !important;
    height: auto !important;
    width: auto !important;
  }

  /* mobile-only elements (figure, icons, button label) are [hidden] on desktop */
  .m-only[hidden] { display: block; }
  span.m-only[hidden] { display: inline; }

  h2.t { margin: 18px 16px 10px; font-size: 20px; }

  /* map figure */
  .m-figure { margin: 4px 0 8px; }
  .m-figure img { box-shadow: 0 6px 18px rgba(59, 35, 16, 0.18); }

  /* distance rows: [number badge] label ........ [icon] */
  .m-dist li { gap: 12px; padding: 10px 12px; }
  .m-dist .t { text-align: start; line-height: 1.35; }
  .m-dist .t[dir="ltr"] {
    flex: none;
    width: 50px !important; height: 50px !important;   /* beats the .t reset above */
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--m-accent); color: var(--m-accent-text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px; line-height: 1;
  }
  .m-dist .t:not([dir="ltr"]) { flex: 1 1 auto; font-size: 17px; }
  .m-dist .t > span { display: inline !important; }
  .m-dist .t > span + span::before { content: " "; }
  .m-dist img { width: 44px; height: 44px; margin-inline-start: auto; border-radius: 50%; }
  /* rows whose label has no number block on the poster get a marker instead */
  .m-dist li.m-nonum::before {
    content: ""; flex: none;
    width: 50px; height: 50px; border-radius: 50%;
    border: 2px solid var(--m-gold);
    background: radial-gradient(circle, var(--m-accent) 0 7px, transparent 8px);
  }

  /* site link = CTA button */
  .site-link.m-cta { width: auto; height: auto; margin: 8px 0 0; border-radius: var(--m-radius); }

  /* footer: logo on one side, social icons + handle on the other */
  .m-footer { flex-wrap: wrap; justify-content: space-between; }
  .m-footer img { height: 40px; }
  .m-footer__social { display: flex; align-items: center; gap: 10px; }
  .m-footer__social img { height: 22px; }
  .m-footer__social .t { font-size: 15px; color: var(--m-text); }
}