/*
 * Service — Website Design (Archetype C: premium, spacious, visual).
 * Loaded only on the dedicated design service page template.
 */

/* ---------- Hero ---------- */
.mwp-design-hero {
  padding-block: var(--sp-16) var(--sp-24);
  overflow: hidden;
}
.mwp-design-hero__grid {
  display: grid; gap: var(--sp-16); align-items: center;
  margin-block-start: var(--sp-8);
}
@media (min-width: 960px) {
  .mwp-design-hero__grid { grid-template-columns: 1fr 1fr; }
}
.mwp-design-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--primary); background: var(--primary-soft);
  padding: 6px 14px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: var(--fs-sm);
  margin-block-end: var(--sp-5);
}
.mwp-design-hero__content h1 { margin-block-end: var(--sp-4); max-width: 14ch; }
.mwp-design-hero__sub { color: var(--text-secondary); font-size: 1.2rem; max-width: 52ch; line-height: 1.8; }
.mwp-design-hero__cta { margin-block-start: var(--sp-8); }
.mwp-design-hero__trust {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-secondary); font-size: var(--fs-sm);
}
.mwp-design-hero__trust svg { color: var(--primary); }

/* ---------- Layered device mockup (abstract wireframe, no fake screenshots) ---------- */
.mwp-design-devices {
  position: relative;
  min-height: 360px;
  display: grid; place-items: center;
}
.mwp-design-devices__badge {
  position: absolute; top: -14px; inset-inline-start: 6%; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md);
  color: var(--primary); font-weight: 700; font-size: var(--fs-sm);
  padding: 7px 14px; border-radius: var(--radius-pill);
  transform: rotate(-3deg);
}
.mwp-design-devices__badge svg { color: var(--primary); }
.mwp-design-devices__desktop {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden; width: min(440px, 90%);
  transform: rotate(-3deg);
  transition: transform .3s var(--ease);
}
.mwp-design-devices:hover .mwp-design-devices__desktop { transform: rotate(-1deg); }
.mwp-design-devices__bar {
  display: flex; gap: 6px; padding: 12px 16px;
  background: var(--surface-sunken); border-block-end: 1px solid var(--border);
}
.mwp-design-devices__bar span {
  width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong);
}
.mwp-design-devices__body { padding: var(--sp-5); display: grid; gap: var(--sp-3); }
.mwp-design-devices__block {
  height: 22px; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--primary-soft), var(--surface-sunken));
}
.mwp-design-devices__block--hero { height: 64px; background: linear-gradient(135deg, var(--primary-soft), var(--accent) 180%); opacity: .35; }
.mwp-design-devices__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.mwp-design-devices__row .mwp-design-devices__block { height: 46px; }

.mwp-design-devices__mobile {
  position: absolute; inset-inline-end: -6%; inset-block-end: -10%;
  width: 148px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 24px; box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: rotate(5deg);
}
:dir(rtl) .mwp-design-devices__mobile { inset-inline-end: auto; inset-inline-start: -6%; }
.mwp-design-devices__notch {
  height: 18px; background: var(--surface-sunken);
  border-block-end: 1px solid var(--border);
  position: relative;
}
.mwp-design-devices__notch::after {
  content: ""; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 6px; border-radius: var(--radius-pill); background: var(--border-strong);
}
.mwp-design-devices__mobile .mwp-design-devices__body { padding: var(--sp-3); gap: var(--sp-2); }
.mwp-design-devices__mobile .mwp-design-devices__block { height: 16px; }
.mwp-design-devices__mobile .mwp-design-devices__block--hero { height: 60px; }

@media (max-width: 560px) {
  .mwp-design-devices { min-height: 260px; }
  .mwp-design-devices__mobile { width: 110px; inset-block-end: -6%; }
}

/* ---------- Signature section: design principles ---------- */
.mwp-design-principles {
  display: grid; gap: var(--sp-8);
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 960px) { .mwp-design-principles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mwp-design-principles { grid-template-columns: 1fr; } }

.mwp-design-principle { position: relative; padding-inline-start: var(--sp-2); }
.mwp-design-principle__num {
  display: block; font-size: .8rem; font-weight: 800; color: var(--text-secondary);
  margin-block-end: var(--sp-3);
}
.mwp-design-principle__icon {
  width: 52px; height: 52px; border-radius: var(--radius-sm);
  background: var(--primary-soft); color: var(--primary);
  display: grid; place-items: center; margin-block-end: var(--sp-4);
}
.mwp-design-principle h3 { font-size: 1.1rem; margin-block-end: var(--sp-2); }
.mwp-design-principle p { color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.8; }