/* ==========================================================
   SERVICES PAGE STYLES (AIWENS)
   What we edit & why:
   - Define a clean, consistent foundation (colors, spacing, typography)
   - Ensure unique, collision-free class names scoped to "svc-*"
   - Provide responsive two-column layouts with graceful stacking on mobile
   - Create clear, high-contrast CTAs for conversion
   ========================================================== */

/* ------------------------------
   1) THEME TOKENS
   Why: Centralize colors/spacing/typography for easy maintenance and brand tweaks.
   ------------------------------ */
:root {
  /* Colors */
  --svc-bg: #ffffff;
  --svc-surface: #fafafa;
  --svc-ink: #0f172a;         /* near-slate-900 */
  --svc-ink-soft: #475569;    /* slate-600 */
  --svc-border: #e5e7eb;      /* gray-200 */
  --svc-accent: #2563eb;      /* blue-600 */
  --svc-accent-ink: #ffffff;  /* on-accent text */

  /* Sizing / Rhythm */
  --svc-maxw: 1160px;
  --svc-pad-x: clamp(16px, 4vw, 32px);
  --svc-sec-pad-y: clamp(40px, 6vw, 88px);
  --svc-gap: clamp(16px, 3vw, 32px);
  --svc-gap-lg: clamp(24px, 5vw, 48px);
  --svc-radius: 16px;
  --svc-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);

  /* Typography */
  --svc-h1: clamp(28px, 4.5vw, 44px);
  --svc-h2: clamp(24px, 3.5vw, 32px);
  --svc-lead: clamp(16px, 2.1vw, 18px);
  --svc-text: 16px;
  --svc-cta-size: 15px;
  --svc-line: 1.6;
}

/* ------------------------------
   2) GLOBAL SERVICE SCOPE
   Why: Keep the services page visually cohesive and readable.
   ------------------------------ */
.svc-hero,
.svc-webdesign,
.svc-automation,
.svc-cloud,
.svc-care {
  background: var(--svc-bg);
  color: var(--svc-ink);
}

.svc-hero__inner,
.svc-webdesign__grid,
.svc-automation__grid,
.svc-cloud__grid,
.svc-care__inner {
  max-width: var(--svc-maxw);
  margin-inline: auto;
  padding-inline: var(--svc-pad-x);
}

/* ------------------------------
   3) CTA BUTTON (shared)
   Why: One accessible, consistent CTA style to drive clicks.
   ------------------------------ */
.svc-hero__cta,
.svc-webdesign__cta,
.svc-automation__cta,
.svc-cloud__cta,
.svc-care__cta {
  display: inline-block;
  font-size: var(--svc-cta-size);
  font-weight: 600;
  line-height: 1;
  padding: 14px 18px;
  border-radius: 999px;
  background: var(--svc-accent);
  color: var(--svc-accent-ink);
  border: 1px solid transparent;
  box-shadow: var(--svc-shadow);
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.svc-hero__cta:hover,
.svc-webdesign__cta:hover,
.svc-automation__cta:hover,
.svc-cloud__cta:hover,
.svc-care__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.25);
  background: #1d4ed8; /* blue-700 */
}

.svc-hero__cta:focus-visible,
.svc-webdesign__cta:focus-visible,
.svc-automation__cta:focus-visible,
.svc-cloud__cta:focus-visible,
.svc-care__cta:focus-visible {
  outline: 3px solid #93c5fd; /* focus ring for accessibility */
  outline-offset: 2px;
}

/* ------------------------------
   HERO SECTION — CROPPED WIDTH
   What & Why:
   - Keep page white on the sides
   - Restrict gradient to max-width container
   ------------------------------ */
.svc-hero {
  background: var(--svc-bg);
  padding-block: 60px 30px;
}
.svc-hero__inner {
  max-width: var(--svc-maxw);
  margin-inline: auto;
  padding: 40px var(--svc-pad-x);
  text-align: center;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  border-radius: var(--svc-radius);
  color: #ffffff;
  overflow: hidden;               /* ensures gradient respects rounded corners */
  box-shadow: var(--svc-shadow);  /* subtle lift, also helps on mobile */
}

/* Mobile-specific adjustments: give the card breathing room on the sides */
@media (max-width: 700px) {
  .svc-hero {
    padding-block: 40px 24px;     /* slightly tighter vertical rhythm */
  }
  .svc-hero__inner {
    margin-left: var(--svc-pad-x);
    margin-right: var(--svc-pad-x);     /* pull card in from edges */
    padding: 28px 20px;                 /* balanced inner padding */
    border-radius: 14px;                /* a tad smaller radius fits mobile nicely */
  }
  .svc-hero__title {
    margin-bottom: 14px;
  }
  .svc-hero__lead {
    max-width: 36ch;                   /* improves readability on small screens */
  }
}

/* Keep CTA hidden in hero as per your spec */
.svc-hero__cta { display: none !important; }


/* ==========================================================
   SECTION 2 — WEB DESIGN 
   ========================================================== */

.svc-webdesign__content .svc-webdesign__title {
  text-align: center;
  position: relative;
  display: inline-block;
  margin: 0 auto 18px auto;
  padding-bottom: 12px;
}

.svc-webdesign__content .svc-webdesign__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb 0%, #f59e0b 50%, #10b981 100%);
  background-size: 200% 100%;
  animation: svc-underline-slide 3s ease-in-out infinite;
}

@keyframes svc-underline-slide {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-webdesign__content .svc-webdesign__title::after {
    animation: none;
  }
}

/* CTA as a text link with arrow */
.svc-webdesign__content .svc-webdesign__cta {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;

  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  color: #2563eb;
  transition: color 0.15s ease, transform 0.15s ease;
}

.svc-webdesign__content .svc-webdesign__cta--orange { color: #f59e0b; }

.svc-webdesign__content .svc-webdesign__cta::after {
  content: "→";
  transition: transform 0.15s ease;
}

.svc-webdesign__content .svc-webdesign__cta:hover,
.svc-webdesign__content .svc-webdesign__cta:focus-visible {
  color: #1d4ed8;
}

.svc-webdesign__content .svc-webdesign__cta--orange:hover,
.svc-webdesign__content .svc-webdesign__cta--orange:focus-visible {
  color: #d97706;
}

.svc-webdesign__content .svc-webdesign__cta:hover::after,
.svc-webdesign__content .svc-webdesign__cta:focus-visible::after {
  transform: translateX(3px);
}

.svc-webdesign__text + .svc-webdesign__cta { margin-top: 10px; }

/* Base section spacing remains the same; focus on the grid */
.svc-webdesign {
  padding-block: var(--svc-sec-pad-y);
}

/* --- BULLETPROOF TWO-COLUMN GRID --- */
/* Default to single column for very small screens */
.svc-webdesign__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--svc-gap-lg);
  align-items: stretch;          /* both boxes same visual height */
}

/* From tablet upwards, lock into two columns: IMAGE (L) + TEXT (R) */
@media (min-width: 700px) {
  .svc-webdesign__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

/* If other styles elsewhere are forcing stacking, this ensures priority */
.svc-webdesign__grid,
.svc-webdesign__media,
.svc-webdesign__content {
  /* Make sure no rogue widths collapse the grid */
  min-width: 0;
}

/* --- LEFT BOX: IMAGE CONTAINER --- */
.svc-webdesign__media {
  background: var(--svc-surface);
  border: 1px solid var(--svc-border);
  border-radius: var(--svc-radius);
  padding: clamp(10px, 2vw, 16px);
  box-shadow: var(--svc-shadow);
  display: flex;                 /* center/contain image nicely */
  align-items: center;
  justify-content: center;
}

.svc-webdesign__img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--svc-radius) - 4px);
  object-fit: cover;             /* keeps image neat if you set fixed heights later */
}

/* --- RIGHT BOX: TEXT CONTAINER --- */
.svc-webdesign__content {
  display: grid;
  align-content: start;
  gap: 12px;
}

/* Keep paragraph left-aligned; only the heading is centered */
.svc-webdesign__content .svc-webdesign__text {
  text-align: left;
}
/* Reduce top padding of Web Design */
.svc-webdesign {
  padding-block: 40px var(--svc-sec-pad-y); /* top tighter, bottom stays normal */
}

/* ------------------------------
   3) SECTION — AUTOMATION
   ------------------------------ */

/* Section spacing (tighten top only) */
.svc-automation {
  padding-block: 40px var(--svc-sec-pad-y); /* top tighter, bottom normal */
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-top: 1px solid var(--svc-border);
}

/* --- BULLETPROOF TWO-COLUMN GRID --- */
/* Mobile-first: single column */
.svc-automation__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--svc-gap-lg);
  align-items: stretch;
}

/* Tablet+ : TEXT (L) + MEDIA (R) */
@media (min-width: 700px) {
  .svc-automation__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
}

/* Guardrails to prevent rogue widths */
.svc-automation__grid,
.svc-automation__media,
.svc-automation__content {
  min-width: 0;
}

/* --- LEFT BOX: TEXT CONTAINER --- */
.svc-automation__content {
  display: grid;
  align-content: start;
  gap: 12px;
}

/* Center the heading inside the text box + animated underline */
.svc-automation__content .svc-automation__title {
  text-align: center;
  position: relative;
  display: inline-block;
  margin: 0 auto 18px auto;
  padding-bottom: 12px;
  font-size: var(--svc-h2);
}

.svc-automation__content .svc-automation__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb 0%, #f59e0b 50%, #10b981 100%);
  background-size: 200% 100%;
  animation: svc-underline-slide 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .svc-automation__content .svc-automation__title::after {
    animation: none;
  }
}

/* Keep paragraph left-aligned for readability */
.svc-automation__content .svc-automation__text {
  font-size: var(--svc-text);
  line-height: var(--svc-line);
  color: var(--svc-ink-soft);
  margin: 0 0 6px;
  text-align: left;
}

/* CTA as a text link with arrow (not a pill) */
.svc-automation__content .svc-automation__cta {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;

  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  color: #2563eb;
  transition: color 0.15s ease, transform 0.15s ease;
}

.svc-automation__content .svc-automation__cta--orange { color: #f59e0b; }

.svc-automation__content .svc-automation__cta::after {
  content: "→";
  transition: transform 0.15s ease;
}

.svc-automation__content .svc-automation__cta:hover,
.svc-automation__content .svc-automation__cta:focus-visible {
  color: #1d4ed8;
}

.svc-automation__content .svc-automation__cta--orange:hover,
.svc-automation__content .svc-automation__cta--orange:focus-visible {
  color: #d97706;
}

.svc-automation__content .svc-automation__cta:hover::after,
.svc-automation__content .svc-automation__cta:focus-visible::after {
  transform: translateX(3px);
}

.svc-automation__content .svc-automation__text + .svc-automation__cta {
  margin-top: 10px;
}

/* --- RIGHT BOX: IMAGE CONTAINER --- */
.svc-automation__media {
  background: var(--svc-surface);
  border: 1px solid var(--svc-border);
  border-radius: var(--svc-radius);
  padding: clamp(10px, 2vw, 16px);
  box-shadow: var(--svc-shadow);

  display: flex;
  align-items: center;
  justify-content: center;
}

.svc-automation__img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--svc-radius) - 4px);
  object-fit: cover;
}

/* Reuse underline animation keyframes from Section 2 */
@keyframes svc-underline-slide {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Highlighted words in orange for emphasis */
.highlight-orange {
  color: #f59e0b;   /* Tailwind amber-500 / modern orange */
  font-weight: 600; /* subtle bold to catch the eye */
}

/* ------------------------------
   4) SECTION — CLOUD MIGRATION
   ------------------------------ */

/* Section spacing (tighten top only) */
.svc-cloud {
  padding-block: 40px var(--svc-sec-pad-y); /* top tighter, bottom normal */
  background: var(--svc-bg);
  border-top: 1px solid var(--svc-border);
}

/* --- BULLETPROOF TWO-COLUMN GRID --- */
/* Mobile-first: single column */
.svc-cloud__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--svc-gap-lg);
  align-items: stretch;
}

/* Tablet+ : IMAGE (L) + TEXT (R) */
@media (min-width: 700px) {
  .svc-cloud__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

/* Guardrails */
.svc-cloud__grid,
.svc-cloud__media,
.svc-cloud__content {
  min-width: 0;
}

/* --- LEFT BOX: IMAGE CONTAINER --- */
.svc-cloud__media {
  background: var(--svc-surface);
  border: 1px solid var(--svc-border);
  border-radius: var(--svc-radius);
  padding: clamp(10px, 2vw, 16px);
  box-shadow: var(--svc-shadow);

  display: flex;
  align-items: center;
  justify-content: center;
}

.svc-cloud__img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--svc-radius) - 4px);
  object-fit: cover;
}

/* --- RIGHT BOX: TEXT CONTAINER --- */
.svc-cloud__content {
  display: grid;
  align-content: start;
  gap: 12px;
}

/* Center heading + animated underline */
.svc-cloud__content .svc-cloud__title {
  text-align: center;
  position: relative;
  display: inline-block;
  margin: 0 auto 18px auto;
  padding-bottom: 12px;
  font-size: var(--svc-h2);
}

.svc-cloud__content .svc-cloud__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb 0%, #f59e0b 50%, #10b981 100%);
  background-size: 200% 100%;
  animation: svc-underline-slide 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .svc-cloud__content .svc-cloud__title::after {
    animation: none;
  }
}

/* Paragraph stays left-aligned */
.svc-cloud__content .svc-cloud__text {
  font-size: var(--svc-text);
  line-height: var(--svc-line);
  color: var(--svc-ink-soft);
  margin: 0 0 6px;
  text-align: left;
}

/* CTA as text link with arrow */
.svc-cloud__content .svc-cloud__cta {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;

  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  color: #2563eb;
  transition: color 0.15s ease, transform 0.15s ease;
}

.svc-cloud__content .svc-cloud__cta--orange { color: #f59e0b; }

.svc-cloud__content .svc-cloud__cta::after {
  content: "→";
  transition: transform 0.15s ease;
}

.svc-cloud__content .svc-cloud__cta:hover,
.svc-cloud__content .svc-cloud__cta:focus-visible {
  color: #1d4ed8;
}

.svc-cloud__content .svc-cloud__cta--orange:hover,
.svc-cloud__content .svc-cloud__cta--orange:focus-visible {
  color: #d97706;
}

.svc-cloud__content .svc-cloud__cta:hover::after,
.svc-cloud__content .svc-cloud__cta:focus-visible::after {
  transform: translateX(3px);
}

.svc-cloud__content .svc-cloud__text + .svc-cloud__cta {
  margin-top: 10px;
}

/* Reuse underline animation */
@keyframes svc-underline-slide {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ==========================================================
   SECTION 5 — CARE PLANS (mirror of Automation style)
   ========================================================== */

/* Section spacing */
.svc-care {
  padding-block: 30px var(--svc-sec-pad-y); /* tighter top space, bottom normal */
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-top: 1px solid var(--svc-border);
}

/* Grid layout */
.svc-care__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--svc-gap-lg);
  align-items: stretch;

  max-width: var(--svc-maxw);     /* keep inside container */
  margin-inline: auto;
  padding-inline: var(--svc-pad-x);
}

@media (min-width: 700px) {
  .svc-care__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
}

.svc-care__grid,
.svc-care__media,
.svc-care__content {
  min-width: 0;
}

/* Left: Text content */
.svc-care__content {
  display: grid;
  align-content: start;
  gap: 12px;
}

.svc-care__content .svc-care__title {
  text-align: center;
  position: relative;
  display: inline-block;
  margin: 0 auto 18px auto;
  padding-bottom: 12px;
  font-size: var(--svc-h2);
}

.svc-care__content .svc-care__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb 0%, #f59e0b 50%, #10b981 100%);
  background-size: 200% 100%;
  animation: svc-underline-slide 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .svc-care__content .svc-care__title::after {
    animation: none;
  }
}

.svc-care__content .svc-care__text {
  font-size: var(--svc-text);
  line-height: var(--svc-line);
  color: var(--svc-ink-soft);
  margin: 0 0 6px;
  text-align: left;
}

/* CTA as text link */
.svc-care__content .svc-care__cta {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;

  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  color: #2563eb;
  transition: color 0.15s ease, transform 0.15s ease;
}

.svc-care__content .svc-care__cta--orange { color: #f59e0b; }

.svc-care__content .svc-care__cta::after {
  content: "→";
  transition: transform 0.15s ease;
}

.svc-care__content .svc-care__cta:hover,
.svc-care__content .svc-care__cta:focus-visible {
  color: #1d4ed8;
}

.svc-care__content .svc-care__cta--orange:hover,
.svc-care__content .svc-care__cta--orange:focus-visible {
  color: #d97706;
}

.svc-care__content .svc-care__cta:hover::after,
.svc-care__content .svc-care__cta:focus-visible::after {
  transform: translateX(3px);
}

.svc-care__content .svc-care__text + .svc-care__cta {
  margin-top: 10px;
}

/* Right: Media */
.svc-care__media {
  background: var(--svc-surface);
  border: 1px solid var(--svc-border);
  border-radius: var(--svc-radius);
  padding: clamp(10px, 2vw, 16px);
  box-shadow: var(--svc-shadow);
  overflow: hidden; /* fixes image overflow on corners */

  display: flex;
  align-items: center;
  justify-content: center;
}

.svc-care__img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--svc-radius) - 4px);
  object-fit: cover;
}

/* Reuse underline animation */
@keyframes svc-underline-slide {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ------------------------------
   RESPONSIVE BEHAVIOR
   ------------------------------ */
@media (max-width: 960px) {
  .svc-webdesign__grid,
  .svc-automation__grid,
  .svc-cloud__grid {
    grid-template-columns: 1fr;
  }

  /* Keep media near text for context on mobile */
  .svc-webdesign__media,
  .svc-automation__media,
  .svc-cloud__media {
    order: 0;
  }

  /* Maintain section breathing room on tighter viewports */
  :root {
    --svc-sec-pad-y: clamp(32px, 8vw, 64px);
  }
}

/* ------------------------------
   REDUCED MOTION
   ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .svc-hero__cta,
  .svc-webdesign__cta,
  .svc-automation__cta,
  .svc-cloud__cta,
  .svc-care__cta {
    transition: none;
  }
}