/* =========================
   DF Infobox2 (merged with type helpers for lists/text)
   ASCII only
   ========================= */

:root { --copy-line-height: 1.55; }

/* 1) Large backdrop numeral */
.infobox.infobox2 .infobox-number::before{
  content: attr(data-content);
  position: absolute;
  left: 8px;
  top: -16px;
  font-family: 'Barlow Condensed','Barlow',sans-serif !important;
  font-weight: bold;
  line-height: 0.9;
  font-size: clamp(87px,12.5vw,101px) !important;
  color: #101010;
  opacity: 0.20;
  z-index: -1;
  transition: transform 0.5s ease, opacity 0.3s ease;
}
.infobox.infobox2:hover .infobox-number::before{ opacity: 0.45; }

/* 2) Number circle: perfect centering + hover flip */
.infobox.infobox2 .infobox-number{
  position: relative;
  display: grid;
  place-items: center;
  background: #00ccff;
  border: 2px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.25s ease;
}
.infobox.infobox2 .infobox-number .infobox2-icon{
  display: inline-block;
  position: static !important;
  line-height: 1;
  margin: 0;
  padding: 0 !important;
  color: #ffffff !important;
  transform: none;
}
.infobox.infobox2:hover .infobox-number{ background: #ffffff; border-color: #00ccff; }
.infobox.infobox2:hover .infobox-number .infobox2-icon{ color: #00ccff !important; }

/* 3) Content block basics */
.infobox.infobox2 .infobox-content{ padding-left: 0; }
.infobox.infobox2 .infobox-content h4{
  margin: 0;
  line-height: 1.22;
  font-size: 1.75rem;
  padding-bottom: 0 !important;
}
.infobox.infobox2 .infobox-content p{
  margin: 0.45rem 0 0 0;
  padding-right: 16px;
}

/* 4) Add a small gap ONLY when a list immediately follows the h4 */
.infobox.infobox2 .infobox-content h4 + ul,
.infobox.infobox2 .infobox-content h4 + ol,
.infobox.infobox2 .infobox-content h4 + .icon-list,
.infobox.infobox2 .infobox-content h4 + .fa-ul {
  margin-top: 6px !important;
}

/* 5) Kill justification inside infobox2 to avoid rivers; keep clean wrapping */
.infobox.infobox2 .infobox-content p,
.infobox.infobox2 .infobox-content li,
.infobox.infobox2 .infobox-content .icon-list,
.infobox.infobox2 .infobox-content .icon-list li,
.infobox.infobox2 .infobox-content .icon-list .item-text,
.infobox.infobox2 .infobox-content .icon-list .item-text *{
  text-align: left !important;
  text-align-last: auto !important;
  text-justify: auto !important;
  hyphens: auto;
  overflow-wrap: anywhere;
  word-spacing: normal;
  letter-spacing: normal;
  line-height: var(--copy-line-height);
}

/* 6) List layout and spacing within infobox2 */
.infobox.infobox2 .infobox-content ul,
.infobox.infobox2 .infobox-content ol{
  margin: 0.4rem 0 0 0;
  padding-left: 1.1rem;
}

/* Font Awesome list variant */
.infobox.infobox2 .fa-ul{ margin: 0; }
.infobox.infobox2 .fa-ul > li{ margin: 4px 0 10px 0; }
.infobox.infobox2 .fa-ul > li:last-child{ margin-bottom: 0; }

/* Icon-list variant (icon + text) */
.infobox.infobox2 .icon-list{ margin: 0; padding: 0; list-style: none; }
.infobox.infobox2 .icon-list li{
  display: grid;
  grid-template-columns: 1.25em auto;
  column-gap: 10px;
  align-items: start;
  margin: 4px 0 10px 0;
}
.infobox.infobox2 .icon-list li:last-child{ margin-bottom: 0; }

/* Make item-text behave inline so it never block-justifies */
.infobox.infobox2 .icon-list .item-text{
  display: inline !important;
  white-space: normal;
}

/* ---- Infobox2: fine-tune icon vertical alignment in .icon-list ---- */
.infobox.infobox2 .icon-list li i {
  position: relative;
  top: 3px;          /* try 3px if you want a touch lower */
  line-height: 1;    /* avoids baseline drift */
  margin-right: 8px; /* keeps a clean gap before text */
}

/* keep the grid spacing consistent */
.infobox.infobox2 .icon-list li {
  column-gap: 10px;  /* already present, restated for clarity */
}




/* --- SOLAR block: hard 2-column grid --- */
.df-grid-2{
  /* aside width that always fits */
  --aside: min(34vw, 360px);
  display: grid !important;
  grid-template-columns: 1fr var(--aside);
  grid-template-areas: "main aside";
  column-gap: 32px;
  align-items: start;
}

/* place children explicitly in the grid areas */
.df-grid-main  { grid-area: main;  }
.df-grid-aside { grid-area: aside; align-self: start; }

/* neutralize any float/shape rules that might leak in */
.df-grid-2 figure{ float:none !important; shape-outside:none !important; margin:0 !important; }
.df-grid-2 img{ display:block; width:100%; height:auto; }

/* collapse to single column only on narrow screens */
@media (max-width: 860px){
  .df-grid-2{
    grid-template-columns: 1fr;
    grid-template-areas:
      "aside"
      "main";
    row-gap: 16px;
  }
}


/* --- df-has-pad: grid-compatible shim ------------------------------- */
/* 1) Provide the pad variables the framed image reads */
.df-has-pad{
  --frame-pad: var(--frame-pad, 12px);
  --pad-border: var(--pad-border, 1.5px);
}

/* 2) Make sure the framed image picks them up and scales cleanly */
.df-has-pad .df-framed{
  display: block;
  width: 100%;
  height: auto;
  /* if your df-framed already draws the ring with box-shadow,
     you don't need anything else here. If not, you can re-assert it: */
  /* box-shadow:
      0 0 0 var(--frame-pad) #fff,
      0 0 0 calc(var(--frame-pad) + var(--pad-border)) #111,
      3px 5px 12px rgba(0,0,0,.4),
      0 0 28px rgba(0,204,255,.38); */
}

/* 3) Keep a nice gutter between the text column and the image */
.df-grid-2{ --gutter: 45px; column-gap: var(--gutter); }