/* Shifa Ul-Dahar — V4. RESPONSIVE PORTRAIT-SAFE QUR'ANIC MESSAGE.
   Intentional isolated layout patch: no changes to approved colors, typography,
   service/product cards, functionality or mobile navigation.
   The verse is now a real layout sibling, NEVER absolutely layered over the
   founder's photograph at laptop, desktop and tablet widths. */

@media (min-width: 851px) {
  .hero .hero-grid {
    grid-template-columns: minmax(0,46%) minmax(0,54%);
    grid-template-areas: "hero-copy hero-photo" "hero-copy hero-message";
    align-items: start;
    column-gap: 14px;
    row-gap: 13px;
    padding-block: 36px 38px;
  }
  .hero .hero-copy {
    grid-area: hero-copy;
    align-self: center;
    width: 100%;
  }
  .hero .hero-visual {
    grid-area: hero-photo;
    align-self: end;
    margin: 0;
    height: auto;
    aspect-ratio: 1377 / 768;
    min-width: 0;
    max-width: 100%;
  }
  .hero .hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .hero .hero-quote {
    grid-area: hero-message;
    position: relative;
    inset: auto;
    align-self: start;
    justify-self: end;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 13px 30px 17px;
    border-radius: 20px;
    box-sizing: border-box;
    /* Keep the original V3 gold/emerald surface and delicate frame. */
  }
  .hero .hero-quote::before {border-radius: 14px}
  .hero .hero-quote::after {top:-13px}
  .hero .hero-quote .verse-arabic {
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.62;
    max-width: 100%;
  }
  .hero .hero-quote .verse-divider {margin: 0 auto 4px;height: 12px;line-height: 12px}
  .hero .hero-quote .verse-translation {max-width: 490px;font-size: 12px;line-height: 1.5;margin-bottom: 5px}
  .hero .hero-quote .verse-source {font-size: 9px}
  html[dir="rtl"] .hero .hero-quote .verse-translation {font-size: 13px;line-height: 2}
}

/* Narrow laptops and tablets: image beside the headline, inscription UNDER the
   whole two-column hero. This gives the photo a safe box without overlap. */
@media (min-width: 641px) and (max-width: 850px) {
  .hero .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .94fr);
    grid-template-areas: "hero-copy hero-photo" "hero-message hero-message";
    align-items: center;
    column-gap: 16px;
    row-gap: 16px;
    min-height: 0;
    padding-top: 30px;
    padding-bottom: 34px;
  }
  .hero .hero-copy {grid-area:hero-copy;min-width:0;align-self:center}
  .hero .hero-visual {
    grid-area:hero-photo;
    width:100%;
    min-width:0;
    height:auto;
    margin:0;
    aspect-ratio:1377 / 768;
  }
  .hero .hero-visual img {width:100%;height:100%;object-fit:contain}
  .hero .hero-quote {
    position:relative;
    inset:auto;
    grid-area:hero-message;
    justify-self:center;
    align-self:start;
    width:min(100%,660px);
    max-width:none;
    min-height:0;
    padding:14px 22px 18px;
    margin:0;
    border-radius:19px;
    box-sizing:border-box;
  }
  .hero .hero-quote::before{border-radius:12px}
  .hero .hero-quote::after{top:-12px}
  .hero .hero-quote .verse-arabic{font-size:21px;line-height:1.67}
  .hero .hero-quote .verse-divider{height:11px;line-height:11px;margin:1px auto 3px}
  .hero .hero-quote .verse-translation{font-size:12px;line-height:1.55;max-width:460px;margin-bottom:6px}
  .hero .hero-quote .verse-source{font-size:9px}
  html[dir="rtl"] .hero .hero-quote .verse-translation{font-size:12px;line-height:2}
}

/* Phone: V3 already puts the inscription after the text; explicitly keep it in
   normal flow. Allow sufficient bottom breathing space and avoid the toolbar. */
@media (max-width: 640px) {
  .hero .hero-quote {
    position: relative;
    inset: auto;
    order: 2;
    isolation:isolate;
    max-width: calc(100% - 48px);
    margin-top: 15px;
    margin-bottom: 4px;
  }
  .hero .hero-copy {isolation:isolate}
  .hero .hero-visual {pointer-events:none}
}

@media (prefers-reduced-motion:reduce) {
  .hero .hero-quote {transition:none!important}
}

/* The fixed side actions get their own unobstructed outer-edge safe rail.
   This also keeps the original ROHANI AMMAL / HIKMAT signs visible. */
@media (min-width: 851px) {
  .hero .hero-visual,
  .hero .hero-quote {
    justify-self: start;
    width: calc(100% - 66px);
  }
}
@media (min-width: 641px) and (max-width: 850px) {
  .hero .hero-visual {justify-self:start;width:calc(100% - 66px)}
  .hero .hero-quote {justify-self:start;width:min(calc(100% - 74px),590px);margin-inline-start:8px}
}
/* Mirror the space on RTL, so right-to-left text retains the correct reading side. */
html[dir="rtl"] .hero .hero-quote {direction:rtl}