/* ==========================================================================
   Africompass — Top Destinations  (SafariBookings-style list + detail)
   Layout uses one CSS grid so the detail card ALWAYS equals the list height,
   and collapses into a clean accordion on mobile. No green anywhere.
   ========================================================================== */
.acmp-d,.acmp-d *{box-sizing:border-box;}
.acmp-d{
  --accent:#ea7940;     /* brand orange */
  --list-w:280px;       /* width of the left list column */
  --tint:#fdf0e7;       /* active row background */
  --tint-2:#faf5ee;     /* hover row background */
  --tink:#b3551f;       /* warm text on tint */
  --line:#e7e3da;       /* row divider */
  --panel:#16150f;      /* dark fallback when no photo */
  --ink:#2a2722;
  --radius:14px;
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  max-width:1140px;margin:0 auto;color:var(--ink);
}

/* ── grid: column 1 = list rows, column 2 = the spanning detail card ── */
.acmp-d__wrap{
  position:relative;
  display:grid;
  grid-template-columns:var(--list-w) minmax(0,1fr);
  min-height:var(--acmp-h,420px);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}

/* list rows */
.acmp-d__tab{
  grid-column:1;position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;text-align:left;cursor:pointer;
  padding:16px 18px;border:0;border-bottom:1px solid var(--line);
  background:#fff;font:inherit;font-size:15px;font-weight:600;color:var(--ink);
  transition:background .18s,color .18s,padding-left .18s;
}
.acmp-d__tab:hover{background:var(--tint-2);color:var(--tink);padding-left:22px;}
.acmp-d button.acmp-d__tab.is-active{background:#fdf0e7 !important;color:#ea7940 !important;z-index:2;}
.acmp-d__tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.acmp-d__chev{display:none;width:17px;height:17px;flex:0 0 auto;color:var(--accent);transition:transform .2s ease;}

/* desktop connector: active row points into the panel */
.acmp-d__tab.is-active::after{
  content:"";position:absolute;z-index:3;top:50%;right:-1px;transform:translateY(-50%);
  border:9px solid transparent;border-right-color:var(--panel);
}

/* the detail card spans EVERY row of column 2 → height == list height, always */
.acmp-d__panel{
  position:absolute;top:0;bottom:0;left:var(--list-w);right:0;z-index:1;
  overflow:hidden;
  background-color:var(--panel);
  background-image:var(--acmp-img,none);
  background-position:center;background-size:cover;background-repeat:no-repeat;
  color:#fff;
  display:none;animation:acmp-fade .35s ease;
}
.acmp-d__panel.is-active{display:flex;}
.acmp-d__panel::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.52) 52%,rgba(0,0,0,.82) 100%);
}
.acmp-d__panel.is-noimg::before{background:linear-gradient(180deg,rgba(255,255,255,.045),transparent 30%);}
.acmp-d__panel-in{
  position:relative;z-index:1;width:100%;
  display:flex;flex-direction:column;padding:clamp(24px,3vw,40px);
}
@keyframes acmp-fade{from{opacity:0}to{opacity:1}}

/* head: name + rating */
.acmp-d__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.acmp-d__name{
  font-family:"Poppins","Montserrat",sans-serif;
  font-size:clamp(26px,2.8vw,36px);font-weight:700;line-height:1.05;letter-spacing:-.015em;
  color:#fff;text-decoration:none;
}
a.acmp-d__name{border-bottom:2px solid transparent;transition:border-color .18s;}
a.acmp-d__name:hover{border-color:var(--accent);}
.acmp-d__rate{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:5px;}
.acmp-d__stars{position:relative;display:inline-block;white-space:nowrap;line-height:0;}
.acmp-d__stars svg{width:16px;height:16px;}
.acmp-d__stars-bg svg{fill:rgba(255,255,255,.32);}
.acmp-d__stars-fg{position:absolute;inset:0;overflow:hidden;}
.acmp-d__stars-fg svg{fill:var(--accent);}
.acmp-d__score{font-weight:700;font-size:14.5px;}
.acmp-d__score small{font-weight:500;opacity:.7;}
.acmp-d__reviews{font-size:12.5px;color:rgba(255,255,255,.7);text-decoration:underline;text-underline-offset:3px;}
a.acmp-d__reviews:hover{color:#fff;}

.acmp-d__tag{margin:8px 0 0;font-size:14.5px;font-style:italic;color:rgba(255,255,255,.8);}
.acmp-d__desc{
  margin:14px 0 0;max-width:62ch;font-size:14.5px;line-height:1.62;color:rgba(255,255,255,.9);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* info row — circular outline icons */
.acmp-d__metas{display:flex;flex-wrap:wrap;gap:18px 30px;margin:22px 0 26px;}
.acmp-d__meta{display:flex;align-items:center;gap:12px;}
.acmp-d__ico{
  width:42px;height:42px;flex:0 0 auto;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.42);
  display:flex;align-items:center;justify-content:center;color:var(--accent);
}
.acmp-d__ico svg{width:20px;height:20px;}
.acmp-d__meta-t{display:flex;flex-direction:column;gap:2px;}
.acmp-d__meta-l{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.62);}
.acmp-d__meta-v{font-size:14px;font-weight:600;color:#fff;line-height:1.3;}

/* CTA pinned to the bottom so the card fills its height cleanly */
.acmp-d__cta{
  align-self:flex-start;margin-top:auto;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--accent);color:#fff;text-decoration:none;
  font-weight:600;font-size:14px;padding:13px 22px;border-radius:10px;
  transition:filter .15s ease;
}
.acmp-d__cta svg{width:17px;height:17px;transition:transform .18s ease;}
.acmp-d__cta:hover{filter:brightness(1.06);}
.acmp-d__cta:hover svg{transform:translateX(3px);}

/* view-all — final row of the left column */
.acmp-d__all{
  grid-column:1;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 18px;background:var(--tint);
  font-size:14px;font-weight:700;color:var(--tink);text-decoration:none;
  transition:background .18s,padding-left .18s;
}
.acmp-d__all svg{width:17px;height:17px;}
.acmp-d__all:hover{background:#fbe2d2;padding-left:22px;}

/* ───────────  mobile: active = card on top, one other, View all  ─────────── */
@media (max-width:860px){
  .acmp-d__wrap{display:flex;flex-direction:column;min-height:0;}
  /* the selected destination shows as a full-width card at the top */
  .acmp-d__panel{position:static;left:auto;right:auto;top:auto;bottom:auto;z-index:auto;order:-1;min-height:300px;background-image:var(--acmp-img-m,var(--acmp-img,none));}
  .acmp-d__panel.is-active{display:flex;}
  .acmp-d__panel-in{padding:22px 20px 26px;}
  .acmp-d__name{font-size:23px;}
  .acmp-d__cta{margin-top:18px;}
  .acmp-d__metas{gap:16px 24px;margin:18px 0 4px;}
  /* hide every row, then reveal only ONE other destination (tagged by JS) */
  .acmp-d__tab{display:none !important;}
  .acmp-d__tab.acmp-d__tab--mo:not(.is-active){display:flex !important;order:1;border-top:1px solid var(--line);}
  .acmp-d__tab.is-active{display:none !important;}
  .acmp-d__tab.is-active::after{display:none;}
  .acmp-d__chev{display:none;}
  .acmp-d__all{order:2;}
}