/* Door Services: compact diagnostic blueprint */
.service-module--door {
  --svc-accent: #2563eb;
  --svc-accent-2: #0ea5e9;
  --svc-accent-dark: #1d4ed8;
  --svc-bg: #f7fbff;
}
.service-module--door .svc-hero__copy { background: linear-gradient(135deg, rgba(255,255,255,.97), rgba(239,246,255,.94)); }
.service-module--door .svc-hero__media { clip-path: polygon(0 0, 100% 0, 100% 94%, 90% 100%, 0 100%); }
.door-system-map { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 18px; margin-top: 0; align-items: start; }
.door-system-map__main, .door-system-map__parts { border-radius: 24px; border: 1px solid var(--svc-line); background: rgba(255,255,255,.93); box-shadow: var(--svc-shadow); padding: clamp(20px,2.6vw,30px); }
.door-system-map__main h2 { margin: 12px 0 10px; font-size: clamp(1.45rem,2.3vw,2rem); letter-spacing: -.035em; font-weight: 650; }
.door-system-map__main p { color: var(--svc-muted); line-height: 1.6; margin: 0; }
.door-system-map__parts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; background-image: linear-gradient(90deg, rgba(37,99,235,.07) 1px, transparent 1px), linear-gradient(rgba(37,99,235,.07) 1px, transparent 1px); background-size: 26px 26px; }
.door-system-map__parts span { display: grid; place-items: center; min-height: 68px; border-radius: 15px; background: rgba(255,255,255,.86); border: 1px dashed rgba(37,99,235,.25); font-weight: 650; color: #1e3a8a; text-align: center; font-size: .94rem; }
.door-service-fit .svc-card { border-left: 4px solid var(--svc-accent); }
@media (max-width: 1040px) { .door-system-map { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .door-system-map__parts { grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* Door service: real project photo walkthrough */
.door-photo-steps { overflow: hidden; }
.door-photo-steps .svc-section-head { max-width: 880px; }
.door-photo-steps__grid { display: grid; gap: 18px; }
.door-photo-step { display: grid; grid-template-columns: minmax(220px, 360px) minmax(0, 1fr); gap: 0; align-items: stretch; border: 1px solid var(--svc-line); border-radius: 22px; overflow: hidden; background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,246,255,.72)); box-shadow: 0 18px 50px rgba(15,23,42,.07); }
.door-photo-step__media { grid-column: 1; grid-row: 1; margin: 0; height: 260px; min-height: 0; background: #e5edf7; }
.door-photo-step__media img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.door-photo-step__copy { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(20px, 3vw, 34px); }
.door-photo-step__copy span { width: max-content; border-radius: 999px; background: rgba(37,99,235,.1); color: #1d4ed8; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 7px 11px; margin-bottom: 14px; }
.door-photo-step__copy h3 { margin: 0 0 10px; font-size: clamp(1.18rem, 2vw, 1.55rem); line-height: 1.2; letter-spacing: -.025em; color: #0f172a; }
.door-photo-step__copy p { margin: 0; color: var(--svc-muted); line-height: 1.65; }
@media (min-width: 821px) {
  .door-photo-step:nth-child(odd) .door-photo-step__media,
  .door-photo-step:nth-child(even) .door-photo-step__media { grid-column: 1; grid-row: 1; }
  .door-photo-step:nth-child(odd) .door-photo-step__copy,
  .door-photo-step:nth-child(even) .door-photo-step__copy { grid-column: 2; grid-row: 1; }
}
@media (max-width: 820px) {
  .door-photo-step { grid-template-columns: 1fr; }
  .door-photo-step__media { grid-column: 1; grid-row: 1; height: 300px; }
  .door-photo-step__copy { grid-column: 1; grid-row: 2; }
}
@media (max-width: 560px) {
  .door-photo-step__media { height: 240px; }
}


/* Hollow metal doors: preserve vertical project photography */
.service-module--door[data-service="hollow-metal-doors"] .door-photo-step {
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
}
.service-module--door[data-service="hollow-metal-doors"] .door-photo-step__media {
  height: 320px;
  background: #eef2f6;
}
.service-module--door[data-service="hollow-metal-doors"] .door-photo-step__media img {
  object-fit: contain;
  background: #eef2f6;
}
@media (max-width: 820px) {
  .service-module--door[data-service="hollow-metal-doors"] .door-photo-step {
    grid-template-columns: 1fr;
  }
  .service-module--door[data-service="hollow-metal-doors"] .door-photo-step__media {
    height: min(72vh, 520px);
  }
}


/* DW_IMAGE_AUDIT_20260710: compact uncropped door project walkthroughs */
.door-photo-steps__grid { gap: 14px; }
.door-photo-step {
  grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
  align-items: center;
}
.door-photo-step__media {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  align-self: center;
  background: #eef2f6;
}
.door-photo-step__media img {
  object-fit: contain;
  object-position: center;
  background: #eef2f6;
}
.door-photo-step__copy { padding: clamp(18px, 2.4vw, 26px); }
.door-photo-step__copy span { margin-bottom: 10px; }
.door-photo-step__copy p { line-height: 1.56; }
/* Aluminum storefront project photos are square. */
.service-module--door[data-service="aluminum-storefront-doors"] .door-photo-step {
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
}
.service-module--door[data-service="aluminum-storefront-doors"] .door-photo-step__media {
  aspect-ratio: 1 / 1;
}
/* Keep the hollow-metal replacement photos at their native 3:4 proportion. */
.service-module--door[data-service="hollow-metal-doors"] .door-photo-step {
  grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
}
.service-module--door[data-service="hollow-metal-doors"] .door-photo-step__media {
  height: auto;
  aspect-ratio: 3 / 4;
}
@media (max-width: 820px) {
  .door-photo-step,
  .service-module--door[data-service="aluminum-storefront-doors"] .door-photo-step,
  .service-module--door[data-service="hollow-metal-doors"] .door-photo-step {
    grid-template-columns: 1fr;
  }
  .door-photo-step__media,
  .service-module--door[data-service="hollow-metal-doors"] .door-photo-step__media {
    width: min(100%, 280px);
    height: auto;
    aspect-ratio: 3 / 4;
    justify-self: center;
  }
  .service-module--door[data-service="aluminum-storefront-doors"] .door-photo-step__media {
    width: min(100%, 320px);
    aspect-ratio: 1 / 1;
  }
}