
/* =========================================================
   R2R Common Housing Issues V1
   Shared card system for Social Housing / Private Renting /
   Private Landlord.
   ========================================================= */

.r2r-issues-section{
  padding:58px 0 62px !important;
  position:relative;
  overflow:hidden;
}
.r2r-issues-section.r2r-social{background:linear-gradient(180deg,#fbfeff 0%,#f3fbfc 100%)}
.r2r-issues-section.r2r-private{background:linear-gradient(180deg,#fff 0%,#fbf8ff 100%)}
.r2r-issues-section.r2r-landlord{background:linear-gradient(180deg,#fff 0%,#f8fbf3 100%)}

.r2r-issues-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:28px;
  margin-bottom:26px;
}
.r2r-issues-title{
  max-width:760px;
}
.r2r-issues-kicker{
  display:block;
  margin-bottom:7px;
  font-size:12px;
  line-height:1;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.r2r-social .r2r-issues-kicker{color:#0a879f}
.r2r-private .r2r-issues-kicker{color:#7747c5}
.r2r-landlord .r2r-issues-kicker{color:#607d38}

.r2r-issues-title h2{
  margin:0 0 8px !important;
  font-size:clamp(34px,4vw,50px) !important;
  line-height:1.06 !important;
  font-weight:560 !important;
  letter-spacing:-.025em !important;
  color:#153d68 !important;
}
.r2r-issues-title p{
  margin:0 !important;
  max-width:700px;
  color:#61758a;
  font-size:15.5px;
  line-height:1.5;
}

/* Optional returning-user callout */
.r2r-issues-user{
  min-width:340px;
  max-width:470px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(28,57,85,.10);
  box-shadow:0 8px 22px rgba(24,50,78,.04);
}
.r2r-issues-user-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:50%;
}
.r2r-social .r2r-issues-user-icon{background:#e2f5f8;color:#0b8097}
.r2r-private .r2r-issues-user-icon{background:#f0e8fc;color:#7146bd}
.r2r-landlord .r2r-issues-user-icon{background:#e9f1df;color:#597535}
.r2r-issues-user-icon svg{
  width:22px;height:22px;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.r2r-issues-user strong{
  display:block;
  font-size:13.5px;
  color:#173d64;
}
.r2r-issues-user span{
  display:block;
  margin-top:2px;
  font-size:11.9px;
  line-height:1.35;
  color:#697d91;
}
.r2r-issues-user a{
  white-space:nowrap;
  text-decoration:none;
  border-radius:999px;
  padding:9px 13px;
  font-size:12px;
  font-weight:700;
  color:#fff;
}
.r2r-social .r2r-issues-user a{background:#0d879f}
.r2r-private .r2r-issues-user a{background:#7044b8}
.r2r-landlord .r2r-issues-user a{background:#5e7938}

.r2r-issue-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.r2r-issue-card{
  position:relative;
  overflow:hidden;
  min-width:0;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(29,57,84,.11);
  box-shadow:0 8px 24px rgba(22,49,77,.055);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.r2r-issue-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(22,49,77,.08);
}
.r2r-social .r2r-issue-card:hover{border-color:#61b8c7}
.r2r-private .r2r-issue-card:hover{border-color:#a486df}
.r2r-landlord .r2r-issue-card:hover{border-color:#91ab6b}

.r2r-issue-image{
  height:158px;
  width:100%;
  object-fit:cover;
  display:block;
}
.r2r-issue-body{
  position:relative;
  display:grid;
  grid-template-columns:58px minmax(0,1fr) 34px;
  align-items:center;
  gap:12px;
  min-height:128px;
  padding:16px 15px;
}
.r2r-issue-icon{
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
}
.r2r-social .r2r-issue-icon{background:#e2f7fa;color:#0c8198}
.r2r-private .r2r-issue-icon{background:#f0e8fd;color:#7147bd}
.r2r-landlord .r2r-issue-icon{background:#e9f1df;color:#587535}
.r2r-issue-icon svg{
  width:28px;height:28px;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.r2r-issue-copy strong{
  display:block;
  margin:0 0 5px;
  color:#153d68;
  font-size:16.5px;
  line-height:1.25;
  font-weight:680;
}
.r2r-landlord .r2r-issue-copy strong{color:#315337}
.r2r-issue-copy span{
  display:block;
  color:#667a8e;
  font-size:12.8px;
  line-height:1.42;
}
.r2r-issue-arrow{
  width:32px;
  height:32px;
  border-radius:50%;
  display:grid;
  place-items:center;
  justify-self:end;
  font-size:21px;
  font-weight:700;
  border:1px solid currentColor;
  background:#fff;
}
.r2r-social .r2r-issue-arrow{color:#0c879f;background:#effbfc}
.r2r-private .r2r-issue-arrow{color:#7448c1;background:#f8f3ff}
.r2r-landlord .r2r-issue-arrow{color:#5f7b38;background:#f5f9ef}

/* whole-card link */
.r2r-issue-card a.r2r-issue-link{
  position:absolute;
  inset:0;
  z-index:3;
  border-radius:inherit;
}
.r2r-issue-card a.r2r-issue-link:focus-visible{
  outline:3px solid currentColor;
  outline-offset:-4px;
}

@media(max-width:1050px){
  .r2r-issues-head{align-items:flex-start;flex-direction:column}
  .r2r-issues-user{min-width:0;width:100%;max-width:none}
  .r2r-issue-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .r2r-issues-section{padding:44px 0 !important}
  .r2r-issue-grid{grid-template-columns:1fr}
  .r2r-issue-image{height:190px}
  .r2r-issues-user{
    grid-template-columns:40px minmax(0,1fr);
  }
  .r2r-issues-user a{
    grid-column:1 / -1;
    text-align:center;
  }
}

.r2r-issues-section.r2r-social,.r2r-issues-section.r2r-private{padding:64px 0 68px!important;background:#fff!important}
.r2r-issues-section.r2r-social .r2r-issues-head,.r2r-issues-section.r2r-private .r2r-issues-head{display:block!important;margin-bottom:28px!important;text-align:center!important}
.r2r-issues-section.r2r-social .r2r-issues-title,.r2r-issues-section.r2r-private .r2r-issues-title{max-width:920px!important;margin:0 auto!important}
.r2r-issues-section.r2r-social .r2r-issues-kicker,.r2r-issues-section.r2r-private .r2r-issues-kicker{display:inline-flex!important;align-items:center;gap:12px;margin:0 auto 14px!important;font-size:12px!important;letter-spacing:.13em!important}
.r2r-issues-section.r2r-social .r2r-issues-kicker::before,.r2r-issues-section.r2r-private .r2r-issues-kicker::before{content:"";width:50px;height:3px;border-radius:999px;background:currentColor}
.r2r-issues-section.r2r-social .r2r-issues-title h2,.r2r-issues-section.r2r-private .r2r-issues-title h2{margin:0 0 10px!important;font-size:clamp(38px,4.2vw,58px)!important;line-height:1.03!important;font-weight:560!important;letter-spacing:-.03em!important;color:#153d68!important}
.r2r-issues-section.r2r-social .r2r-issues-title p,.r2r-issues-section.r2r-private .r2r-issues-title p{max-width:760px!important;margin:0 auto!important;font-size:16px!important;line-height:1.5!important;color:#667a90!important}
.r2r-issues-section.r2r-social .r2r-issues-user,.r2r-issues-section.r2r-private .r2r-issues-user{display:none!important}
.r2r-issues-section.r2r-social .r2r-issue-grid,.r2r-issues-section.r2r-private .r2r-issue-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}
.r2r-issues-section.r2r-social .r2r-issue-card,.r2r-issues-section.r2r-private .r2r-issue-card{border-radius:18px!important;background:#fff!important;box-shadow:0 7px 22px rgba(23,49,77,.045)!important}
.r2r-issues-section.r2r-private .r2r-issue-card{border-color:#eadff8!important}
.r2r-issues-section.r2r-social .r2r-issue-card{border-color:#d6edf1!important}
.r2r-issues-section.r2r-social .r2r-issue-image,.r2r-issues-section.r2r-private .r2r-issue-image{height:168px!important;object-fit:cover!important;border-radius:15px 15px 0 0!important}
.r2r-issues-section.r2r-social .r2r-issue-body,.r2r-issues-section.r2r-private .r2r-issue-body{grid-template-columns:62px minmax(0,1fr) 36px!important;gap:13px!important;min-height:138px!important;padding:15px 16px 17px!important}
.r2r-issues-section.r2r-social .r2r-issue-icon,.r2r-issues-section.r2r-private .r2r-issue-icon{width:56px!important;height:56px!important}
.r2r-issues-section.r2r-private .r2r-issue-icon{background:#f0e5ff!important;color:#4c24a8!important}
.r2r-issues-section.r2r-social .r2r-issue-icon{background:#dcf6f7!important;color:#0d8c8d!important}
.r2r-issues-section.r2r-social .r2r-issue-card:nth-child(2) .r2r-issue-icon,.r2r-issues-section.r2r-social .r2r-issue-card:nth-child(5) .r2r-issue-icon{background:#def3ff!important;color:#1876aa!important}
.r2r-issues-section.r2r-social .r2r-issue-card:nth-child(3) .r2r-issue-icon,.r2r-issues-section.r2r-social .r2r-issue-card:nth-child(6) .r2r-issue-icon{background:#e8f6de!important;color:#4c8b28!important}
.r2r-issues-section.r2r-social .r2r-issue-copy strong,.r2r-issues-section.r2r-private .r2r-issue-copy strong{font-size:17px!important;line-height:1.22!important;font-weight:680!important;color:#153d68!important}
.r2r-issues-section.r2r-social .r2r-issue-copy span,.r2r-issues-section.r2r-private .r2r-issue-copy span{font-size:12.8px!important;line-height:1.45!important;color:#657a91!important}
.r2r-issues-section.r2r-social .r2r-issue-arrow,.r2r-issues-section.r2r-private .r2r-issue-arrow{width:34px!important;height:34px!important;border:0!important;font-size:23px!important}
.r2r-issues-section.r2r-private .r2r-issue-arrow{color:#4f24aa!important;background:#efe5ff!important}
.r2r-issues-section.r2r-social .r2r-issue-arrow{color:#087f80!important;background:#def7f5!important}
@media(max-width:1000px){.r2r-issues-section.r2r-social .r2r-issue-grid,.r2r-issues-section.r2r-private .r2r-issue-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:650px){.r2r-issues-section.r2r-social .r2r-issue-grid,.r2r-issues-section.r2r-private .r2r-issue-grid{grid-template-columns:1fr!important}.r2r-issues-section.r2r-social .r2r-issue-image,.r2r-issues-section.r2r-private .r2r-issue-image{height:190px!important}}
