/* ==========================================================================
   Sana Tourism - "All Destinations, region by region"
   The card rows that sit directly BELOW the map on the Destinations page.
   Added 2026-09-05.
   --------------------------------------------------------------------------
   WHY THIS FILE LIVES IN /exploremap/

   It is not part of the map. It lives here because this folder is already the
   Destinations page's static asset folder, it already carries the .htaccess
   that keeps static files out of the Zend front controller, and it already
   declares the two brand webfaces ('Sana Almarai' and 'Sana PT Sans') that
   this section reuses. Putting the file anywhere else would mean a second
   copy of those @font-face rules for no gain.

   It MUST be loaded after explore.css, for those font families.

   --------------------------------------------------------------------------
   PURELY ADDITIVE. Nothing in explore.css, style.css or responsive.css was
   touched. Deleting this file, destinations.js and the markup block in
   themes/en/page/v.phtml + themes/ar/page/v.phtml puts the Destinations page
   back exactly as it was.

   Everything is scoped under .sana-dest so it cannot leak into the rest of
   the site, and no rule here uses an element selector on its own.

   --------------------------------------------------------------------------
   THE ONE !important IN THIS FILE, and why it is unavoidable:

     themes/{en,ar}/assets/css/responsive.css, at max-width:768px, carries

         a { padding: 14px 30px 14px 30px !important }

     Only !important beats !important, so every link in this section that must
     not be padded has to say so at higher specificity. Same defence the map
     pins needed - see explore.css line 198.
   ========================================================================== */

.sana-dest{
  /* ---- Palette. 2026-09-05. Two passes on the same day, both recorded here.

     PASS 1 - onto the brand guidelines. The section had been built on
     navy 021F41, a colour in no part of the guidelines, which was nonetheless
     its dominant colour: section title, every region name, every card title,
     the arrow glyphs and the card hover shadow. Beside it sat three greys that
     are not in the guidelines either (ink 5C6470, line E4E1DC, EDEBE8), and
     the two colours that WERE brand colours were both at the wrong hex -
     purple 795296 for 795295, blue 0894D0 for 0894d1. So three of the five
     brand colours (amber, coral, teal) appeared nowhere on the page.

     PASS 2 - onto the reference the client pointed at. The purple destination
     band that already exists on every REGION page: the #blog section in
     themes/{en,ar}/area/v.phtml, declared inline there as

         color:#fff; padding:70px 0px;
         background-image:linear-gradient(#795296, #402058);

     with transparent, SQUARE cards, a full-width near-square photo, a white
     30px title and a white "more ->" link under it, and no card panel at all.
     Everything below is matched to that section rather than invented, so the
     two read as the same component. One correction made on the way across:
     its top stop 795296 is one digit off the brand purple, so this uses
     795295. Its bottom stop 402058 is carried over unchanged - it is the
     purple the site already shows on 14 region pages.

     Every value below is a brand colour, a transparency of white on that
     purple, or the two stops of the reference band. Nothing else. ---- */
  --white:#ffffff;         /* headings, card titles and links on the purple  */
  --soft:rgba(255,255,255,.78);   /* card body copy                          */
  --line:rgba(255,255,255,.22);   /* the rule under a region head            */
  --card:transparent;      /* no white box - the photo sits on the purple    */

  /* ---- Per-region accent. Overwritten for each region further down; this is
     only the value a region gets if the rotation ever fails to match.
     NOTE the brand purple is NOT in the rotation any more - it is the ground
     the section now sits on, so a purple pill would vanish into it. The four
     that are left are the four that carry on purple. ---- */
  --accent:#0894d1;
  --accent-rgb:8,148,209;

  --font-head:'Sana Almarai','main',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Sana PT Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* One card's width, and the gap between two. The scroll step in
     destinations.js is read back off the DOM, so changing these two numbers is
     all it takes to re-pitch the rows - the arrows keep landing correctly. */
  /* ---- Card width. 2026-09-05: 300 -> 340 -> 405px -> TWO PER ROW. ----

     Why this is a formula and not a pixel number any more.

     The client asked for two things that together fix the width: a row must
     move whenever one of its cards is hidden, and it must move a WHOLE card
     each time. A scroll container can only travel a whole card if its content
     is at least one whole card wider than the container. At any fixed pixel
     width that stops being true on the shortest rows - at 405px, three cards
     came to 1263px inside a 1024px row, leaving 243px of slack, so a full
     429px step was clamped by the browser to a half card and the row rested
     mid-card.

     Sizing the card off the ROW instead makes the arithmetic exact. With two
     cards per view, c = (C - g) / 2, so a row of N cards has

         travel = N*c + (N-1)*g - C = (N-2) * (c + g) = (N-2) whole steps

     - exactly, at every viewport width, with no fixed number to go stale and
     no remainder to rest on. Three cards give exactly one full step, four give
     two, five give three, and two give zero, which is right: with nothing
     hidden there is nothing to bring into view. The container's own padding
     cancels out of that identity, so it holds regardless of it.

     To show a different number per view, change the 2 here and the divisor in
     the media queries with it. Showing three would make the cards the
     reference's 405px again at this width - but a three-card row would then
     have zero travel and would stop moving, which is the trade the client
     chose against. */
  --card-w:calc((100% - var(--gap)) / 2);
  --gap:24px;

  position:relative;
  display:block;
  padding:86px 0 96px;
  font-family:var(--font-body);

  /* ---- The section ground ----
     The reference band, with its top stop corrected to the brand purple.
     #402058 is NOT invented here: it is the bottom stop the region pages'
     #blog section already uses, so this is the same purple the site already
     shows on 14 other pages rather than a new colour. It also removes the
     problem the first pass was working around - there is no white seam left
     under the map's blue band to soften, because the section is now a colour
     block in its own right, exactly like the band above it. */
  color:var(--white);
  background-image:linear-gradient(#795295, #402058);
}

/* Named .sd-container rather than .container so it can never collide with the
   site's own Bootstrap grid. The 1360/40 pair is explore.css's .sms-container,
   and .sd-inner is its 80%, so these rows line up with the two edges of the
   map panel above them at every screen size. */
.sana-dest .sd-container{max-width:1360px;margin:0 auto;padding:0 40px}
.sana-dest .sd-inner{width:80%;margin:0 auto}

/* ===== Section heading ===== */
.sana-dest .sd-head{text-align:center;margin:0 auto 52px;max-width:780px}
.sana-dest .sd-title{
  font-family:var(--font-head);
  font-weight:700;
  font-size:30px;
  line-height:1.3;
  letter-spacing:-0.01em;
  color:var(--white);
  margin:0 0 12px;
  padding:0;
}
.sana-dest .sd-lede{
  font-family:var(--font-body);
  font-size:17px;
  font-weight:400;
  line-height:1.65;
  color:var(--soft);
  margin:0;
  padding:0;
}

/* ===== Per-region brand accent =====
   The guidelines carry five colours. Before today this section used two of
   them (and both at the wrong hex), so amber, coral and teal appeared nowhere
   on the page. Each region now takes one of the five in turn, which is what
   gives the section the "modern and vibrant" reading p.5 asks for while still
   never using a colour that is not in the guidelines.

   The accent drives that region's identity only - its count pill, the accent
   segment of its rule, its arrows and its card hover. It deliberately does NOT
   drive the two links ("region guide" and "discover"): those stay brand blue
   everywhere, so a link always looks like a link no matter which region it is
   sitting in.

   WHY nth-child AND NOT nth-of-type: .sd-inner's first child is .sd-head, and
   it is a div like the regions are, so nth-of-type would count it too. The
   regions are therefore children 2, 3, 4 ... hence the +2 offset below. If
   anything is ever inserted between .sd-head and the first .sd-region, shift
   these five numbers by one. Nothing else in the file depends on the order. */
.sana-dest .sd-region:nth-child(4n+2){--accent:#0894d1;--accent-rgb:8,148,209}   /* blue  */
.sana-dest .sd-region:nth-child(4n+3){--accent:#008f9d;--accent-rgb:0,143,157}   /* teal  */
.sana-dest .sd-region:nth-child(4n+4){--accent:#eaa03d;--accent-rgb:234,160,61}  /* amber */
.sana-dest .sd-region:nth-child(4n+5){--accent:#e6775c;--accent-rgb:230,119,92}  /* coral */

/* ===== One region ===== */
.sana-dest .sd-region{margin:0 0 54px}
.sana-dest .sd-region:last-child{margin-bottom:0}

.sana-dest .sd-region-head{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:0 0 14px;
  margin:0 0 22px;

  /* REMOVED 5 Sep 2026 at the client's request - the rule under the region
     head. It was a full-width hairline in --line with the first 72px of it in
     the region's accent, painted as two background gradients rather than a
     border so it cost no extra element. Both are gone; the region name now
     sits over its cards with nothing drawn between them.

     --line is consequently no longer painted anywhere. It is left declared in
     the palette because it costs nothing and putting the rule back is a matter
     of restoring this block and its RTL twin lower down. */
}

/* The region name. h3, so the page reads
   h1/h2 page banner > h2 section > h3 region - one clean outline. */
.sana-dest .sd-region-name{
  font-family:var(--font-head);
  font-weight:700;
  font-size:24px;
  line-height:1.25;
  color:var(--white);
  margin:0;
  padding:0;
  flex:0 1 auto;
}
.sana-dest .sd-region-name a{
  color:inherit;
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
  text-decoration:none;
  padding:0!important;   /* responsive.css - see the header of this file */
}
.sana-dest .sd-region-name a:hover{color:var(--accent)}

/* How many places sit under this region.
   REMOVED 5 Sep 2026 at the client's request - the "5 destinations" pill.

   Hidden here rather than deleted from the two templates on purpose: this
   stylesheet is scoped to .sana-dest and cannot break anything, whereas
   themes/{en,ar}/page/v.phtml is the template behind EVERY page/v URL on the
   site and a slip in it takes all of them down. display:none also removes the
   text from screen readers, so it is a real removal, not just a visual one.

   The <span class="sd-count"> is therefore still emitted in the HTML and
   simply never rendered. If you want it gone from the markup too, delete that
   one line from both templates and this rule with it - nothing else refers to
   the class. The old styling is kept below, commented, so it can come back. */
.sana-dest .sd-count{display:none}

/*
.sana-dest .sd-count{
  flex:0 0 auto;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:400;
  line-height:1;
  color:var(--white);
  background:var(--accent);
  border-radius:999px;
  padding:7px 12px;
  white-space:nowrap;
}
*/

/* Pushes the region link and the arrows to the far end. */
.sana-dest .sd-region-spacer{flex:1 1 auto}

/* REMOVED 5 Sep 2026 at the client's request - the "Region guide" link at the
   end of each region head ("dalil al-mintaqa" on the Arabic side).

   SAFE FOR SEO, and this was checked rather than assumed: it pointed at
   exactly the same URL as the region NAME beside it - both are built from the
   same $sdAreaHref in themes/{en,ar}/page/v.phtml - and the name is still a
   link. So every region page keeps its internal link off this section. What
   went was the SECOND, duplicate link to the same place, which is marginally
   tidier for a crawler than it was before.

   Hidden here rather than deleted from the two templates, for the same reason
   as the count pill above: this stylesheet cannot break anything, while
   themes/{en,ar}/page/v.phtml backs every page/v URL on the site.

   Two selector lists further down still name .sd-region-link - the RTL arrow
   mirror and the reduced-motion block. They are left alone on purpose: both
   also carry .sd-go svg, which is still very much visible, and editing a
   shared selector list to drop a harmless rule on a hidden element would risk
   the one that matters for no gain.

   To restore the link: delete the rule below. The styling it used to carry was
   flex:0 0 auto, inline-flex, gap 7px, --font-body 15px/1.2 in --white, no
   underline, padding 0!important, with the arrow sliding 3px and the text
   going to --accent on hover. */
.sana-dest .sd-region-link{display:none}

/* ===== The arrows =====
   Hidden until destinations.js has measured the row and found there is
   something to scroll to, so with JavaScript off nobody meets a dead control
   and a row that already fits never shows a pair of arrows that do nothing.
   The cards themselves scroll by touch and trackpad with no JavaScript at all. */
.sana-dest .sd-nav{display:none;flex:0 0 auto;gap:8px;margin-inline-start:4px}
.sana-dest .sd-rail.is-scrollable .sd-nav{display:inline-flex}

/* CHANGED 5 Sep 2026 at the client's request: the arrows are a bare chevron
   now, not a bordered circle, and the hover feedback moved off the circle and
   onto the chevron itself. The 38px box stays exactly as it was - it is the
   tap target, it is simply no longer drawn - so nothing about the hit area,
   the layout or the scroll behaviour changes. */
.sana-dest .sd-nav button{
  width:38px;height:38px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.65);
  cursor:pointer;
  transition:color .2s ease,opacity .2s ease;
}
/* bigger than the 14px it was inside the circle - on its own the chevron
   needs the extra size to read as a control. Sized for a mouse here; the
   touch branch below keeps it smaller, where the button itself grows to 44px. */
.sana-dest .sd-nav button svg{
  width:22px;height:22px;
  transition:transform .2s ease;
}
.sana-dest .sd-nav button:hover:not(:disabled){color:#fff}
.sana-dest .sd-nav button:hover:not(:disabled) svg{transform:scale(1.18)}
.sana-dest .sd-nav button:disabled{opacity:.35;cursor:default}
.sana-dest .sd-nav button:focus-visible{outline:2px solid var(--white);outline-offset:2px;border-radius:50%}

/* ===== The horizontal row =====
   overflow-x on a flex track. scroll-snap parks a whole card against the
   leading edge, so a half-cut card can never be left sitting there.
   The 4px of top/bottom padding is room for the cards' hover lift and focus
   ring; without it either one is clipped by the overflow. */
.sana-dest .sd-rail{position:relative}
.sana-dest .sd-track{
  display:flex;
  gap:var(--gap);
  margin:0;
  padding:4px 2px 0;
  list-style:none;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  /* REMOVED 5 Sep 2026 at the client's request - the scrollbar under each row.
     Hidden, NOT disabled: the row still scrolls by trackpad, by touch, by the
     arrows and by keyboard, and .sd-track keeps overflow-x:auto. Only the bar
     itself is no longer drawn. Firefox and the WebKit rule below. */
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.sana-dest .sd-track::-webkit-scrollbar{display:none}

.sana-dest .sd-item{
  flex:0 0 var(--card-w);
  width:var(--card-w);
  /* The 78vw cap that used to sit here is gone: --card-w is now a share of the
     row itself, so a card cannot exceed it, and a cap would have clipped the
     width and broken the whole-step arithmetic above. */
  list-style:none;
  scroll-snap-align:start;
}

/* ===== One card =====
   The whole card is a single <a>. One link per destination, not the three the
   older card blocks on this site emit, which is both cleaner for a crawler and
   a much bigger tap target. */
.sana-dest .sd-card{
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--card);
  /* SQUARE, and no box. The reference card is a photo sitting straight on the
     purple with the title under it - no white panel, no border, no radius.
     The 18px radius and the white panel that were here are what the client
     was calling out. */
  border:0;
  border-radius:0;
  text-decoration:none;
  padding:0!important;   /* responsive.css - see the header of this file */
  transition:transform .28s ease;
}
.sana-dest .sd-card:hover{transform:translateY(-3px)}
.sana-dest .sd-card:focus-visible{outline:2px solid var(--white);outline-offset:3px}

.sana-dest .sd-shot{
  position:relative;
  display:block;
  /* Near-square, as the reference is (its photos measure 405x402). height:auto
     with an aspect-ratio rather than a fixed pixel height, because these cards
     narrow on a phone and a fixed height would crop harder there than here.
     The min-height is the fallback for a browser too old for aspect-ratio. */
  aspect-ratio:1/1;
  height:auto;
  min-height:200px;
  overflow:hidden;
  background:rgba(255,255,255,.10);   /* the ground a lazy image paints onto */
  flex:none;
}
.sana-dest .sd-shot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.sana-dest .sd-card:hover .sd-shot img{transform:scale(1.06)}

.sana-dest .sd-body{
  display:flex;
  flex-direction:column;
  gap:7px;
  /* No side padding - there is no panel to inset from any more, so the title
     lines up with the edge of its photo exactly as the reference does. */
  padding:16px 2px 2px;
  flex:1 1 auto;
}
.sana-dest .sd-name{
  font-family:var(--font-head);
  font-weight:700;
  font-size:21px;
  line-height:1.3;
  color:var(--white);
  margin:0;
  padding:0;
  transition:color .2s ease;
}
.sana-dest .sd-card:hover .sd-name{color:var(--accent)}

/* Two lines of the destination's own opening description, then an ellipsis.
   -webkit-line-clamp is the only cross-browser way to do this; the max-height
   underneath it is the fallback for anything that does not support it. */
.sana-dest .sd-text{
  font-family:var(--font-body);
  font-size:14px;
  font-weight:400;
  line-height:1.55;
  color:var(--soft);
  margin:0;
  padding:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  max-height:calc(1.55em * 2);
}
.sana-dest .sd-go{
  margin-top:auto;
  padding-top:6px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:400;
  line-height:1.2;
  color:var(--white);
}
.sana-dest .sd-go svg{transition:transform .25s ease;flex:none}
.sana-dest .sd-card:hover .sd-go svg{transform:translateX(3px)}

/* ===== Arabic =====
   themes/ar sets direction:rtl on <body> with no dir attribute anywhere on the
   page, so [dir="rtl"] would never match. The Arabic template puts
   .sana-dest-rtl on the section instead - the same trick .sana-map-rtl uses in
   explore.css. The flex row, the gaps and the scroll all mirror on their own;
   only the two arrow glyphs and the card ground need saying. */
.sana-dest.sana-dest-rtl .sd-region-link svg,
.sana-dest.sana-dest-rtl .sd-go svg{transform:scaleX(-1)}
.sana-dest.sana-dest-rtl .sd-region-link:hover svg{transform:scaleX(-1) translateX(3px)}
.sana-dest.sana-dest-rtl .sd-card:hover .sd-go svg{transform:scaleX(-1) translateX(3px)}
/* The Arabic override that mirrored the region-head rule was removed with the
   rule itself on 5 Sep 2026 - there is no longer anything to mirror. */
/* PT Sans carries no Arabic glyphs, so body copy there takes Almarai Regular -
   the same substitution the map caption makes. */
.sana-dest.sana-dest-rtl{--font-body:'Sana Almarai','main',system-ui,sans-serif} /* T52: 'main' is Almarai on /ar - draws the digits and punctuation */

/* ===== Responsive =====
   The widths track explore.css's own breakpoints, so the rows keep matching
   the map panel's edges the whole way down. */
@media (max-width:1200px){
  .sana-dest .sd-inner{width:90%}
}
@media (max-width:992px){
  .sana-dest{padding:70px 0 78px}
  .sana-dest .sd-inner{width:100%}
  .sana-dest .sd-title{font-size:26px}
  .sana-dest .sd-region-name{font-size:21px}
}
@media (max-width:768px){
  /* One per view on a phone. Same identity with a divisor of 1: a row of N
     cards then has exactly (N-1) whole steps. */
  .sana-dest{--card-w:100%;padding:58px 0 64px}
  .sana-dest .sd-head{margin-bottom:38px}
  .sana-dest .sd-region{margin-bottom:42px}
  .sana-dest .sd-shot{min-height:170px}
  /* 2026-09-05: the arrows now show on a phone too, at the client's request.

     They were hidden here on the reasoning that a phone already scrolls the
     row with a thumb and the head row was tight. The second half of that is no
     longer true - the count pill and the "Region guide" link have both been
     removed since, so the head row now carries the region name and nothing
     else, and there is room.

     Bigger on touch than on a desktop: 44px rather than 38px, which is the
     smallest comfortable tap target. At 38px they were fine for a mouse
     pointer and small for a thumb. */
  .sana-dest .sd-nav button{width:44px;height:44px}
  /* the tap target carries the size on touch, so the chevron itself stays
     at the smaller 18px it had before the desktop bump */
  .sana-dest .sd-nav button svg{width:18px;height:18px}
}
@media (max-width:640px){
  .sana-dest .sd-container{padding:0 16px}
  .sana-dest .sd-title{font-size:23px}
  .sana-dest .sd-lede{font-size:15px}
  .sana-dest .sd-region-name{font-size:19px}
  .sana-dest .sd-region-head{gap:10px}
}

/* Somebody who has asked their system for less movement gets none of it. */
@media (prefers-reduced-motion:reduce){
  .sana-dest .sd-track{scroll-behavior:auto}
  .sana-dest .sd-card,
  .sana-dest .sd-shot img,
  .sana-dest .sd-go svg,
  .sana-dest .sd-region-link svg{transition:none}
  .sana-dest .sd-card:hover{transform:none}
  .sana-dest .sd-card:hover .sd-shot img{transform:none}
}