/* ==========================================================================
   /payroll-software-in-pune/ — page styles. Loaded by the page itself.
   Layout after a competitor city page the user liked (2026-10-21): centred
   hero over a skyline, split intro, places cards, pain/solution panels, a
   blue banner. Everything here is drawn for this site.
   ========================================================================== */

/* ---- Hero ---- */

.pn-hero {
  position: relative;
  overflow: hidden;
  padding: 140px 0 90px;
  /* Plain white, asked for on 2026-10-21 (was a pale blue fade). */
  background: #FFFFFF;
  text-align: center;
}


.pn-hero__copy {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}

.pn-hero__title {
  margin-top: 22px;
  font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', system-ui, sans-serif;
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -1.2px;
  color: #0B0D12;
  text-wrap: balance;
}

.pn-hero__accent {
  color: #1D6BF3;
}

/* Copy left, Shaniwar Wada right from 1024px; stacked and centred below. */
.pn-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 40px;
  align-items: center;
}

.pn-hero__art {
  justify-self: center;
  width: min(100%, 460px);
}

.pn-hero__art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px;
  /* No shadow (removed 2026-10-21): the watercolour's white edge sits
     straight on the white hero. */
}

@media (min-width: 1024px) {
  .pn-hero { text-align: left; }
  .pn-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; }
  .pn-hero__copy { max-width: none; margin: 0; }
  .pn-hero__lead { margin-left: 0; }
  .pn-hero__cta { justify-content: flex-start; }
  .pn-hero__art { justify-self: end; }

  /* One line ("Payroll Software in Pune"), sized to the copy column. */
  .pn-hero__title { font-size: clamp(40px, 3.9vw, 56px); white-space: nowrap; }
}

.pn-hero__lead {
  max-width: 620px;
  margin: 22px auto 0;
  font-size: 18px;
  line-height: 1.6;
  color: #000000;
}

.pn-hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

@media (max-width: 619px) {
  .pn-hero { padding: 120px 0 70px; }
  .pn-hero__lead { font-size: 16px; }
}

/* ---- About: one centred column of copy ---- */

.pn-about {
  max-width: 820px;
  margin: 40px auto 0;
  text-align: center;
}

.pn-about__copy p {
  font-size: 16.5px;
  line-height: 1.75;
  color: #4A5568;
}

.pn-about__copy p:first-child { font-size: 18px; color: #14161D; }
.pn-about__copy p + p { margin-top: 16px; }

/* ---- Places ---- */

.pn-places {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #EAF1FD 0%, #F3F7FE 100%);
}


.pn-places__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 620px)  { .pn-places__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .pn-places__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1150px) { .pn-places__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.pn-place {
  padding: 24px 20px 26px;
  border-radius: 18px;
  background-color: #FFFFFF;
  box-shadow: 0 16px 34px -26px rgba(21, 82, 199, 0.55);
}

.pn-place__pin {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #EEF4FF;
  color: #1D6BF3;
}

.pn-place__pin svg { width: 22px; height: 22px; }

.pn-place__name {
  margin-top: 16px;
  font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: #14161D;
}

.pn-place__text {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #4A5568;
}

/* ---- Banner: the home page's .integ-card ---- */

/* Full section padding above it again (2026-10-21): it now follows the
   industries rail, not the comparison it used to sit tight under. */

/* No heading ends on a lone word. */
[id^="pn-"] .hs-head__title { text-wrap: balance; }

/* After the base hero rules, so these win at desktop: left-aligned lead and
   buttons beside the fort. */
@media (min-width: 1024px) {
  .pn-hero .pn-hero__lead { margin-left: 0; margin-right: 0; }
  .pn-hero .pn-hero__cta { justify-content: flex-start; }
}

/* "Payroll Software for Pune Businesses" on one line from 1024px: the shared
   .hs-head is 720px wide, which breaks it after "for". */
@media (min-width: 1024px) {
  #pn-about .hs-head { max-width: 1000px; }
  #pn-about .hs-head__title { white-space: nowrap; }
}

/* ---- Places on a dark band (asked for on 2026-10-21) ---- */

.pn-places {
  background:
    radial-gradient(760px 420px at 12% 0%, rgba(37, 99, 235, 0.22) 0%, rgba(37, 99, 235, 0) 68%),
    radial-gradient(640px 380px at 92% 100%, rgba(59, 130, 246, 0.16) 0%, rgba(59, 130, 246, 0) 70%),
    #0B0D12;
}

.pn-places .hs-head__title { color: #FFFFFF; }
.pn-places .hs-head__lead  { color: rgba(255, 255, 255, 0.66); }


.pn-place {
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.pn-place__pin  { background-color: rgba(59, 130, 246, 0.18); color: #7FAEFF; }
.pn-place__name { color: #FFFFFF; }
.pn-place__text { color: rgba(255, 255, 255, 0.68); }

/* "Why it matters" badge over the before/after panels: a blue border. */
#pn-pain .badge {
  border: 1px solid #9CC0F8;
  background-color: #FFFFFF;
  color: #1552C7;
}

/* The one Pune paragraph in three lines on desktop: wide enough to hold
   about a third of it per line. */
@media (min-width: 1024px) {
  .pn-about { max-width: 1060px; }
}

/* A city page with no landmark image yet: centred, one column. */
@media (min-width: 1024px) {
  .pn-hero--solo { text-align: center; }
  .pn-hero--solo .pn-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .pn-hero--solo .pn-hero__copy { max-width: 820px; margin: 0 auto; }
  .pn-hero--solo .pn-hero__lead { margin-left: auto; margin-right: auto; }
  .pn-hero--solo .pn-hero__cta { justify-content: center; }
}

/* ---- Industries slider (sections/pune/industries.php) ---- */

.pn-ind-rail { margin-top: 44px; }

.pn-ind {
  position: relative;
  flex: none;
  width: 250px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 20px;
  background-color: #1B2333;
}

.pn-ind__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.pn-ind:hover .pn-ind__img { transform: scale(1.05); }

.pn-ind__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 13, 18, 0) 45%, rgba(11, 13, 18, 0.78) 100%);
}

.pn-ind__icon {
  position: absolute;
  top: 14px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: #FFFFFF;
}

.pn-ind__icon svg { width: 18px; height: 18px; }

.pn-ind__label {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback', system-ui, sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: none;
}

/* The whole card is the link's target. */
.pn-ind a.pn-ind__label::after { content: ''; position: absolute; inset: -1000px; }

@media (max-width: 619px) { .pn-ind { width: 200px; } }

/* A longer place name: two lines ("Payroll Software" / "in Karnataka"),
   full size, set by .pn-hero__title--long from the hero. */
@media (min-width: 1024px) {
  .pn-hero .pn-hero__title--long { white-space: normal; }
}

/* "Top 5 Places to Visit in Ahmedabad" (and other long names) on one line,
   like the shorter cities: the shared .hs-head is 720px. */
@media (min-width: 1024px) {
  #pn-places .hs-head { max-width: 960px; }
}

/* Banner title in two lines for a long city name (sections/pune/banner.php). */
@media (min-width: 1024px) {
  .integ-title.pn-banner__title--two { white-space: normal; }
}