/*
 * HVP-R7A-20260901-02C
 * Rental resources design-system reconciliation — production.
 * Scoped to /resources/ route classes only.
 */

.resources-shell,
.resource-detail-shell{
  background:#f4f1ec;
  color:var(--ink);
}

/* ---------- Resources index ---------- */
.resources-hero{
  padding:118px clamp(28px,8vw,130px) 96px;
  background-color:#f4f1ec;
  background-image:var(--linen);
  background-repeat:repeat;
  background-size:288px;
  border-bottom:1px solid var(--line);
}
.resources-hero>p,
.resource-detail-hero>p,
.resource-faq-link>p{
  margin:0;
  font-size:10px;
  font-weight:800;
  letter-spacing:.24em;
  line-height:1.4;
  text-transform:uppercase;
}
.resources-hero>p{
  color:var(--gold);
}
.resources-hero h1{
  max-width:980px;
  margin:26px 0 30px;
  font-size:clamp(60px,8.2vw,124px);
  line-height:.84;
  letter-spacing:-.06em;
}
.resources-hero h1 em{
  display:inline-block;
}
.resources-hero>span{
  display:block;
  max-width:650px;
  color:var(--ink-soft);
  font-size:18px;
  line-height:1.68;
}

.resource-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  padding:1px;
  margin:0;
  background:#d7d0c3;
}
.resource-grid>a{
  min-height:365px;
  padding:46px clamp(30px,4vw,56px);
  display:flex;
  flex-direction:column;
  background:#fff;
  transition:background .25s ease,transform .25s ease;
}
.resource-grid>a:hover{
  background:#eef0eb;
}
.resource-grid>a:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:-3px;
}
.resource-grid small{
  color:var(--gold);
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  line-height:1.4;
  text-transform:uppercase;
}
.resource-grid h2{
  max-width:640px;
  margin:36px 0 18px;
  font-size:clamp(38px,4vw,58px);
  line-height:.98;
  letter-spacing:-.045em;
}
.resource-grid p{
  max-width:620px;
  margin:0 0 34px;
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.72;
}
.resource-grid>a>span{
  margin-top:auto;
  padding-top:22px;
  border-top:1px solid var(--line);
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.resource-faq-link{
  position:relative;
  overflow:hidden;
  padding:92px clamp(28px,8vw,130px);
  background:#738078;
  color:#fff;
}
.resource-faq-link::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 84% 28%,rgba(255,255,255,.08),transparent 34%),
    linear-gradient(135deg,rgba(255,255,255,.035),transparent 48%);
}
.resource-faq-link>*{
  position:relative;
  z-index:1;
}
.resource-faq-link>p{
  color:#ead3b2;
}
.resource-faq-link h2{
  max-width:820px;
  margin:20px 0 30px;
  font-size:clamp(46px,6vw,80px);
  line-height:.96;
}
.resource-faq-link a{
  display:inline-flex;
  padding-bottom:7px;
  border-bottom:1px solid #ead3b2;
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.resource-faq-link a:hover{
  color:#f2dfc2;
}

/* ---------- Resource article ---------- */
.resource-detail-hero{
  padding:112px clamp(28px,8vw,130px) 96px;
  background:#738078;
  color:#fff;
}
.resource-detail-hero>p{
  color:#ead3b2;
}
.resource-detail-hero h1{
  max-width:1050px;
  margin:25px 0 28px;
  font-size:clamp(58px,7vw,108px);
  line-height:.88;
  letter-spacing:-.055em;
}
.resource-detail-hero>span{
  display:block;
  max-width:730px;
  color:#eef1ee;
  font-size:18px;
  line-height:1.7;
}

.resource-article{
  width:min(1180px,calc(100% - 56px));
  margin:0 auto;
  padding:72px 0 110px;
}
.resource-article>section{
  display:grid;
  grid-template-columns:74px minmax(0,1fr);
  gap:28px;
  padding:44px 0 48px;
  border-top:1px solid #c9c2b6;
}
.resource-article>section:last-of-type{
  border-bottom:1px solid #c9c2b6;
}
.resource-article>section>small{
  color:var(--gold);
  font-family:var(--display);
  font-size:23px;
  line-height:1.2;
}
.resource-article>section>div{
  max-width:850px;
}
.resource-article h2{
  margin:0 0 17px;
  font-size:clamp(35px,4vw,52px);
  line-height:1.02;
}
.resource-article>section p{
  margin:0;
  color:var(--ink-soft);
  font-size:17px;
  line-height:1.78;
}

.resource-article aside{
  margin:74px 0 38px;
  padding:48px clamp(30px,5vw,66px);
  display:grid;
  grid-template-columns:minmax(250px,.8fr) minmax(300px,1.2fr);
  gap:28px 8vw;
  align-items:start;
  background-color:var(--ink);
  background-image:url('/brand/textures/hv-texture-charcoal-slate-512.webp');
  background-repeat:repeat;
  background-size:320px;
  color:#fff;
}
.resource-article aside strong{
  font-family:var(--display);
  font-size:clamp(34px,4vw,54px);
  font-weight:500;
  line-height:1;
  letter-spacing:-.04em;
}
.resource-article aside p{
  margin:0;
  color:#d8dddd;
  font-size:15px;
  line-height:1.75;
}
.resource-article aside a{
  grid-column:2;
  width:max-content;
  padding-bottom:7px;
  border-bottom:1px solid #d1a25f;
  color:#d1a25f;
  font-size:11px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.resource-note{
  max-width:830px;
  margin:30px 0 0 102px;
  color:#74716c;
  font-size:12px;
  line-height:1.7;
}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .resources-hero,
  .resource-detail-hero{
    padding:78px 24px 66px;
  }
  .resources-hero h1{
    margin-top:22px;
    font-size:clamp(54px,16vw,78px);
    line-height:.9;
  }
  .resources-hero>span,
  .resource-detail-hero>span{
    font-size:16px;
  }
  .resource-grid{
    grid-template-columns:1fr;
  }
  .resource-grid>a{
    min-height:0;
    padding:34px 24px;
  }
  .resource-grid h2{
    margin-top:28px;
    font-size:clamp(37px,11vw,49px);
  }
  .resource-faq-link{
    padding:72px 24px;
  }
  .resource-detail-hero h1{
    font-size:clamp(50px,14vw,72px);
    line-height:.92;
  }
  .resource-article{
    width:auto;
    margin:0 24px;
    padding:42px 0 88px;
  }
  .resource-article>section{
    grid-template-columns:1fr;
    gap:13px;
    padding:32px 0 36px;
  }
  .resource-article>section>small{
    font-size:18px;
  }
  .resource-article>section p{
    font-size:16px;
  }
  .resource-article aside{
    margin-top:52px;
    padding:34px 26px;
    grid-template-columns:1fr;
    gap:20px;
  }
  .resource-article aside a{
    grid-column:auto;
  }
  .resource-note{
    margin-left:0;
  }
}