/* ==========================================================================
   Rent UK Property — the rest of the homepage.

   Continues rentuk-hero.css: same tokens (declared on .ruk, which every section
   shortcode emits), same type scale, same card. Nothing here redefines a token,
   so a change to the palette in one place still moves the whole page.

   Sections, in page order:
     .ruk-section-listings   homes available now
     .ruk-section-towns      where we let
     .ruk-section-story      renting with us + the live facts list
     .ruk-section-cta        tenants / landlords
   ========================================================================== */

.ruk-section{
  padding-block:clamp(52px,7vw,92px);
  background:#fff;
}
.ruk-section-towns,
.ruk-section-story{background:var(--ruk-paper);}

/* ---- section heading: eyebrow + h2 on the left, a live note on the right ---- */
.ruk-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
  margin-bottom:clamp(26px,3.4vw,40px);
  padding-bottom:20px;
  border-bottom:1px solid var(--ruk-line);
}
.ruk-section-head h2{
  font-family:var(--ruk-display);
  font-weight:700;
  font-size:clamp(26px,3.2vw,38px);
  line-height:1.12;
  letter-spacing:-.02em;
  margin:6px 0 0;
  color:var(--ruk-forest);
  max-width:22ch;
}
.ruk-section-note{
  font-size:14.5px;
  color:var(--ruk-muted);
  margin:0;
  max-width:38ch;
}

.ruk-section-foot{margin:clamp(28px,3.4vw,40px) 0 0;text-align:center;}

/* ---- the grid of homes ---- */
.ruk-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(18px,2vw,26px);
}
/* The card itself is styled by rentuk-hero.css; in the deck it is absolutely placed,
   so only the grid context needs anything. */
.ruk-grid .ruk-card{height:100%;display:flex;flex-direction:column;}
.ruk-grid .ruk-card-body{flex:1;display:flex;flex-direction:column;}
.ruk-grid .ruk-card-link{margin-top:auto;}

/* ---- towns ---- */
.ruk-town-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:12px;
}
.ruk-town-grid a{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
  background:#fff;
  border:1px solid var(--ruk-line);
  border-radius:12px;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.ruk-town-grid a:hover{
  border-color:var(--ruk-forest);
  transform:translateY(-2px);
  box-shadow:0 12px 22px -16px rgba(8,65,31,.55);
}
.ruk-town-name{
  font-family:var(--ruk-display);
  font-weight:600;
  font-size:16.5px;
  color:var(--ruk-forest);
}
.ruk-town-count{
  font-family:var(--ruk-mono);
  font-size:12px;
  color:var(--ruk-muted);
  white-space:nowrap;
}

/* ---- story ---- */
.ruk-story-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(30px,4vw,64px);
  align-items:start;
}
.ruk-story-copy h2{
  font-family:var(--ruk-display);
  font-weight:700;
  font-size:clamp(26px,3.2vw,38px);
  line-height:1.14;
  letter-spacing:-.02em;
  margin:8px 0 18px;
  color:var(--ruk-forest);
  max-width:20ch;
}
.ruk-story-copy p{margin:0 0 16px;font-size:16.5px;color:var(--ruk-ink);max-width:56ch;}
.ruk-story-links{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px;}
.ruk-story-links a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  font-size:15px;
  color:var(--ruk-green);
}
.ruk-story-links a svg{width:17px;height:17px;transition:transform .18s ease;}
.ruk-story-links a:hover{color:var(--ruk-forest);}
.ruk-story-links a:hover svg{transform:translateX(3px);}

.ruk-facts{
  list-style:none;
  margin:0;
  padding:22px 24px;
  background:#fff;
  border:1px solid var(--ruk-line);
  border-radius:16px;
}
.ruk-facts li{padding:14px 0;border-bottom:1px solid var(--ruk-line);}
.ruk-facts li:first-child{padding-top:0;}
.ruk-facts li:last-child{border-bottom:0;padding-bottom:0;}
.ruk-fact-label{
  display:block;
  font-family:var(--ruk-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ruk-muted);
  margin-bottom:6px;
}
.ruk-fact-value{display:block;font-size:15.5px;line-height:1.45;color:var(--ruk-ink);}
.ruk-fact-figure{
  font-family:var(--ruk-mono);
  font-size:17px;
  font-weight:500;
  color:var(--ruk-rose); /* a rent is a price, and prices are rose */
}

/* ---- closing calls to action ---- */
.ruk-section-cta{padding-bottom:clamp(56px,7vw,96px);}
.ruk-cta-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(18px,2vw,26px);
}
.ruk-cta-panel{
  padding:clamp(28px,3.2vw,40px);
  border-radius:18px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.ruk-cta-panel h2{
  font-family:var(--ruk-display);
  font-weight:700;
  font-size:clamp(24px,2.6vw,32px);
  line-height:1.15;
  letter-spacing:-.02em;
  margin:8px 0 12px;
}
.ruk-cta-panel p{margin:0 0 22px;font-size:16px;max-width:44ch;}
.ruk-cta-tenants{background:var(--ruk-forest);color:#fff;}
.ruk-cta-tenants h2{color:#fff;}
.ruk-cta-tenants p{color:rgba(255,255,255,.82);}
.ruk-cta-tenants .ruk-eyebrow{color:rgba(255,255,255,.72);}
.ruk-cta-tenants .ruk-btn-solid{background:var(--ruk-action);color:#fff;}
.ruk-cta-tenants .ruk-btn-solid:hover{background:#0B6E2E;}
.ruk-cta-landlords{background:#fff;border:1px solid var(--ruk-line);}
.ruk-cta-landlords h2{color:var(--ruk-forest);}
.ruk-cta-landlords p{color:var(--ruk-muted);}
.ruk-cta-aside{margin:16px 0 0;font-size:14.5px;color:var(--ruk-muted);}
.ruk-cta-aside a{font-family:var(--ruk-mono);color:var(--ruk-forest);border-bottom:1px solid currentColor;}

@media (max-width:900px){
  .ruk-story-grid{grid-template-columns:minmax(0,1fr);}
  .ruk-section-head{align-items:flex-start;}
}
@media (max-width:560px){
  .ruk-grid{grid-template-columns:minmax(0,1fr);}
  .ruk-town-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
}

/* ==========================================================================
   FOOTER
   Forest ground, so the page closes on the same colour the hero opens with.
   ========================================================================== */

.ruk-footer{
  background:var(--ruk-forest);
  color:rgba(255,255,255,.78);
  padding-top:clamp(44px,5vw,66px);
}
.ruk-footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,.85fr)) minmax(0,1.15fr);
  gap:clamp(26px,3.4vw,48px);
  padding-bottom:clamp(34px,4vw,52px);
}
.ruk-footer .ruk-brand{margin-bottom:16px;}
.ruk-footer .ruk-brand-mark{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);}
.ruk-footer .ruk-brand-name{color:#fff;}
.ruk-footer .ruk-brand-sub{color:rgba(255,255,255,.62);}
.ruk-footer-brand p{margin:0;max-width:34ch;font-size:14.5px;line-height:1.65;}

.ruk-footer-col h2{
  font-family:var(--ruk-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  margin:0 0 16px;
}
.ruk-footer-links{display:grid;gap:10px;}
.ruk-footer-links a,
.ruk-footer-contact a{
  font-size:14.5px;
  color:rgba(255,255,255,.86);
  transition:color .16s ease;
}
.ruk-footer-links a:hover,
.ruk-footer-contact a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}

.ruk-footer-contact p{margin:0 0 14px;}
.ruk-footer-contact p:last-child{margin-bottom:0;}
.ruk-footer-label{
  display:block;
  font-size:12.5px;
  color:rgba(255,255,255,.58);
  margin-bottom:3px;
}
.ruk-footer-contact a{font-family:var(--ruk-mono);font-size:13.5px;word-break:break-word;}

.ruk-footer-bar{
  background:var(--ruk-forest-deep);
  border-top:1px solid var(--ruk-forest-line);
  font-size:12.5px;
  color:rgba(255,255,255,.66);
}
.ruk-footer-bar .ruk-wrap{
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  padding-block:12px;
}
.ruk-footer-legal{display:flex;gap:18px;flex-wrap:wrap;}
.ruk-footer-legal a:hover{color:#fff;}

@media (max-width:900px){
  .ruk-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:560px){
  .ruk-footer-grid{grid-template-columns:minmax(0,1fr);}
  .ruk-footer-bar .ruk-wrap{justify-content:center;text-align:center;}
}