/* ============================================================
   FRANENSA Dominican Republic — V11 Preview 08
   CAPABILITIES ONLY. Territory/map and all approved upstream modules frozen from V7.
   Pattern aligned to approved Colombia capability explorer.
   ============================================================ */

/* Colombia-pattern category tabs: white field, navy active tile. */
#capabilities .cap-tabs{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}
#capabilities .cap-tabs button{
  min-height:66px;
  border:1px solid #cad7e0!important;
  border-radius:14px;
  padding:12px 15px;
  background:rgba(255,255,255,.88)!important;
  color:#061d35!important;
  box-shadow:none!important;
  backdrop-filter:blur(10px);
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
#capabilities .cap-tabs button:hover{transform:translateY(-1px);border-color:#9eb2c1!important}
#capabilities .cap-tabs button small{color:#ff5a0a!important;font-weight:950;letter-spacing:.06em}
#capabilities .cap-tabs button b{color:#061d35!important;font-size:.91rem;line-height:1.18}
#capabilities .cap-tabs button.active{
  background:#061d35!important;
  color:#fff!important;
  border-color:#061d35!important;
  box-shadow:0 10px 28px rgba(6,29,53,.14)!important;
}
#capabilities .cap-tabs button.active b{color:#fff!important}
#capabilities .cap-tabs button.active small{color:#ff8b51!important}

/* Colombia-pattern explorer: photo rail + two-column accordion cards. */
#capabilities .cap-panel{
  margin-top:12px;
  grid-template-columns:minmax(205px,24%) minmax(0,1fr)!important;
  align-items:stretch;
  border:1px solid #c9d5de;
  border-radius:22px;
  overflow:hidden;
  background:rgba(255,255,255,.91)!important;
  box-shadow:0 18px 55px rgba(6,29,53,.10)!important;
  backdrop-filter:blur(12px);
}
#capabilities .cap-side{
  min-height:330px!important;
  padding:24px 22px!important;
  display:flex!important;
  flex-direction:column;
  justify-content:flex-end!important;
  isolation:isolate;
  background-color:#061d35!important;
  background-image:linear-gradient(180deg,rgba(6,29,53,.08) 0%,rgba(6,29,53,.42) 47%,rgba(6,29,53,.94) 100%),var(--cap-bg)!important;
  background-size:cover!important;
  background-position:center!important;
}
#capabilities .cap-side:after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,29,53,.12),transparent 55%);
}
#capabilities .cap-side>*{position:relative;z-index:2}
#capabilities .cap-side small{color:#ff8b51!important;font-size:.68rem;font-weight:950;letter-spacing:.08em}
#capabilities .cap-side h3{margin:10px 0 7px!important;font-size:1.55rem!important;line-height:1.05;color:#fff}
#capabilities .cap-side p{margin:0;color:#d8e5ed!important;font-size:.78rem}

#capabilities .cap-list{
  padding:12px!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-content:start!important;
  gap:10px!important;
  background:rgba(246,249,251,.72);
}
#capabilities .cap-list .cap-visual{
  position:relative;
  min-height:72px!important;
  overflow:hidden;
  display:block!important;
  border:1px solid #d2dde5!important;
  border-radius:14px!important;
  background-color:#f8fafb!important;
  background-image:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.84) 44%,rgba(255,255,255,.50) 100%),var(--bg)!important;
  background-size:cover!important;
  background-position:center!important;
  box-shadow:0 7px 20px rgba(6,29,53,.055)!important;
  transition:border-color .18s ease,box-shadow .18s ease,background-image .18s ease;
}
#capabilities .cap-list .cap-visual:before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(225,234,240,.05))!important;
}
#capabilities .cap-list .cap-visual:hover{
  border-color:#b8c8d3!important;
  box-shadow:0 10px 26px rgba(6,29,53,.085)!important;
  background-image:linear-gradient(90deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.80) 42%,rgba(255,255,255,.42) 100%),var(--bg)!important;
}
#capabilities .cap-list .cap-visual.open{
  border-color:#c2d1db!important;
  background-image:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.81) 46%,rgba(255,255,255,.46) 100%),var(--bg)!important;
}
#capabilities .cap-list .cap-item-toggle{
  position:relative;z-index:2;
  width:100%;
  min-height:70px;
  padding:15px 15px!important;
  display:grid!important;
  grid-template-columns:28px minmax(0,1fr) 20px!important;
  gap:8px;
  align-items:center!important;
  border:0;
  background:transparent!important;
  color:#061d35!important;
  text-align:left;
  cursor:pointer!important;
}
#capabilities .cap-list .cap-item-toggle span{color:#ff5a0a!important;font-size:.65rem;font-weight:950;letter-spacing:.04em}
#capabilities .cap-list .cap-item-toggle b{color:#061d35!important;font-size:.91rem!important;line-height:1.24!important;text-shadow:none!important}
#capabilities .cap-list .cap-item-toggle i{
  display:inline-flex!important;
  align-items:center;justify-content:center;
  width:20px;height:20px;
  color:#6e8494!important;
  font-size:1rem;font-style:normal;font-weight:500;
  transform:rotate(0deg);
  transition:transform .18s ease,color .18s ease;
}
#capabilities .cap-list .cap-visual.open .cap-item-toggle i{color:#ff5a0a!important;transform:rotate(45deg)}

/* Description is truly collapsible — hidden on initial render, like Colombia. */
#capabilities .cap-list .cap-item-detail,
#capabilities .cap-list .cap-visual .cap-item-detail{
  position:relative!important;z-index:2;
  display:block!important;
  max-height:0!important;
  overflow:hidden!important;
  opacity:0!important;
  padding:0 15px 0 51px!important;
  transition:max-height .24s ease,opacity .18s ease,padding .24s ease!important;
}
#capabilities .cap-list .cap-visual.open .cap-item-detail{
  max-height:240px!important;
  opacity:1!important;
  padding:0 15px 17px 51px!important;
}
#capabilities .cap-list .cap-item-detail p{
  margin:0!important;
  color:#617789!important;
  font-size:.80rem!important;
  line-height:1.55!important;
  text-shadow:none!important;
}

/* Stronger visibility of the RD.zip imagery while preserving copy contrast. */
#capabilities .cap-list .cap-visual:nth-child(odd){background-position:center 42%!important}
#capabilities .cap-list .cap-visual:nth-child(even){background-position:center 55%!important}

@media(max-width:900px){
  #capabilities .cap-panel{grid-template-columns:1fr!important}
  #capabilities .cap-side{min-height:230px!important;background-position:center 45%!important}
  #capabilities .cap-list{grid-template-columns:1fr 1fr!important}
}
@media(max-width:650px){
  #capabilities .cap-tabs{grid-template-columns:1fr!important}
  #capabilities .cap-panel{border-radius:18px}
  #capabilities .cap-list{grid-template-columns:1fr!important;padding:10px!important}
  #capabilities .cap-side{min-height:210px!important;padding:24px!important}
  #capabilities .cap-side h3{font-size:1.45rem!important}
  #capabilities .cap-list .cap-visual{min-height:68px!important}
  #capabilities .cap-list .cap-item-toggle{min-height:68px;padding:14px!important}
  #capabilities .cap-list .cap-visual.open .cap-item-detail{max-height:320px!important;padding:0 14px 16px 50px!important}
}
@media(prefers-reduced-motion:reduce){
  #capabilities .cap-tabs button,#capabilities .cap-list .cap-visual,#capabilities .cap-list .cap-item-toggle i,#capabilities .cap-list .cap-item-detail{transition:none!important}
}


/* V8 final cascade guards against older V7 recovery overrides. */
body #capabilities .cap-list .cap-visual .cap-item-toggle b{
  color:#061d35!important;
  text-shadow:none!important;
}
body #capabilities .cap-list .cap-visual .cap-item-toggle i{
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
  color:#6e8494!important;
}
body #capabilities .cap-list .cap-visual.open .cap-item-toggle i{
  color:#ff5a0a!important;
  transform:rotate(45deg)!important;
}
body #capabilities .cap-list .cap-visual .cap-item-detail{
  display:block!important;
  max-height:0!important;
  opacity:0!important;
  overflow:hidden!important;
  padding:0 15px 0 51px!important;
}
body #capabilities .cap-list .cap-visual.open .cap-item-detail{
  display:block!important;
  max-height:240px!important;
  opacity:1!important;
  overflow:hidden!important;
  padding:0 15px 17px 51px!important;
}
body #capabilities .cap-list .cap-visual .cap-item-detail p{
  color:#617789!important;
  text-shadow:none!important;
}