@import url("../../../style.css");

/* ── LOAN PAGE ── */
body.loan-page {
   background: var(--light-grey);
   color: #101010;
}

body.loan-page section {
   min-height: auto;
}

.loan-main {
   position: relative;
   z-index: 40;
   padding-top: 0;
   padding-bottom: 28px;
}

.loan-hero {
   position: relative;
   width: 100vw;
   margin-left: calc(50% - 50vw);
   min-height: 74svh;
   background-image: url('https://assets-news.housing.com/news/wp-content/uploads/2021/09/20200330/Top-5-banks-to-take-loan-against-property-LAP-FB-1200x700-compressed.jpg');
   background-size: cover;
   background-position: center;
   overflow: hidden;
}

.loan-hero__overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(5, 6, 12, 0.82) 0%, rgba(9, 11, 20, 0.58) 50%, rgba(6, 7, 12, 0.76) 100%);
}

.loan-hero__content {
   position: relative;
   z-index: 2;
   width: min(1260px, 92vw);
   margin: 0 auto;
   max-width: 860px;
   padding: clamp(26px, 5vw, 58px) 0;
   min-height: 74svh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: var(--white);
}

.loan-kicker {
   font-size: 0.66rem;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: rgba(212, 212, 212, 0.82);
}

.loan-hero h1 {
   margin-top: 12px;
   font-size: clamp(2rem, 4.8vw, 4.1rem);
   line-height: 0.95;
   letter-spacing: -0.02em;
}

.loan-hero p {
   margin-top: 16px;
   line-height: 1.7;
   color: rgba(244, 244, 244, 0.88);
}

.loan-hero__cta {
   margin-top: 20px;
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
}

.loan-affiliation,
.loan-steps,
.loan-cta-final {
   width: min(1260px, 92vw);
   margin: 16px auto 0;
}

.loan-affiliation {
   padding: 0;
}

.loan-affiliation__card {
   background: #f1f1f1;
   border: 1px solid rgba(0, 0, 0, 0.12);
   display: grid;
   grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
   gap: 20px;
   align-items: center;
   padding: 24px;
}

.loan-affiliation__text h2 {
   margin-top: 10px;
   font-size: clamp(1.35rem, 2.8vw, 2.05rem);
   line-height: 1.15;
   color: #121212;
}

.loan-affiliation__text p:last-child {
   margin-top: 12px;
   color: #2c2c2c;
   line-height: 1.7;
}

.loan-affiliation__logo-wrap {
   background: transparent;
   border: 0;
   min-height: 0;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   padding: 0;
}

.loan-affiliation__logo {
   width: min(320px, 100%);
   height: auto;
   object-fit: contain;
}

.loan-steps {
   padding: 0;
}

.loan-steps__grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 14px;
}

.loan-step-card {
   background: #f4f4f4;
   border: 1px solid rgba(0, 0, 0, 0.12);
   padding: 22px;
}

.loan-step-card h3 {
   font-size: 1.2rem;
   color: #101010;
   margin-bottom: 12px;
}

.loan-step-card ul,
.loan-step-card ol {
   display: grid;
   gap: 10px;
   color: #2a2a2a;
   line-height: 1.6;
   padding-left: 18px;
}

.loan-cta-final {
   margin-top: 16px;
   background: #0f1119;
   color: var(--white);
   border: 1px solid rgba(212, 212, 212, 0.2);
   padding: clamp(24px, 4vw, 38px);
}

.loan-cta-final .loan-kicker,
.loan-cta-final h2,
.loan-cta-final .loan-hero__cta {
   width: 100%;
}

.loan-cta-final h2 {
   margin-top: 10px;
   font-size: clamp(1.4rem, 3vw, 2.4rem);
   line-height: 1.2;
   max-width: 760px;
}

@media (max-width: 920px) {
   .loan-affiliation__card,
   .loan-steps__grid {
      grid-template-columns: 1fr;
   }

   .loan-affiliation__logo-wrap {
      justify-content: flex-start;
   }
}

@media (max-width: 780px) {
   .loan-main {
      padding-top: 0;
      padding-bottom: 0;
   }

   .loan-hero {
      min-height: 62svh;
   }

   .loan-hero__content {
      min-height: 62svh;
   }
}