/*
  MODTAC v45 Guide Center redesign
  Scope: guide/info pages only. Does not modify i18n tools, DeepL config or source data files.
*/

main.mtx-guide-center-main{
  min-height:100vh!important;
  padding-top:126px!important;
  color:#f5efe3!important;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(180,121,52,.18) 0%, rgba(27,20,12,.08) 34%, rgba(0,0,0,0) 68%),
    radial-gradient(ellipse at 88% 16%, rgba(81,102,58,.16) 0%, rgba(0,0,0,0) 54%),
    linear-gradient(180deg,#080a07 0%,#11170f 34%,#090b08 100%)!important;
  position:relative!important;
  overflow:hidden!important;
}

main.mtx-guide-center-main::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.22) 48%, rgba(0,0,0,.80) 100%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.026) 0 1px,rgba(255,255,255,0) 1px 9px);
  opacity:.72;
}

.mtx-guide-center-hero,
.mtx-guide-center-shell{position:relative;z-index:1;}

.mtx-guide-center-hero{
  border-top:1px solid rgba(205,149,75,.20);
  border-bottom:1px solid rgba(205,149,75,.26);
  background:
    linear-gradient(180deg,rgba(0,0,0,.64),rgba(6,9,6,.40)),
    radial-gradient(ellipse at 50% 100%, rgba(174,107,43,.18), rgba(0,0,0,0) 62%);
}

.mtx-guide-center-hero-inner{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
  padding:42px 0 34px;
}

.mtx-guide-kicker{
  margin:0 0 10px!important;
  font-family:var(--modtac-font-sub-title, Rajdhani, Arial, sans-serif)!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:.22em!important;
  text-transform:uppercase!important;
  color:#d6a55b!important;
}

.mtx-guide-center-hero h1{
  margin:0 0 12px!important;
  font-family:var(--modtac-font-display, 'Saira Stencil One', Impact, sans-serif)!important;
  font-size:clamp(36px,4.4vw,66px)!important;
  line-height:.98!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
  color:#f7f0e2!important;
  text-shadow:0 3px 0 rgba(0,0,0,.26),0 0 30px rgba(205,149,75,.10)!important;
}

.mtx-guide-subtitle{
  max-width:820px;
  margin:0!important;
  font-family:var(--modtac-font-body, Inter, system-ui, sans-serif)!important;
  font-size:15.5px!important;
  line-height:1.72!important;
  color:rgba(245,239,227,.72)!important;
}

.mtx-guide-center-shell{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
  padding:32px 0 52px;
  display:grid;
  grid-template-columns:310px minmax(0,1fr);
  gap:26px;
  align-items:start;
}

.mtx-guide-sidebar{
  position:sticky;
  top:132px;
  display:block;
  max-height:calc(100vh - 158px);
  overflow:auto;
  padding:16px;
  border:1px solid rgba(205,149,75,.26);
  background:
    linear-gradient(180deg,rgba(14,18,12,.92),rgba(7,9,6,.74)),
    radial-gradient(ellipse at 10% 0%,rgba(205,149,75,.14),rgba(0,0,0,0) 58%);
  box-shadow:0 20px 55px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035);
}

.mtx-guide-sidebar::-webkit-scrollbar{width:6px;}
.mtx-guide-sidebar::-webkit-scrollbar-thumb{background:rgba(205,149,75,.42);border-radius:999px;}

.mtx-guide-sidebar-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
  padding:0 0 13px;
  border-bottom:1px solid rgba(205,149,75,.18);
}
.mtx-guide-sidebar-title span{
  width:11px;height:11px;border-radius:999px;
  border:1px solid rgba(213,161,90,.82);
  box-shadow:0 0 18px rgba(213,161,90,.42);
}
.mtx-guide-sidebar-title strong{
  font-family:var(--modtac-font-sub-title, Rajdhani, Arial, sans-serif)!important;
  font-size:15px!important;
  font-weight:700!important;
  letter-spacing:.12em!important;
  color:#f6ead4!important;
}

.mtx-guide-nav-list{display:grid;gap:8px;}
.mtx-guide-nav-button{
  width:100%;
  appearance:none;
  border:1px solid rgba(205,149,75,.15);
  background:rgba(0,0,0,.18);
  padding:12px 13px;
  text-align:left;
  color:#f5efe3;
  cursor:pointer;
  position:relative;
  display:block;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.mtx-guide-nav-button::before{
  content:"";
  position:absolute;left:0;top:10px;bottom:10px;width:2px;
  background:rgba(205,149,75,0);
  transition:background .18s ease;
}
.mtx-guide-nav-button b{
  display:block;
  font-family:var(--modtac-font-sub-title, Rajdhani, Arial, sans-serif)!important;
  font-size:15px!important;
  font-weight:700!important;
  line-height:1.05!important;
  letter-spacing:.035em!important;
  color:rgba(245,239,227,.88)!important;
}
.mtx-guide-nav-button small{
  display:block;
  margin-top:5px;
  font-family:var(--modtac-font-body, Inter, system-ui, sans-serif)!important;
  font-size:11px!important;
  line-height:1.25!important;
  color:rgba(245,239,227,.46)!important;
}
.mtx-guide-nav-button:hover,
.mtx-guide-nav-button.is-active{
  border-color:rgba(205,149,75,.54);
  background:linear-gradient(90deg,rgba(205,149,75,.16),rgba(0,0,0,.20));
  transform:translateX(2px);
  box-shadow:0 10px 28px rgba(0,0,0,.15);
}
.mtx-guide-nav-button:hover::before,
.mtx-guide-nav-button.is-active::before{background:#d6a55b;}
.mtx-guide-nav-button.is-overview{margin-bottom:10px;border-color:rgba(205,149,75,.30);}

.mtx-guide-detail{
  min-width:0;
  min-height:520px;
}

.mtx-guide-detail-card{
  border:1px solid rgba(205,149,75,.27);
  background:
    linear-gradient(180deg,rgba(18,24,16,.90),rgba(8,10,7,.84)),
    radial-gradient(ellipse at 76% 0%,rgba(205,149,75,.12),rgba(0,0,0,0) 56%);
  box-shadow:0 26px 70px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.038);
  padding:30px;
  position:relative;
  overflow:hidden;
}
.mtx-guide-detail-card::after{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.018) 0 25%,rgba(255,255,255,0) 25% 100%);
  opacity:.55;
}
.mtx-guide-detail-card>*{position:relative;z-index:1;}

.mtx-guide-detail-badge,
.mtx-guide-detail-head span{
  display:inline-flex;
  align-items:center;
  margin-bottom:12px;
  padding:6px 10px;
  border:1px solid rgba(205,149,75,.35);
  background:rgba(205,149,75,.09);
  color:#d6a55b;
  font-family:var(--modtac-font-sub-title, Rajdhani, Arial, sans-serif)!important;
  font-size:12px!important;
  font-weight:700!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}

.mtx-guide-detail-card h2{
  margin:0 0 13px!important;
  font-family:var(--modtac-font-sub-title, Rajdhani, Arial, sans-serif)!important;
  font-size:clamp(30px,3vw,43px)!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:.035em!important;
  text-transform:uppercase!important;
  color:#f7f0e2!important;
}

.mtx-guide-detail-card p{
  margin:0!important;
  font-family:var(--modtac-font-body, Inter, system-ui, sans-serif)!important;
  font-size:15px!important;
  line-height:1.78!important;
  color:rgba(245,239,227,.73)!important;
}

.mtx-guide-highlight-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
  margin:24px 0 18px;
}
.mtx-guide-highlight-grid span{
  display:flex;
  align-items:flex-start;
  gap:11px;
  min-width:0;
  padding:15px;
  border:1px solid rgba(205,149,75,.18);
  background:rgba(0,0,0,.18);
}
.mtx-guide-highlight-grid svg,
.mtx-guide-point-list svg{
  width:21px;height:21px;flex:0 0 21px;
  stroke:#d6a55b;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;
}
.mtx-guide-highlight-grid b{
  font-family:var(--modtac-font-body, Inter, system-ui, sans-serif)!important;
  font-size:13.5px!important;
  line-height:1.55!important;
  font-weight:500!important;
  color:rgba(245,239,227,.78)!important;
}

.mtx-guide-empty-note{
  margin-top:16px;
  padding:15px 17px;
  border-left:2px solid rgba(214,165,91,.9);
  background:rgba(205,149,75,.08);
  font-family:var(--modtac-font-body, Inter, system-ui, sans-serif)!important;
  font-size:13px!important;
  line-height:1.65!important;
  color:rgba(245,239,227,.64)!important;
}

.mtx-guide-detail-head{margin-bottom:24px;}
.mtx-guide-detail-head p{max-width:760px;}

.mtx-guide-point-list{display:grid;gap:12px;}
.mtx-guide-point-list article{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:13px;
  align-items:start;
  padding:16px 18px;
  border:1px solid rgba(205,149,75,.16);
  background:linear-gradient(90deg,rgba(205,149,75,.07),rgba(0,0,0,.15));
}
.mtx-guide-point-list i{
  width:34px;height:34px;display:grid;place-items:center;
  border-radius:999px;
  border:1px solid rgba(205,149,75,.28);
  background:rgba(205,149,75,.07);
  font-style:normal;
}
.mtx-guide-point-list p{font-size:14.5px!important;line-height:1.75!important;}

@media (max-width: 1024px){
  main.mtx-guide-center-main{padding-top:110px!important;}
  .mtx-guide-center-shell{grid-template-columns:280px minmax(0,1fr);gap:18px;width:min(100% - 32px,1180px);}
  .mtx-guide-center-hero-inner{width:min(100% - 32px,1180px);}
  .mtx-guide-highlight-grid{grid-template-columns:1fr;}
}

@media (max-width: 820px){
  main.mtx-guide-center-main{padding-top:96px!important;}
  .mtx-guide-center-hero-inner{padding:30px 0 26px;}
  .mtx-guide-center-shell{display:block;padding:22px 0 40px;}
  .mtx-guide-sidebar{position:relative;top:auto;max-height:none;margin-bottom:16px;padding:13px;}
  .mtx-guide-nav-list{display:grid;grid-template-columns:1fr;gap:7px;max-height:360px;overflow:auto;padding-right:3px;}
  .mtx-guide-detail-card{padding:22px 17px;}
  .mtx-guide-center-hero h1{font-size:34px!important;}
  .mtx-guide-detail-card h2{font-size:29px!important;}
  .mtx-guide-point-list article{grid-template-columns:30px minmax(0,1fr);padding:14px;}
  .mtx-guide-point-list i{width:30px;height:30px;}
}