/* ==========================================================================
   Fiber Nnet — inner-page styles
   Link AFTER style.css. Contains: page hero, about extras, contact page,
   service pages (HSI / Wireless / Cable TV), legal pages.
   NOTE: .steps--light (present in service-page HTML) is intentionally NOT
   styled — those sections sit on light lavender, so dark step text is correct.
   ========================================================================== */

/* ---------- Page hero (purple banner on inner pages) ---------- */
.page-hero {
  background: var(--grad-brand);
  padding: 84px 0;
  text-align: center;
  color: #f0e8fa;
}
.page-hero h1 { color: #fff; font-size: clamp(2.2rem, 4.5vw, 3.2rem); margin-bottom: .25em; }
.page-hero__sub { margin: 0; font-size: 1.15rem; }

/* ---------- About: thumbnail gallery ---------- */
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 30px; }
.thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); }

/* ---------- About: "Why Choose Fiber Nnet?" 4-up cards ---------- */
.why-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.why-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 34px 26px; text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.why-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.why-card .icon-circle { background: var(--purple); color: #fff; margin: 0 auto 16px; }
.why-card h3 { font-size: 1.08rem; }
.why-card p { margin: 0; font-size: .93rem; }

/* ---------- Testimonials / gradient sections (about page) ---------- */
.testi-section { background: var(--grad-brand); color: #fff; padding: 88px 0; }
.testi-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.testi-head .eyebrow { color: rgba(255,255,255,.8); margin: 0; }
.quote-icon { width: 46px; height: 46px; fill: rgba(255,255,255,.9); flex: none; }
.testi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; }
.testi-card {
  background: #fff; color: var(--text); border-radius: var(--r-md);
  padding: 32px; display: grid; grid-template-columns: 1fr 130px; gap: 24px; align-items: center;
}
.testi-card blockquote {
  margin: 0 0 18px; font-size: 1.05rem; font-weight: 600;
  color: var(--ink); line-height: 1.5;
}
.testi-card cite { font-style: normal; }
.testi-card cite b { display: block; color: var(--ink); }
.testi-card cite span { font-size: .9rem; }
.testi-card img { width: 130px; height: 170px; object-fit: cover; border-radius: var(--r-sm); }

/* ---------- Contact page ---------- */
.contact-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.contact-grid h2 { margin-bottom: .5em; }
.contact-illustration img { width: 100%; }

.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
.contact-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 32px 28px; border-radius: var(--r-md);
  background: var(--lavender);
  transition: transform .25s ease, box-shadow .25s ease;
}
.contact-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.contact-card .icon-circle { background: #fff; color: var(--purple); margin-bottom: 14px; }
.contact-card h3 { font-size: 1.12rem; }
.contact-card p { flex: 1; font-size: .95rem; margin-bottom: 18px; }

.info-panel {
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px;
  padding: 44px; border-radius: var(--r-lg); background: var(--lavender);
}
.info-panel .icon-circle { background: #fff; color: var(--purple); }
.info-item { display: flex; gap: 18px; align-items: flex-start; }
.info-item h3 { font-size: 1.1rem; margin-bottom: .2em; }
.info-item p { margin: 0; font-weight: 600; color: var(--ink); }
.info-item a:hover { color: var(--purple); }

.map-section iframe { display: block; width: 100%; height: 420px; border: 0; }

/* FAQ accordion (native <details>, one open at a time via page script) */
.faq-head { text-align: center; margin-bottom: 40px; }
.faq { max-width: 860px; margin: 0 auto; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  margin-bottom: 14px; overflow: hidden;
}
.faq details[open] { border-color: var(--purple); box-shadow: var(--shadow); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 24px;
  font-weight: 700; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { width: 1em; height: 1em; fill: var(--purple); flex: none; transition: transform .2s ease; }
.faq details[open] summary { color: var(--purple); }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq-body { padding: 0 24px 20px; color: var(--text); }
.faq-body p { margin: 0; }

/* ---------- Service pages (High-Speed Internet / Wireless / Cable TV) ---------- */

/* coverage: content left, illustration right */
.coverage-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.coverage-grid h2 { margin-bottom: .5em; }
.coverage-media img { width: 100%; }

/* checklist */
.ticks { margin: 22px 0 28px; }
.ticks li { display: flex; gap: 12px; align-items: center; padding: 7px 0; font-weight: 600; color: var(--ink); }
.ticks svg { width: 20px; height: 20px; fill: var(--purple); flex: none; }

/* feature banner: photo left, content right, lavender panel */
.feature-banner {
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: center;
  background: var(--lavender); border-radius: var(--r-lg); overflow: hidden;
}
.feature-banner > img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.feature-banner .fb-content { padding: 56px 48px; }
.feature-banner h5 { font-size: 1.25rem; }
.feature-banner .btn { margin-top: 14px; }

/* promise section on gradient — explicit light colors, because the base
   h2/p rules in style.css would otherwise override inherited white */
.testi-section h2 { color: #fff; }
.testi-section > .container > p { color: #f0e8fa; margin: 0; }

/* photo CTA tiles */
.cta-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 44px; }
.cta-tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end; aspect-ratio: 4 / 3;
  padding: 26px; border-radius: var(--r-md); color: #fff;
  background-size: cover; background-position: center;
}
.cta-tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(63, 26, 92, .2) 0%, rgba(63, 26, 92, .88) 100%);
  transition: opacity .25s ease;
}
.cta-tile:hover::before { opacity: .92; }
.cta-tile h3 { color: #fff; font-size: 1.2rem; margin-bottom: .25em; }
.cta-tile p { margin: 0; font-size: .93rem; color: #f0e8fa; }

/* duo cards (white, so they read on the gradient) */
.duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.duo-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 44px 40px; border-radius: var(--r-md); background: #fff;
}
.duo-card h4 { font-size: 1.35rem; margin-bottom: 10px; }
.duo-card .btn { margin-top: auto; }

/* ---------- Legal pages (Privacy Policy, Terms of Service) ---------- */
.legal { max-width: 800px; margin: 0 auto; }
.legal h2 { font-size: 1.4rem; margin: 2em 0 .5em; }
.legal ul { margin: 0 0 1em; }
.legal li { position: relative; padding-left: 26px; margin-bottom: .5em; }
.legal li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 10px; height: 10px; border-radius: 50%; background: var(--purple);
}
.legal ol.letters { counter-reset: letter; margin: 0 0 1em; }
.legal ol.letters li::before {
  content: counter(letter, lower-alpha) ")";
  counter-increment: letter;
  background: none; width: auto; height: auto; top: 0;
  font-weight: 700; color: var(--purple);
}
.legal-callout {
  background: var(--lavender); border-left: 4px solid var(--purple);
  border-radius: var(--r-sm); padding: 20px 24px; margin-bottom: 1em;
}
.legal-contact {
  background: var(--lavender); border-radius: var(--r-md);
  padding: 28px 32px; margin-top: 2.2em;
}
.legal-contact h2 { margin-top: 0 !important; }
.legal-contact p { margin: 0; font-weight: 600; color: var(--ink); }
.legal-contact a:hover { color: var(--purple); }
.legal-footer {
  margin-top: 2.5em; padding-top: 1.5em; border-top: 1px solid var(--line);
  font-size: .9rem; color: #8a8398;
}

/* ---------- Include load error ---------- */
.include-error {
  background: #fff3cd; color: #664d03; border: 1px solid #ffe69c;
  padding: 14px 18px; border-radius: var(--r-sm); font-size: .9rem;
}
.include-error code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-cards { grid-template-columns: 1fr; }
  .info-panel { grid-template-columns: 1fr; padding: 32px 24px; }
  .coverage-grid, .feature-banner, .duo-grid { grid-template-columns: 1fr; }
  .feature-banner > img { min-height: 240px; }
  .feature-banner .fb-content { padding: 36px 28px; }
}
@media (max-width: 900px) {
  .testi-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .testi-card { grid-template-columns: 1fr; }
  .testi-card img { width: 100%; height: auto; }
}