/* =========================================================
   HONDURAS — OFFICIAL RESOURCES
   ALIGNMENT ONLY — EXACT HTML STRUCTURE
   ========================================================= */

/*
   REAL STRUCTURE:
   span
   h3
   p
   .sl-resource-action

   CERT / REG / INFO / GO is generated by ::before.
*/


/* Four cards — geometry only */
#official-resources .hnd2-resource-grid{
  align-items:stretch !important;
}


#official-resources .hnd2-resource{
  box-sizing:border-box !important;

  height:220px !important;
  min-height:220px !important;

  padding:22px 22px 20px !important;

  display:grid !important;

  grid-template-columns:1fr !important;

  grid-template-rows:
    18px
    40px
    30px
    48px
    1fr
    18px !important;

  row-gap:0 !important;

  align-items:start !important;
}


/* =========================================================
   01 / CERTIFICATION
   02 / REGISTRY
   etc.
   ========================================================= */

#official-resources
.hnd2-resource
> span:first-child{
  grid-row:1 !important;

  position:static !important;

  width:auto !important;
  height:auto !important;

  margin:0 !important;
  padding:0 !important;

  align-self:start !important;
  justify-self:start !important;

  transform:none !important;

  line-height:1 !important;
  white-space:nowrap !important;
}


/* =========================================================
   CERT / REG / INFO / GO
   This is the REAL pseudo badge.
   Do not change its content or color.
   ========================================================= */

#official-resources
.hnd2-resource::before{
  grid-row:2 !important;

  position:static !important;

  align-self:start !important;
  justify-self:start !important;

  width:31px !important;
  min-width:31px !important;
  max-width:31px !important;

  height:31px !important;
  min-height:31px !important;
  max-height:31px !important;

  margin:4px 0 0 !important;
  padding:0 !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  transform:none !important;

  line-height:1 !important;
}


/* =========================================================
   HEADINGS
   ========================================================= */

#official-resources
.hnd2-resource
> h3{
  grid-row:3 !important;

  position:static !important;

  width:100% !important;
  min-width:0 !important;

  height:auto !important;
  min-height:26px !important;
  max-height:none !important;

  margin:0 !important;
  padding:0 !important;

  align-self:start !important;
  justify-self:stretch !important;

  transform:none !important;

  line-height:1.2 !important;

  overflow:visible !important;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

#official-resources
.hnd2-resource
> p{
  grid-row:4 !important;

  position:static !important;

  width:100% !important;
  min-width:0 !important;

  height:auto !important;

  margin:3px 0 0 !important;
  padding:0 !important;

  align-self:start !important;

  transform:none !important;

  overflow:visible !important;
}


/* =========================================================
   BOTTOM ACTION
   ========================================================= */

#official-resources
.hnd2-resource
> .sl-resource-action{
  grid-row:6 !important;

  position:static !important;

  width:auto !important;
  height:18px !important;
  min-height:18px !important;

  margin:0 !important;
  padding:0 !important;

  align-self:end !important;
  justify-self:start !important;

  display:flex !important;
  align-items:center !important;

  white-space:nowrap !important;
}


/* =========================================================
   HOVER — POSITION MUST NOT CHANGE
   Existing colors/effect remain untouched.
   ========================================================= */

#official-resources
.hnd2-resource:hover
> span:first-child,

#official-resources
.hnd2-resource:hover
> h3,

#official-resources
.hnd2-resource:hover
> p,

#official-resources
.hnd2-resource:focus-within
> span:first-child,

#official-resources
.hnd2-resource:focus-within
> h3,

#official-resources
.hnd2-resource:focus-within
> p{
  transform:none !important;
}


/* Keep pseudo badge in the exact same place on hover */
#official-resources
.hnd2-resource:hover::before,

#official-resources
.hnd2-resource:focus-within::before{
  position:static !important;

  width:31px !important;
  height:31px !important;

  margin:4px 0 0 !important;

  transform:none !important;
}


/* Existing action may slide horizontally on hover.
   Do not alter its vertical position. */
#official-resources
.hnd2-resource:hover
> .sl-resource-action,

#official-resources
.hnd2-resource:focus-within
> .sl-resource-action{
  margin:0 !important;
}


/* =========================================================
   RESPONSIVE — ONLY THIS RESOURCE GRID
   ========================================================= */

@media(min-width:901px){

  #official-resources .hnd2-resource-grid{
    grid-template-columns:
      repeat(4,minmax(0,1fr)) !important;

    gap:14px !important;
  }

}


@media(min-width:601px) and (max-width:900px){

  #official-resources .hnd2-resource-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

}


@media(max-width:600px){

  #official-resources .hnd2-resource-grid{
    grid-template-columns:
      1fr !important;
  }

}


/* =========================================================
   OFFICIAL RESOURCES — BADGE → TITLE GAP ONLY
   ========================================================= */

#official-resources
.hnd2-resource-grid
> .hnd2-resource
> h3{
  margin-top:7px !important;
}


/* OFFICIAL RESOURCES — TOP LABEL SIZE ONLY */
#official-resources
.hnd2-resource
> span:first-child{
  font-size:8.5px !important;
}


/* OFFICIAL RESOURCES — TOP LABEL SIZE ONLY */
#official-resources
.hnd2-resource
> span:first-child{
  font-size:10px !important;
}


/* =========================================================
   OFFICIAL RESOURCES — TOP LABEL 10PX ONLY
   High-specificity override
   ========================================================= */

html body
#official-resources
.hnd2-resource-grid
> .hnd2-resource
> span:first-child:not(.sl-resource-action){
  font-size:10px !important;
  line-height:1.15 !important;
}