/*
 * service-pages-extra.css
 * POTENDEO TECHNOLOGIES THEME
 * Additions for service pages (/[service]/[city])
 * e.g. /website-development/ranchi, /seo-services/patna
 *
 * REQUIRES: city-services-pages.css loaded FIRST (base layer)
 * Loaded automatically by functions.php for service templates
 *
 * This file contains ONLY classes unique to service pages
 * that do not exist in city-services-pages.css
 */

/* ═══════════════════════════════════════════
   HERO — service page extras
═══════════════════════════════════════════ */

.hero-hindi {
  display: block;
  font-size: clamp(13px, 2vw, 20px);
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 10px;
}

.hero-price {
  font-size: 15px;
  color: var(--muted);
  margin: 10px 0 18px;
}

/* hero-stats — alias for city-stats (service pages use different name) */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* hero-txt — wrapping div for hero text column */
.hero-txt { max-width: 600px; }

/* has-card — hero layout modifier (2-col with stat card) */
.has-card { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .has-card { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════
   PROBLEM SECTION
   (unique to service pages)
═══════════════════════════════════════════ */

.prob-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 36px;
}

.prob-card {
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  padding: 26px 22px;
  transition: all var(--ease);
  position: relative;
  overflow: hidden;
}

.prob-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #e05252, #e8a020);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ease);
}

.prob-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.prob-card:hover::before { transform: scaleX(1); }

.prob-ico { font-size: 28px; display: block; margin-bottom: 12px; }
.prob-h   { font-size: 15px; font-weight: 700; color: var(--h); margin-bottom: 8px; }
.prob-p   { font-size: 13px; color: var(--p); line-height: 1.68; }

/* ═══════════════════════════════════════════
   SOLUTION SECTION
   (service pages use sol-* — city-services uses wr-*)
═══════════════════════════════════════════ */

.sol-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 36px;
}

.sol-pt {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  padding: 24px;
  transition: all var(--ease);
}

.sol-pt:hover { transform: translateY(-2px); box-shadow: var(--sh); }

.sol-pt-ico {
  width: 44px;
  height: 44px;
  border-radius: var(--r);
  background: rgba(65,105,225,.08);
  border: 1px solid rgba(65,105,225,.18);
  display: grid;
  place-items: center;
  font-size: 20px;
  flex-shrink: 0;
}

.sol-pt-h { font-size: 15px; font-weight: 700; color: var(--h); margin-bottom: 6px; }
.sol-pt-p { font-size: 13px; color: var(--p); line-height: 1.65; }

/* ═══════════════════════════════════════════
   USE CASES SECTION
   (unique to service pages)
═══════════════════════════════════════════ */

.uc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 36px;
}

.uc-card {
  border-radius: var(--r-lg);
  padding: 28px;
  color: #fff;
  position: relative;
  overflow: hidden;
  background: var(--uc-bg, var(--grad-b));
  display: flex;
  flex-direction: column;
}

/* Each use-case card gets its own gradient */
.uc-grid .uc-card:nth-child(1) { --uc-bg: linear-gradient(135deg, #1a237e, #4169e1); }
.uc-grid .uc-card:nth-child(2) { --uc-bg: linear-gradient(135deg, #006064, #00b894); }
.uc-grid .uc-card:nth-child(3) { --uc-bg: linear-gradient(135deg, #4a148c, #6c3fc7); }
.uc-grid .uc-card:nth-child(4) { --uc-bg: linear-gradient(135deg, #b71c1c, #e05252); }
.uc-grid .uc-card:nth-child(5) { --uc-bg: linear-gradient(135deg, #0d47a1, #1976d2); }
.uc-grid .uc-card:nth-child(6) { --uc-bg: linear-gradient(135deg, #1b5e20, #00b894); }

.uc-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 8px;
}

.uc-ico  { font-size: 28px; display: block; margin-bottom: 10px; }
.uc-h    { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.uc-p    { font-size: 13.5px; line-height: 1.68; opacity: .9; margin-bottom: 14px; flex: 1; }
.uc-name { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.uc-desc { font-size: 13px; line-height: 1.65; opacity: .85; flex: 1; }

.uc-result {
  font-size: 12.5px;
  background: rgba(0,0,0,.2);
  border-radius: 8px;
  padding: 10px 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.9);
  margin-top: auto;
}

/* ═══════════════════════════════════════════
   PACKAGE CARDS
   (service pages use pkg-* — city-services uses pp-*)
═══════════════════════════════════════════ */

.pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 36px;
}

.pkg-card {
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all var(--ease);
  overflow: hidden;
}

.pkg-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-b);
  opacity: 0;
  transition: opacity var(--ease);
}

.pkg-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.pkg-card:hover::before { opacity: 1; }

.pkg-card.pop {
  background: linear-gradient(135deg, rgba(65,105,225,.07), rgba(108,63,199,.07));
  border-color: rgba(65,105,225,.35);
  box-shadow: 0 0 0 1px rgba(65,105,225,.12), var(--sh-lg);
}

.pkg-card.pop::before { opacity: 1; }

[data-theme="dark"] .pkg-card.pop {
  background: linear-gradient(135deg, rgba(65,105,225,.10), rgba(108,63,199,.10));
}

.pkg-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  background: var(--bg2);
  color: var(--muted);
  border: 1px solid var(--bdr);
  padding: 3px 14px;
  border-radius: 100px;
  white-space: nowrap;
}

.pkg-ico   { font-size: 32px; display: block; margin-bottom: 12px; }
.pkg-name  { font-size: 18px; font-weight: 800; color: var(--h); margin-bottom: 4px; }
.pkg-price { font-size: 32px; font-weight: 800; color: var(--h); margin-bottom: 6px; line-height: 1; }
.pkg-type  { font-size: 12px; color: var(--muted); margin-bottom: 16px; line-height: 1.4; }
.pkg-desc  { font-size: 13px; color: var(--p); line-height: 1.6; margin-bottom: 14px; }

.pkg-feats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  flex: 1;
}

.pkg-feats li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--p);
  list-style: none;
}

.pkg-feats li::before {
  content: '✓';
  color: var(--teal);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.pkg-cta {
  margin-top: auto;
  display: block;
  text-align: center;
}

/* ═══════════════════════════════════════════
   PRICING TABLE
   (service pages use .pt-table wrapper)
═══════════════════════════════════════════ */

.pt-table {
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  overflow: hidden;
  overflow-x: auto;
  margin-top: 36px;
  -webkit-overflow-scrolling: touch;
}

.pt-head {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr 1.5fr 1fr;
  min-width: 680px;
  background: var(--bg3);
  border-bottom: 2px solid var(--bdr);
}

.pt-head > div {
  padding: 13px 16px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.pt-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr 1.5fr 1fr;
  min-width: 680px;
  border-top: 1px solid var(--bdr);
  transition: background var(--ease);
}

.pt-row:hover { background: var(--bg2); }
.pt-row.hl-row { background: rgba(65,105,225,.04); border-left: 3px solid var(--blue); }

.pt-plan {
  padding: 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--h);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pt-plan small {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--muted);
}

.pt-price {
  padding: 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--blue);
  display: flex;
  align-items: center;
}

[data-theme="dark"] .pt-price { color: var(--blue2); }

.pt-ai {
  padding: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--h);
  display: flex;
  align-items: center;
}

.pt-who {
  padding: 16px;
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
}

.pt-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 100px;
  background: rgba(65,105,225,.08);
  border: 1px solid rgba(65,105,225,.2);
  color: var(--blue);
  margin-top: 4px;
  letter-spacing: .04em;
  align-self: flex-start;
}

/* ═══════════════════════════════════════════
   CTA SECTION — service page overrides
   (city-services uses 2-col cta-box layout,
    service pages use simpler centered layout)
═══════════════════════════════════════════ */

section#cta-main .cta-inner {
  grid-template-columns: 1fr;
  gap: 0;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.cta-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}

.cta-form { margin-top: 20px; }

.cta-inp {
  padding: 11px 16px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 14px;
  min-width: 180px;
  outline: none;
  font-family: var(--ff);
}

.cta-inp::placeholder { color: rgba(255,255,255,.5); }
.cta-inp:focus { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.15); }

.btn-white {
  background: #fff;
  color: var(--blue);
  border: 2px solid rgba(255,255,255,.8);
}

.btn-white:hover { background: rgba(255,255,255,.9); transform: translateY(-2px); }

.btn-ghost-white {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.35);
}

.btn-ghost-white:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }

/* ═══════════════════════════════════════════
   INDUSTRY CARDS — service page variant
   (service pages use ind-card-link wrapper)
   Pattern A: ind-card-link > ind-card (SEO, AI Agents, etc.)
   Pattern B: ind-card-link is the card itself (Website Dev)
   Both patterns must look identical.
═══════════════════════════════════════════ */

.ind-card-link {
  display: block;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  transition: var(--ease);
  position: relative;
  overflow: hidden;
}

.ind-card-link::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ind-grad, var(--grad-b));
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--ease);
}

.ind-card-link:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: var(--bdr2);
}

.ind-card-link:hover::before { transform: scaleX(1); }

/* When ind-card-link wraps an inner ind-card (Pattern A),
   make the inner card transparent so we don't get double styling */
.ind-card-link > .ind-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  overflow: visible;
}

.ind-card-link > .ind-card::before { display: none; }
.ind-card-link > .ind-card:hover { transform: none; box-shadow: none; }

.ind-cta {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blue);
  margin-top: auto;
  transition: var(--ease);
}

[data-theme="dark"] .ind-cta { color: var(--blue2); }
.ind-card-link:hover .ind-cta { gap: 6px; color: var(--purple); }

/* ind-desc alias for ind-card-desc */
.ind-desc { font-size: 13px; color: var(--p); line-height: 1.68; margin-bottom: 12px; }

/* tool-item inside ind-tools (service page style — smaller pill) */
.ind-tools { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.ind-tools .tool-item {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--bg2);
  border: 1px solid var(--bdr);
  color: var(--p);
  display: inline-flex;
  align-items: center;
  gap: 0;
}

/* ind-arrow alias */
.ind-arrow { font-size: 12px; font-weight: 600; color: var(--blue); }

/* ═══════════════════════════════════════════
   LINK CLUSTER — service page variant
═══════════════════════════════════════════ */

.lc-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

/* ═══════════════════════════════════════════
   TESTIMONIALS — service page variant
   (service pages may use test-* instead of testi-*)
═══════════════════════════════════════════ */

.test-hd { text-align: center; margin-bottom: 48px; }

.test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.test-c {
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: var(--ease);
}

.test-c:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--bdr2); }

.test-stars { color: var(--gold); font-size: 14px; margin-bottom: 12px; }

.test-q {
  font-size: 13.5px;
  color: var(--p);
  line-height: 1.72;
  margin-bottom: 18px;
  font-style: italic;
}

.test-q::before { content: '"'; color: var(--blue); font-size: 20px; line-height: 1; }

.test-author { display: flex; align-items: center; gap: 10px; }

.test-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--grad-b);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.test-name { font-size: 13px; font-weight: 700; color: var(--h); }
.test-biz  { font-size: 11px; color: var(--muted); }

.test-result {
  margin-top: 14px;
  background: rgba(0,184,148,.06);
  border: 1px solid rgba(0,184,148,.18);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--teal);
  font-weight: 600;
}

/* ═══════════════════════════════════════════
   BREADCRUMB ALIASES
   (some service pages use different class names)
═══════════════════════════════════════════ */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
}

.breadcrumb a { color: var(--muted); text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: var(--blue); }

.bc-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
  max-width: 100%;
}

/* ═══════════════════════════════════════════
   RESPONSIVE — service-page-specific classes
   (city-services responsive is in city-services-pages.css)
═══════════════════════════════════════════ */

@media (max-width: 1024px) {
  .prob-grid  { grid-template-columns: repeat(2, 1fr); }
  .pkg-grid   { grid-template-columns: repeat(2, 1fr); }
  .uc-grid    { grid-template-columns: 1fr; }
  .sol-grid   { grid-template-columns: 1fr; }
  .test-grid  { grid-template-columns: repeat(2, 1fr); }
  .pt-head, .pt-row { grid-template-columns: 2fr 1fr 1.5fr 1.5fr; min-width: 580px; }
  .pt-head > div:last-child,
  .pt-row > div:last-child { display: none; }
}

@media (max-width: 768px) {
  .prob-grid  { grid-template-columns: 1fr; }
  .pkg-grid   { grid-template-columns: 1fr; }
  .test-grid  { grid-template-columns: 1fr; }
  .pt-table   { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cta-inp    { min-width: 140px; }
  section#cta-main .cta-btns { flex-direction: column; align-items: center; }
}

@media (max-width: 480px) {
  .pkg-card  { padding: 22px 18px; }
  .prob-card { padding: 20px 16px; }
  .uc-card   { padding: 22px 18px; }
}