/* ============================================================
   Trade Licence (Mainland) cards, zone toggle and sub-cards.
   Phase 2 Batch 1.

   Three rules this file keeps to:

   1. No new colours and no new type scale. Every value below is either a
      token from main.css (--ink, --green, --gold, --sand, --line, --r-lg,
      --ease) or a measurement copied from the .sbox rules it sits beside.
   2. Animation is transform and opacity only. Nothing here animates height,
      width, top, margin or padding, so none of it can move the page around
      it, and the compositor can run all of it off the main thread.
   3. Layout is final on first paint. Every box that an animation touches is
      already at its final size before the animation starts - the cards fade
      and lift, they never grow - so the layout shift contribution is zero.
      The panes are the one place where a hidden box exists, and a hidden
      pane is display:none, which takes no space to begin with.

   Without JavaScript both panes are visible and stacked, which is the whole
   point of putting the tab behaviour behind a class the script adds.
   ============================================================ */

/* ---------- the zone toggle ---------- */
.lic-hub{padding:8px 0 4px}
.lic-zones{display:inline-flex;gap:4px;padding:5px;margin:0 0 26px;background:var(--sand);border:1px solid var(--line);border-radius:999px}
.lic-zone{display:inline-block;padding:10px 22px;border-radius:999px;font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:14.5px;letter-spacing:-.01em;color:var(--muted);
  /* The pill that slides under the active tab is this element's own
     background, faded in. A sliding pseudo-element would have had to animate
     left, which is a layout property on a flex child. */
  background:transparent;transition:color .35s var(--ease),background-color .35s var(--ease),box-shadow .35s var(--ease)}
.lic-zone:hover{color:var(--ink)}
.lic-zone.is-on{color:#fff;background:var(--green);box-shadow:0 8px 20px rgba(15,122,72,.26)}

/* The tab behaviour only exists once the script has marked the section.
   Until then - and for ever, if the script never runs - both panes show. */
.lic-hub.js .lic-pane{display:none}
.lic-hub.js .lic-pane.is-on{display:block;animation:lic-pane-in .42s var(--ease) both}
@keyframes lic-pane-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lic-hub:not(.js) .lic-zones{display:none}

/* ---------- the card grid ---------- */
.lic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:1100px){.lic-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media (max-width:620px){.lic-grid{grid-template-columns:1fr;gap:18px}}

/* The card itself is .sbox, so it already has the border, radius, shadow and
   the -8px hover lift. These add the photograph zoom and make the lift a
   little calmer on a card that carries no tags. */
.lic-card .lic-pic{height:168px;background-size:cover;background-position:center;background-color:var(--sand);
  transform:scale(1);transition:transform .7s var(--ease);will-change:transform}
.lic-card:hover .lic-pic,.lic-card:focus-within .lic-pic{transform:scale(1.06)}
/* Until a card's photograph exists, .sbox's dark bottom gradient sits on an
   empty sand panel and reads as a picture that failed to load. The empty
   state is drawn on purpose instead: no overlay, a quiet two-tone wash in the
   brand greens, the icon badge kept where it always is, and no zoom, because
   there is nothing to zoom. The moment the attachment is in the Media Library
   the class is gone and the photograph behaves exactly as on every other card
   on the site. */
.lic-card .lic-pic.lic-nopic{
  background-image:linear-gradient(135deg,rgba(13,91,62,.10),rgba(13,91,62,.03) 46%,rgba(198,160,74,.10));
  transform:none}
.lic-card .lic-pic.lic-nopic:after{display:none}
.lic-card:hover .lic-pic.lic-nopic,.lic-card:focus-within .lic-pic.lic-nopic{transform:none}
/* The zoom has to be clipped by the card, and .sbox already sets
   overflow:hidden - this only guarantees it if that ever changes. */
.lic-card{overflow:hidden}
.lic-card .body{padding:34px 22px 22px}
.lic-card h3{font-size:20.5px}
.lic-card p{font-size:14.5px}
/* A card with no page has one button, and a lone WhatsApp button stretched to
   the full width read as the primary action on a page full of them. Half
   width, left aligned, so the grid still looks deliberate. */
.lic-card .acts .btn-wa:only-child{flex:0 1 auto;min-width:52%}

/* ---------- the Free Zone panel ---------- */
.lic-fz{max-width:760px}
.lic-fz-acts{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.lic-fz-acts .btn{flex:0 1 auto}

/* ---------- the sub-card jump grid ---------- */
.lic-sub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px}
@media (max-width:1100px){.lic-sub-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.lic-sub-grid{grid-template-columns:1fr}}
.lic-sub{position:relative;display:block;padding:18px 44px 18px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.lic-sub:hover{transform:translateY(-4px);border-color:rgba(232,163,60,.75);box-shadow:0 18px 38px rgba(10,46,34,.12)}
.lic-sub-t{display:block;font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:16px;color:var(--ink);letter-spacing:-.01em}
.lic-sub-d{display:block;margin-top:5px;font-size:13.5px;color:var(--muted);line-height:1.55}
.lic-sub-go{position:absolute;top:18px;right:18px;color:var(--green);font-size:17px;line-height:1;
  transform:translateX(0);transition:transform .45s var(--ease)}
.lic-sub:hover .lic-sub-go{transform:translateX(4px)}

/* ---------- a section a sub-card jumped to ---------- */
/* scroll-margin, not scroll-padding on a parent: the header is fixed and a
   bare anchor jump puts the heading underneath it. */
.lic-block{scroll-margin-top:96px}
/* A long unbroken string - and every Dubai legislation URL is one, because the
   path is percent-encoded end to end - has no break opportunity, so it pushes
   past the column and out of the card instead of wrapping. Anchor text is
   short now that the markers link properly, but the URL still shows when a
   link is printed, copied or read by a tool that drops the anchor, and the
   first sign of trouble should not be text running off the page. */
.lic-block,.lic-block p,.lic-block li,.lic-sub p,.lic-card p,.sp-block p,.sp-block li{overflow-wrap:anywhere}
.lic-block a,.sp-block a{overflow-wrap:anywhere}
/* A one-off highlight when a section is arrived at, so it is obvious which of
   seven sections the card went to. Outline, not border: a border would change
   the box size and move the page. */
.lic-block.lic-hit{animation:lic-hit 1.5s var(--ease) both}
@keyframes lic-hit{0%{outline:2px solid rgba(232,163,60,.85);outline-offset:6px}70%{outline:2px solid rgba(232,163,60,.85);outline-offset:6px}100%{outline:2px solid rgba(232,163,60,0);outline-offset:6px}}

/* ---------- Arabic / RTL ---------- */
/* Everything above that has a side is mirrored here rather than written with
   logical properties, because the rest of the stylesheet is built the same way
   and mixing the two is how an RTL bug gets missed. */
html[dir="rtl"] .lic-sub{padding:18px 18px 18px 44px}
html[dir="rtl"] .lic-sub-go{right:auto;left:18px;transform:scaleX(-1)}
html[dir="rtl"] .lic-sub:hover .lic-sub-go{transform:scaleX(-1) translateX(4px)}
html[dir="rtl"] .lic-zone{letter-spacing:0}
html[dir="rtl"] .lic-sub-t{letter-spacing:0}

/* ---------- reduced motion ---------- */
/* Off means off: no fade, no lift, no zoom, no pane animation, no highlight.
   The layout is identical either way, which is the test that the animation was
   decoration rather than structure. */
@media (prefers-reduced-motion:reduce){
  .lic-card .lic-pic,.lic-card:hover .lic-pic,.lic-card:focus-within .lic-pic{transform:none;transition:none}
  .lic-sub,.lic-sub:hover{transform:none;transition:none}
  .lic-sub-go,.lic-sub:hover .lic-sub-go{transform:none;transition:none}
  html[dir="rtl"] .lic-sub-go,html[dir="rtl"] .lic-sub:hover .lic-sub-go{transform:scaleX(-1)}
  .lic-zone{transition:none}
  .lic-hub.js .lic-pane.is-on{animation:none}
  .lic-block.lic-hit{animation:none}
}

/* ---------- the top quote panel ---------- */
/* A real entry point to the one form at the foot of the page, not a second
   form: see the comment on ahd_lic_render_quote_strip() for why. */
.lic-quote{padding:0}
.lic-quote-in{padding:22px;background:var(--sand);border:1px solid var(--line);border-radius:var(--r-lg)}
.lic-quote-h{margin:0;font-family:"Manrope",system-ui,sans-serif;font-weight:800;font-size:18px;color:var(--ink);letter-spacing:-.02em}
.lic-quote-d{margin:6px 0 0;font-size:14.5px;color:var(--muted);line-height:1.6}
.lic-quote-acts{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.lic-quote-acts .btn{flex:0 1 auto;padding:10px 15px;font-size:13.5px}
@media (max-width:620px){
  .lic-quote-in{padding:18px}
  .lic-quote-acts .btn{flex:1 1 100%;justify-content:center}
}
html[dir="rtl"] .lic-quote-h{letter-spacing:0}

/* The heading that keeps the document order h1 -> h2 -> h3 once the grid's
   card titles arrive. Sized as a section heading, not a page heading. */
.lic-hub-h{margin:0 0 16px;font-family:"Manrope",system-ui,sans-serif;font-weight:800;font-size:26px;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
@media (max-width:620px){.lic-hub-h{font-size:22px}}
html[dir="rtl"] .lic-hub-h{letter-spacing:0}