/* =============================================================================
   Asya — shared page header

   The home page has no banner, so home.css (which also carries the site's nav
   and footer chrome) never defined one. This file lifts the .page-head block
   out of contact.css verbatim so the generic page template, the blog index and
   the 404 page get the same banner. It is enqueued only on those views — the
   Packages and Contact templates keep their own copies untouched.
   ========================================================================== */

/* ---------------- page head ---------------- */
/* the Green Dome and minarets of the Prophet's Mosque — standing in for
   the same "niche and light" idea the mihrab arch carries on the home
   page. Darkening is concentrated near the very bottom edge only, so the
   photo stays bright through most of the banner but still hands off
   cleanly (no bright seam) into the dark section below. */
.page-head{
  padding:224px 0 90px;position:relative;overflow:hidden;
  min-height:88vh;display:flex;align-items:flex-end;
  background:
    linear-gradient(90deg, rgba(10,15,16,.8) 0%, rgba(10,15,16,.4) 38%, transparent 64%),
    linear-gradient(180deg, rgba(10,15,16,.08) 0%, rgba(10,15,16,.14) 55%, rgba(10,15,16,.4) 78%, rgba(10,15,16,.55) 90%, var(--ink) 117%),
    /* dark base under the photo: the heading and lede are fixed white, so
       without it they sit on the page's white until the jpg paints */
    var(--page-head-img, url("../img/hero-contact.jpg")) center top / cover no-repeat #17302c;
  border-bottom:1px solid var(--line);
}
@media (min-width:901px){
  /* full width, capped height — matching the photo's exact ratio made
     this section enormous on wide screens, so back to a bounded height
     (full width still guaranteed by cover; a little top/bottom crop is
     the trade-off, kept minimal by favouring the domes/minarets) */
  .page-head{
    min-height:700px;height:56vh;
    background:
      linear-gradient(90deg, rgba(10,15,16,.8) 0%, rgba(10,15,16,.4) 38%, transparent 64%),
      linear-gradient(180deg, rgba(10,15,16,.08) 0%, rgba(10,15,16,.14) 55%, rgba(10,15,16,.4) 78%, rgba(10,15,16,.55) 90%, var(--ink) 117%),
      var(--page-head-img, url("../img/hero-contact.jpg")) center 28% / cover no-repeat #17302c;
  }
}
.crumb{font-size:.76rem;letter-spacing:.1em;color:rgba(var(--on-photo-rgb),.7);display:flex;align-items:center;gap:10px;margin-bottom:18px}
.crumb a{color:var(--on-photo-accent)}
.crumb span{opacity:.6}
.page-head h1{max-width:20ch;color:var(--on-photo);text-shadow:0 2px 24px rgba(10,15,16,.8)}
.page-head .lede{margin-top:16px;color:rgba(var(--on-photo-rgb),.85);text-shadow:0 1px 14px rgba(10,15,16,.7)}
.head-text{position:relative;z-index:1}
@media (max-width:600px){
  .page-head{padding:184px 0 60px;min-height:64vh}