/* ==========================================================================
   RESIDENTIAL PAGE — scoped styles
   Loaded only on the "Residential" page template (see foxsecur_enqueue_assets
   in functions.php). Uses design tokens + shared typography/button classes
   from main.css (--color-*, --font-*, --radius-*, .h1-hero, .hero__desc,
   .btn/.btn-outline/.btn-icon) so this page stays visually consistent with
   the rest of the site without duplicating those rules here.

   Table of contents:
   1. Hero
   2. Stats bar
   3. Smart Technology split
   4. Why Homeowners Choose FoxSecur
   5. Our Residential Security Solutions
   6. Why Smart Security Matters Today
   7. How the Process Works
   8. Control Everything From Your Phone
   9. Residential Security FAQ (reuses global .faq-item accordion)
   10. Responsive (tablet + mobile)
   ========================================================================== */

/* 1. Hero
   ========================================================================== */
.residential-hero {
  position: relative;
  background: var(--color-navy);
  overflow: hidden;
}
.residential-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.residential-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.88) 22%, rgba(0,26,21,0) 100%);
  z-index: 1;
}
.residential-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 620px) 1fr;
  align-items: center;
  gap: 40px;
  min-height: 760px;
  padding-block: 160px 100px;
}
.residential-hero__content { min-width: 0; }
.residential-hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.residential-hero__media {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  min-height: 420px;
}
.residential-hero__media img {
  max-height: 560px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .residential-hero__inner {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-block: 140px 48px;
    gap: 32px;
  }
  .residential-hero__media { order: 2; min-height: 0; }
  .residential-hero__media img { max-height: 380px; }
}

/* 2. Stats bar
   ========================================================================== */
.residential-stats {
  background: var(--color-bg-light-blue);
}
.residential-stats__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 120px;
  flex-wrap: wrap;
  padding-block: 40px;
}
.residential-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.residential-stats__icon { width: 30px; height: 30px; flex: none; }
.residential-stats__icon svg { width: 100%; height: 100%; }
.residential-stats__num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  color: var(--color-navy);
}
.residential-stats__label {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-navy);
}
.residential-stats__dot {
  display: none;
}

/* 3. Smart Technology split
   ========================================================================== */
.smart-tech__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: stretch;
}
.smart-tech__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
}
.smart-tech__media img { width: 100%; height: 100%; object-fit: cover; }
.smart-tech__caption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  background: rgba(35,45,100,0.7);
  border: 1px solid var(--color-white);
  border-radius: var(--radius-md);
  color: var(--color-white);
  font-family: var(--font-alt);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  padding: 20px;
}
.smart-tech__subline {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  color: var(--color-navy);
  margin: 16px 0 12px;
}
.smart-tech__content .body-text { margin-bottom: 24px; }
.smart-tech__box {
  background: var(--color-bg-light-blue);
  border-radius: 10px;
  padding: 24px;
}
.smart-tech__box-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 16px;
  color: var(--color-navy);
  margin-bottom: 20px;
}
.smart-tech__list {
  columns: 2;
  column-gap: 44px;
}
.smart-tech__list li {
  display: flex;
  align-items: center;
  gap: 16px;
  break-inside: avoid;
  margin-bottom: 20px;
  font-family: var(--font-alt);
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-gray-body);
}
.smart-tech__list li:last-child { margin-bottom: 0; }
.smart-tech__list-icon {
  width: 34px;
  height: 34px;
  flex: none;
  background: var(--color-yellow);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.smart-tech__list-icon svg { width: 20px; height: 20px; }

/* 4. Why Homeowners Choose FoxSecur
   ========================================================================== */
.why-choose { background: var(--color-bg-light-blue); }
.why-choose__head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 56px;
}
.why-choose__head .eyebrow { display: inline-flex; }
.why-choose__intro { margin-top: 16px; }

.why-choose__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.why-choose__cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.why-choose-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--color-white);
  border: 1px solid #dbeafe;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(28,57,142,0.08), 0 2px 4px -2px rgba(28,57,142,0.08);
  padding: 25px;
}
.why-choose-card__icon {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #1a6bcc 0%, #0d4fa0 100%);
  box-shadow: 0 10px 15px -3px rgba(20,71,230,0.3), 0 4px 6px -4px rgba(20,71,230,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-choose-card__icon--solid { background: var(--color-yellow); box-shadow: none; }
.why-choose-card__icon svg { width: 24px; height: 24px; }
.why-choose-card h3 {
  font-family: var(--font-alt);
  font-weight: 700;
  font-size: 16px;
  color: #0a0f2e;
  margin-bottom: 8px;
}
.why-choose-card p {
  font-family: var(--font-alt);
  font-size: 14px;
  line-height: 1.65;
  color: #64748b;
}

.why-choose__media { position: relative; }
.why-choose__media img { width: 100%; height: auto; display: block; }
.why-choose__badge {
  position: absolute;
  right: 0;
  bottom: 80px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-white);
  border-radius: 14px;
  padding: 14px 20px 14px 14px;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
}
.why-choose__badge-icon {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-choose__badge-icon svg { width: 20px; height: 20px; }
.why-choose__badge-text { display: flex; flex-direction: column; }
.why-choose__badge-text strong { font-family: var(--font-alt); font-weight: 700; font-size: 14px; color: #0a0f2e; }
.why-choose__badge-text span { font-family: var(--font-alt); font-size: 12px; color: #64748b; }

/* 5. Our Residential Security Solutions
   ========================================================================== */
.solutions__head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 48px;
}
.solutions__head .eyebrow { display: inline-flex; }
.solutions__intro { margin-top: 16px; }

.solutions__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.solutions-card {
  background: var(--color-bg-light-blue);
  border: 1px solid #dbeafe;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(28,57,142,0.08), 0 2px 4px -2px rgba(28,57,142,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.solutions-card__media {
  position: relative;
  height: 220px;
}
.solutions-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.solutions-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10,15,46,0.8) 0%, rgba(10,15,46,0.32) 50%, rgba(10,15,46,0) 100%);
}
.solutions-card__icon {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--color-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
}
.solutions-card__icon svg { width: 24px; height: 24px; }
.solutions-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.solutions-card__body h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-navy);
  margin-bottom: 16px;
}
.solutions-card__list { margin-bottom: 20px; flex: 1; }
.solutions-card__list li {
  position: relative;
  padding-left: 16px;
  font-family: var(--font-alt);
  font-size: 14px;
  color: #4a5568;
  line-height: 1.4;
  margin-bottom: 10px;
}
.solutions-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-navy);
}
.solutions-card__list li:last-child { margin-bottom: 0; }
.solutions-card__cta {
  display: block;
  text-align: center;
  background: var(--color-yellow);
  color: var(--color-navy);
  font-family: var(--font-alt);
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--radius-pill);
  padding: 12px 20px;
  transition: transform 0.2s ease;
}
.solutions-card__cta:hover { transform: translateY(-2px); }

/* 6. Why Smart Security Matters Today
   ========================================================================== */
.why-smart { background: var(--color-bg-light-blue); }
.why-smart__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.why-smart__content .body-text { margin: 16px 0; }
.why-smart__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 24px 0;
}
.why-smart__list li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-alt);
  font-size: 16px;
  color: #5e676d;
}
.why-smart__icon {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 14px;
  background: var(--color-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-smart__icon svg { width: 20px; height: 20px; }

.why-smart__media {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(28,57,142,0.2);
}
.why-smart__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.why-smart__badge {
  position: absolute;
  left: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-white);
  border-radius: 14px;
  padding: 14px 20px 14px 14px;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
}
.why-smart__badge-icon {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: rgba(28,57,142,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-smart__badge-icon svg { width: 20px; height: 20px; }
.why-smart__badge-text { display: flex; flex-direction: column; }
.why-smart__badge-text strong { font-family: var(--font-alt); font-weight: 700; font-size: 14px; color: #0a0f2e; }
.why-smart__badge-text span { font-family: var(--font-alt); font-size: 12px; color: #64748b; }

/* 7. How the Process Works
   ========================================================================== */
.process { position: relative; background: var(--color-navy); overflow: hidden; }
.process__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.process__overlay { position: absolute; inset: 0; background: rgba(35,45,100,0.8); z-index: 1; }
.process__inner { position: relative; z-index: 2; }
.process__head { text-align: center; max-width: 700px; margin: 0 auto 48px; }
.process__head .eyebrow { display: inline-flex; }

.process__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.process-step {
  background: rgba(4,11,51,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9px;
  overflow: hidden;
}
.process-step__media { position: relative; height: 160px; }
.process-step__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.process-step__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10,15,46,0.9) 0%, rgba(10,15,46,0.5) 50%, rgba(10,15,46,0) 100%);
}
.process-step__num {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  background: rgba(35,45,100,0.6);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 10px;
  color: var(--color-white);
  font-family: var(--font-alt);
  font-weight: 700;
  font-size: 12px;
  padding: 6px 10px;
}
.process-step__body { padding: 16px; }
.process-step__title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.process-step__icon {
  width: 38px;
  height: 38px;
  flex: none;
  background: var(--color-yellow);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.process-step__icon svg { width: 20px; height: 20px; }
.process-step__body h3 { font-family: var(--font-alt); font-weight: 700; font-size: 14px; color: var(--color-white); }
.process-step__body p { font-family: var(--font-alt); font-size: 14px; line-height: 1.6; color: #99a1af; }

/* 8. Control Everything From Your Phone
   ========================================================================== */
.mobile-control__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.mobile-control__media {
  position: relative;
  border-radius: 40px;
  overflow: hidden;
  aspect-ratio: 589 / 670;
}
.mobile-control__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mobile-control__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}
.mobile-control__status {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 1;
  width: 208px;
  background: var(--color-white);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
}
.mobile-control__status-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-alt);
  font-weight: 700;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 8px;
}
.mobile-control__status-dot { width: 8px; height: 8px; border-radius: 50%; background: #00c950; flex: none; }
.mobile-control__status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-alt);
  font-size: 12px;
  color: #1e293b;
  padding: 4px 0;
}
.mobile-control__status-row strong { color: #00c950; font-weight: 700; }

.mobile-control__content .body-text { margin: 16px 0; }
.mobile-control__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}
.mobile-control__feature {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-white);
  border: 1px solid #dbeafe;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  font-family: var(--font-alt);
  font-size: 14px;
  color: #1e293b;
}
.mobile-control__icon {
  width: 40px;
  height: 40px;
  flex: none;
  background: var(--color-yellow);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-control__icon svg { width: 20px; height: 20px; }
.btn-navy-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  border-radius: var(--radius-pill);
  padding: 16px 32px;
  transition: transform 0.2s ease;
}
.btn-navy-block:hover { transform: translateY(-2px); }

/* 9. Residential Security FAQ
   ========================================================================== */
.faq .eyebrow { margin-bottom: 20px; }

/* 10. Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .smart-tech__layout { grid-template-columns: 1fr; gap: 32px; }
  .smart-tech__media { height: auto; aspect-ratio: 588 / 532; }
  .why-choose__layout { grid-template-columns: 1fr; gap: 40px; }
  .why-choose__media { max-width: 460px; margin: 0 auto; }
  .solutions__grid { grid-template-columns: repeat(2, 1fr); }
  .why-smart__layout { grid-template-columns: 1fr; gap: 32px; }
  .process__grid { grid-template-columns: repeat(3, 1fr); }
  .mobile-control__layout { grid-template-columns: 1fr; gap: 32px; }
  .mobile-control__media { height: auto; aspect-ratio: 1 / 1; }
  .faq__layout { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 640px) {
  .solutions__grid { grid-template-columns: 1fr; }
  .process__grid { grid-template-columns: 1fr; }
  .why-smart__media { order: -1; }
  .mobile-control__grid { grid-template-columns: 1fr; }
  .mobile-control__status { position: static; width: 100%; margin-top: 16px; }
  .faq__card { padding: 8px 20px; }
}

@media (max-width: 767px) {
  .residential-hero__inner { padding-block: 120px 32px; gap: 24px; }
  .residential-hero__media img { max-height: 280px; }

  .residential-stats__inner { flex-direction: column; gap: 24px; padding-block: 28px; }
  .residential-stats__dot { display: none; }

  .smart-tech__caption { font-size: 14px; padding: 14px; }
  .smart-tech__box { padding: 20px; }
  .smart-tech__list { columns: 1; }

  .why-choose__head { margin-bottom: 32px; }
  .why-choose-card { padding: 18px; gap: 14px; }
  .why-choose__badge { right: 8px; bottom: 16px; padding: 10px 16px 10px 10px; }
  .why-choose__badge-icon { width: 32px; height: 32px; }
  .why-choose__badge-icon svg { width: 16px; height: 16px; }

  .solutions-card__body { padding: 20px; }
}

.faq .h1-alt {
	font-family: var(--font-alt);
	font-weight: 900;
	letter-spacing: -1.02px;
}

/* Icon hover — subtle jump on hover, matching the homepage pattern (Smarter
   Security for Modern Homes, Why Homeowners Choose FoxSecur, Our Residential
   Security Solutions, Why Smart Security Matters Today, How the Process
   Works, Control Everything From Your Phone). Scoped to this page's body
   template class since a couple of these icon classes are shared with the
   Commercial/Industries pages. */
body.page-template-page-residential-php .smart-tech__list-icon,
body.page-template-page-residential-php .why-choose-card__icon,
body.page-template-page-residential-php .solutions-card__icon,
body.page-template-page-residential-php .why-smart__icon,
body.page-template-page-residential-php .process-step__icon,
body.page-template-page-residential-php .mobile-control__icon {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.page-template-page-residential-php .smart-tech__list-icon:hover,
body.page-template-page-residential-php .why-choose-card__icon:hover,
body.page-template-page-residential-php .solutions-card__icon:hover,
body.page-template-page-residential-php .why-smart__icon:hover,
body.page-template-page-residential-php .process-step__icon:hover,
body.page-template-page-residential-php .mobile-control__icon:hover {
  transform: translateY(-5px);
}