/* Styles the Technical Articles hub, shared article presentation, and approved technical hero. */
:root{
  --technical-hero-image:url("../images/technical/technical-articles-hero.png");
}

/* EA4FSI Technical Articles hub — v70 */
*{box-sizing:border-box}
html,body{margin:0}
body{background:#06111a;color:#dce5ea;font-family:"Source Sans 3",Arial,sans-serif}
.technical-hero{position:relative;overflow:hidden;background:#081923;border-top:1px solid rgba(255,255,255,.035);border-bottom:1px solid rgba(255,255,255,.08)}
.technical-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(120,162,180,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(120,162,180,.055) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(90deg,#000,transparent 92%)}
.technical-hero__inner{position:relative;max-width:1600px;margin:auto;min-height:310px;padding:58px 72px;display:flex;align-items:center;justify-content:space-between;gap:70px}
.technical-hero__copy{max-width:850px}
.technical-kicker{margin-bottom:15px;color:#ffc531;font-family:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em}
.technical-hero h1{margin:0;color:#f5f8fa;font-family:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;font-size:clamp(42px,5vw,72px);font-weight:600;line-height:.96;letter-spacing:.015em}
.technical-hero p{max-width:760px;margin:23px 0 0;color:#aab8c1;font-size:17px;line-height:1.55}
.technical-mark{position:relative;flex:0 0 210px;width:210px;height:210px;opacity:.72}
.technical-mark__ring,.technical-mark__ring:before,.technical-mark__ring:after{position:absolute;border:1px solid rgba(168,199,211,.38);border-radius:50%;content:""}
.technical-mark__ring{inset:8px}.technical-mark__ring:before{inset:32px}.technical-mark__ring:after{inset:67px}
.technical-mark__cross:before,.technical-mark__cross:after{content:"";position:absolute;background:rgba(168,199,211,.25)}
.technical-mark__cross:before{left:50%;top:0;width:1px;height:100%}.technical-mark__cross:after{top:50%;left:0;width:100%;height:1px}
.technical-mark__dot{position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;background:#ffc531;transform:translate(-50%,-50%);box-shadow:0 0 0 7px rgba(255,197,49,.09)}
.technical-library{background:#f5f7f8;color:#16242d;padding:48px max(4vw,72px) 70px}
.technical-library__head{max-width:1600px;margin:0 auto 35px;padding-bottom:18px;border-bottom:1px solid #cfd8dd;font-family:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif}
.technical-library__head div{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.technical-library__head span{font-size:13px;font-weight:600;letter-spacing:.14em;color:#263b47}
.technical-library__head strong{font-size:11px;letter-spacing:.1em;color:#788891}
.technical-category{max-width:1600px;margin:0 auto 42px}
.technical-category h2{margin:0;padding:0 0 10px;border-bottom:3px solid #0b2838;color:#0b2838;font-family:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;font-size:18px;letter-spacing:.08em}
.technical-list{border-bottom:1px solid #d5dde1}
.technical-item{display:grid;grid-template-columns:300px minmax(0,1fr) 110px;gap:28px;align-items:center;min-height:185px;padding:22px 0;border-top:1px solid #d5dde1;color:inherit;text-decoration:none}
.technical-item:first-child{border-top:0}
.technical-item__image{display:block;width:300px;height:160px;object-fit:cover;background:#dfe5e8}
.technical-item__tags{margin-bottom:7px;color:#8b6a08;font-family:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;font-size:10px;font-weight:600;letter-spacing:.11em}
.technical-item h3{margin:0 0 8px;color:#102a39;font-family:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;font-size:24px;font-weight:600;line-height:1.1}
.technical-item p{max-width:900px;margin:0;color:#53636c;font-size:14px;line-height:1.52}
.technical-item__notice{display:inline-block;margin-top:10px;color:#8a6500;font-family:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;font-size:10px;font-weight:600;letter-spacing:.08em}
.technical-item__side{align-self:stretch;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:10px;border-left:1px solid #d8e0e4;padding-left:18px;font-family:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif}
.technical-item__langs,.technical-item__date{color:#72818a;font-size:10px;font-weight:600;letter-spacing:.1em}
.technical-item__arrow{margin-top:7px;color:#b98500;font-size:25px;line-height:1}
.technical-item:hover h3,.technical-item:focus-visible h3{color:#a56f00}
.technical-item:hover .technical-item__arrow,.technical-item:focus-visible .technical-item__arrow{transform:translateX(4px)}
.technical-item__arrow{transition:transform .16s ease}
.technical-end{background:linear-gradient(90deg,#fff 0%,#f7fafb 58%,#e8f1f5 100%);color:#53636c}
.technical-end>div{max-width:1600px;margin:auto;padding:18px 72px;text-align:right;border-right:18px solid #061722;font-family:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif}
.technical-end span{display:block;font-size:9px;letter-spacing:.13em}.technical-end strong{display:block;margin-top:2px;color:#193746;font-size:13px;letter-spacing:.06em}
@media(max-width:900px){
 .technical-hero__inner{min-height:auto;padding:45px 28px}.technical-mark{flex-basis:150px;width:150px;height:150px}
 .technical-library{padding:38px 28px 55px}.technical-item{grid-template-columns:210px minmax(0,1fr);gap:22px}.technical-item__image{width:210px;height:126px}.technical-item__side{grid-column:2;border-left:0;padding:0;align-self:auto;flex-direction:row;justify-content:flex-start;align-items:center}
 .technical-end>div{padding:16px 28px}
}
@media(max-width:650px){
 .technical-hero{
   background-size:auto 100%;
   background-position:68% center;
 }
 .technical-hero__inner{padding:38px 20px}.technical-mark{display:none}.technical-hero h1{font-size:39px}.technical-hero p{font-size:15px}
 .technical-library{padding:32px 20px 46px}.technical-library__head div{align-items:flex-start;flex-direction:column;gap:6px}
 .technical-category{margin-bottom:34px}.technical-item{display:block;padding:20px 0}.technical-item__image{width:100%;height:auto;max-height:none;object-fit:contain;margin-bottom:17px}
 .technical-item h3{
   font-family:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;
   font-size:22px;
   font-weight:600;
   line-height:1.15;
  }
  .technical-item p{
   font-family:"Source Sans 3",Arial,sans-serif;
   font-size:16px;
   line-height:1.62;
  }.technical-item__side{display:flex;margin-top:14px;padding-top:12px;border-top:1px solid #d8e0e4}.technical-item__arrow{margin:0 0 0 auto}
 .technical-end>div{padding:15px 20px;border-right:0}
 .technical-category h2{
   font-family:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;
   font-size:18px;
   line-height:1.15;
 }
 .technical-item__tags,
 .technical-item__langs,
 .technical-item__date{
   font-family:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;
   font-size:11px;
   line-height:1.25;
 }
}

/* v87 — consolidated approved Technical Articles hub layer */

/* Shared header wordmark */
.site-header .site-brand,
.site-header .site-brand b{
  font-family:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif!important;
  font-weight:600!important;
  letter-spacing:.01em;
}

/* Approved hero geometry and treatment */
.technical-hero{
  min-height:360px;
  border-bottom:0;
  background-color:#081923;
  background-image:
    linear-gradient(90deg,rgba(3,13,21,.72) 0%,rgba(4,17,27,.38) 42%,rgba(5,22,34,.08) 100%),
    var(--technical-hero-image, none);
  background-size:contain;
  background-position:center center;
  background-repeat:no-repeat;
}
.technical-hero:before{
  content:none;
}
.technical-hero__inner{
  width:100%;
  max-width:1744px;
  min-height:360px;
  margin:0 auto;
  padding:58px 72px;
  justify-content:flex-start;
}
.technical-hero__copy{
  max-width:760px;
  margin:0;
  padding:0;
}
.technical-mark{margin-left:auto}

/* Approved hero → library transition */
.technical-hero:after{
  content:"";
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:0;
  height:72px;
  background:linear-gradient(
    to bottom,
    rgba(8,25,35,0) 0%,
    rgba(44,69,82,.30) 38%,
    rgba(151,169,178,.48) 70%,
    #f5f7f8 100%
  );
  pointer-events:none;
}

/* Approved complete thumbnail treatment */
.technical-item__image{
  height:auto;
  max-height:190px;
  object-fit:contain;
  object-position:center;
}

/* Approved category treatment */
.technical-category h2{
  padding:11px 14px 10px;
  border:0;
  border-left:4px solid #d49a00;
  background:#e8edf0;
  color:#16313f;
  font-family:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;
  font-size:15px;
  font-weight:600;
  line-height:1.1;
  letter-spacing:.08em;
}

/* Approved restrained library → footer transition */
.technical-end{
  position:relative;
  min-height:92px;
  padding-top:24px;
  background:linear-gradient(
    to bottom,
    #f5f7f8 0%,
    #f1f5f7 38%,
    #e7eef2 72%,
    #d8e4e9 100%
  );
  color:#53636c;
}
.technical-end:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:#d5dfe4;
}
.technical-end>div{
  max-width:1600px;
  margin:auto;
  padding:10px 72px 24px;
  border-right:18px solid #061722;
  background:transparent;
  text-align:right;
  font-family:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;
}
.technical-end span{
  display:block;
  color:#71828b;
  font-size:9px;
  font-weight:600;
  letter-spacing:.13em;
}
.technical-end strong{
  display:block;
  margin-top:2px;
  color:#193746;
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
}

@media(max-width:900px){
  .technical-hero__inner{
    min-height:310px;
    padding-left:28px;
    padding-right:28px;
  }
  .technical-end>div{
    padding-left:28px;
    padding-right:28px;
  }
}
@media(max-width:650px){
  .technical-hero{min-height:auto}
  .technical-hero__inner{
    min-height:270px;
    padding-left:20px;
    padding-right:20px;
  }
  .technical-hero:after{height:52px}
  .technical-item__image{
    width:100%;
    max-height:none;
  }
  .technical-end{
    min-height:92px;
    padding-top:24px;
  }
  .technical-end>div{
    padding:10px 20px 24px;
    border-right:0;
  }
}

/* v106 — hero artwork now lives entirely in the PNG; suppress legacy radar mark */
.technical-mark{
  display:none!important;
}

/* v107 — Technical Articles library side rails, matching HF Central */
@media(min-width:901px){
  .technical-library{
    border-left:18px solid #061722;
    border-right:18px solid #061722;
  }
}

/* v108 — restore approved transitions and continue rails through page end */
.technical-hero:after{
  content:"";
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:0;
  height:72px;
  background:linear-gradient(
    to bottom,
    rgba(8,25,35,0) 0%,
    rgba(44,69,82,.30) 38%,
    rgba(151,169,178,.48) 70%,
    #f5f7f8 100%
  );
  pointer-events:none;
}

@media(min-width:901px){
  .technical-end{
    border-left:18px solid #061722;
    border-right:18px solid #061722;
  }
  .technical-end>div{
    border-right:0;
  }
}

@media(max-width:650px){
  .technical-hero:after{
    height:52px;
  }
}

/* v109 — exact HF Central transition treatment, mapped to Technical Articles */

/* HF Central main: article field + hero-to-library transition */
.technical-library{
  background:linear-gradient(
    to bottom,
    #aebdc4 0,
    #c3cdd1 22px,
    #d9dedf 44px,
    #ebe9e4 68px,
    #f4f2ed 92px,
    #f4f2ed 100%
  );
}

/* HF Central page-end-transition: editorial update + footer boundary */
.technical-end{
  min-height:0;
  padding-top:0;
  background:linear-gradient(
    to bottom,
    #f4f2ed 0%,
    #eef1f1 24%,
    #dfe7e9 48%,
    #c6d4da 68%,
    #8fa7b2 84%,
    #061722 100%
  );
}
.technical-end:before{
  content:none;
}
.technical-end>div{
  padding:16px 72px 72px;
}

/* HF Central does not use a separate hero pseudo-element fade:
   the transition belongs to the article field itself. */
.technical-hero:after{
  content:none;
}

@media(max-width:900px){
  .technical-end>div{
    padding-left:28px;
    padding-right:28px;
  }
}

@media(max-width:700px){
  .technical-library,
  .technical-end{
    border-left:0;
    border-right:0;
  }
  .technical-end>div{
    padding:14px 20px 54px;
  }
}

/* v110 — HF Central-style “Última actualización” treatment */
.technical-end>div{
  position:relative;
  padding-top:34px;
}
.technical-end>div:before{
  content:"";
  position:absolute;
  top:20px;
  right:72px;
  width:46px;
  height:2px;
  background:#d49a00;
}
.technical-end span{
  color:#71828b;
  font-family:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;
  font-size:9px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.technical-end strong{
  margin-top:3px;
  color:#193746;
  font-family:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.06em;
}

@media(max-width:900px){
  .technical-end>div:before{
    right:28px;
  }
}
@media(max-width:700px){
  .technical-end>div{
    padding-top:30px;
  }
  .technical-end>div:before{
    top:17px;
    right:20px;
  }
}

/* Canonical hub hero geometry: desktop remains approved; mobile mirrors REMER exactly. */
.technical-hero__inner{width:100%;max-width:1744px;min-height:360px;margin:0 auto;padding:58px 72px;display:flex;align-items:center;justify-content:flex-start}
.technical-hero__copy{max-width:760px;margin:0;padding:0;position:relative;z-index:1}
@media(min-width:761px){.technical-hero__inner{align-items:flex-start;padding-top:72px}}
@media(max-width:760px){
  .technical-hero{min-height:auto}
  .technical-hero__inner{box-sizing:border-box;min-height:auto;padding:38px 20px;align-items:center}
  .technical-hero__copy{max-width:760px}
  .technical-kicker{margin:0 0 9px}
  .technical-hero h1{margin:0;font-size:39px;line-height:.96}
  .technical-hero p{margin:23px 0 0;font-size:15px;line-height:1.55}
}

/* v219 — display category names in uppercase */
.technical-category h2{text-transform:uppercase}