/* ===================================================================
   Redesigned footer — the ONLY place this project deliberately departs
   from the .NET markup. Everything uses `sp-footer-*` class names, so the
   original .footerSwarajpost rules in globals.css are untouched and the old
   footer can be restored by swapping the component back.

   Design intent (news portal, Hindi-first audience):
     - Trust first. A news brand lives on credibility, so the masthead
       tagline, a real street address and a real phone number are given
       prominence rather than buried.
     - Scannable columns. Readers arrive at a footer to jump somewhere, so
       sections are short, labelled, and typographically quiet.
     - Brand recall. The red accent (var(--sp-accent)) appears exactly three times:
       the top rule, the section-label underline, and link hover.
     - Restraint. One accent colour, one weight jump, generous rhythm.
   =================================================================== */

.sp-footer {
  --sp-bg: #04182a;
  --sp-bg-2: #061f34;
  --sp-line: rgba(255, 255, 255, 0.09);
  --sp-text: #c7d3de;
  --sp-muted: #8fa3b4;
  --sp-accent: var(--sp-accent);

  margin-top: 56px;
  background: linear-gradient(180deg, var(--sp-bg-2) 0%, var(--sp-bg) 100%);
  color: var(--sp-text);
  font-size: 15px;
  line-height: 1.65;
}

/* Brand rule across the very top — first thing the eye lands on. */
.sp-footer::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--sp-accent) 0%, #ff6a3d 45%, transparent 100%);
}

/* brand · खबरें · क्षेत्र · लाइफस्टाइल · संपर्क.
   Was `1.6fr 1fr 1fr 1.3fr` for four columns; the section links are now split
   across three (see the note in components/Footer.tsx). The link columns are
   under 1fr because their longest labels — "उत्तर प्रदेश", "ऑटो गैजेट्स" — still
   fit on one line at this width, so the space is better spent on the brand
   blurb and the postal address, which genuinely wrap. The gap tightens to 34px
   to buy back what the extra column costs. */
.sp-footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 0.85fr 0.95fr 0.95fr 1.25fr;
  gap: 34px;
  padding: 46px 0 34px;
}

/* ---------------- brand column ---------------- */
.sp-footer-brand img {
  height: 46px;
  width: auto;
  margin-bottom: 14px;
}

.sp-footer-tagline {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin: 0 0 8px;
}

.sp-footer-about {
  color: var(--sp-muted);
  font-size: 14px;
  margin: 0 0 20px;
  max-width: 34ch;
}

/* ---------------- section headings ---------------- */
.sp-footer-col h3 {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin: 0 0 16px;
  padding-bottom: 9px;
  position: relative;
}

.sp-footer-col h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  background: var(--sp-accent);
}

/* ---------------- link lists ---------------- */
.sp-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.sp-footer-links a {
  color: var(--sp-text);
  text-decoration: none;
  font-size: 14.5px;
  display: inline-block;
  transition: color 0.2s ease, transform 0.2s ease;
}

.sp-footer-links a:hover {
  color: #fff;
  transform: translateX(4px);
}

/* अर्थ-व्यापार — a premium gradient pill with a graph-up glyph and a soft glow,
   so it stands out from the plain links (and is a step above the header's flat
   pill). The glyph is masked so it inherits the white foreground. */
.sp-footer-links a.sp-footer-pill {
  --sp-pill-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M0 0h1v15h15v1H0zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E");
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 13px;
  background: linear-gradient(135deg, #ff315a 0%, #d1002f 55%, #a8002a 100%);
  color: #fff;
  font-weight: 700;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(217, 0, 40, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sp-footer-links a.sp-footer-pill::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: #fff;
  -webkit-mask: var(--sp-pill-ico) center / contain no-repeat;
  mask: var(--sp-pill-ico) center / contain no-repeat;
}

/* top gloss */
.sp-footer-links a.sp-footer-pill::after {
  content: "";
  position: absolute;
  inset: 0 0 45% 0;
  background: linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.sp-footer-links a.sp-footer-pill:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 9px 22px rgba(217, 0, 40, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ---------------- contact ---------------- */
.sp-footer-contact {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.sp-footer-contact li {
  display: flex;
  gap: 10px;
  /* center so the single-line phone/YouTube icons sit level with their text,
     not stuck to the top. The multi-line address gets a centred pin. */
  align-items: center;
  color: var(--sp-muted);
  font-size: 14px;
}

.sp-footer-contact svg {
  flex: 0 0 auto;
  color: var(--sp-accent);
}

.sp-footer-contact a {
  color: var(--sp-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.sp-footer-contact a:hover {
  color: #fff;
}

/* ---------------- social ---------------- */
.sp-footer-social {
  display: flex;
  gap: 10px;
}

.sp-footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--sp-line);
  transition: background 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

.sp-footer-social a:hover {
  transform: translateY(-3px);
  border-color: transparent;
}

.sp-footer-social a.is-fb:hover {
  background: #1877f2;
}

.sp-footer-social a.is-x:hover {
  background: #000;
}

.sp-footer-social a.is-yt:hover {
  background: #ff0000;
}

/* ---------------- bottom bar ---------------- */
.sp-footer-bottom {
  border-top: 1px solid var(--sp-line);
}

.sp-footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 0;
  font-size: 13.5px;
  color: var(--sp-muted);
}

.sp-footer-bottom-inner a {
  color: #dbe5ee;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.sp-footer-bottom-inner a:hover {
  color: var(--sp-accent);
}

/* ---------------- responsive ---------------- */
@media (max-width: 991px) {
  .sp-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 38px 0 28px;
  }

  .sp-footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 575px) {
  /* Keep the short link lists side by side. Stacking every block made the
     footer 1044px tall on a 412px phone — a lot of thumb travel for links that
     are only four or five items each. */
  .sp-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 26px 18px;
  }

  .sp-footer-brand,
  .sp-footer-col-contact,
  /* Third of three section columns: in a 2-up grid it would otherwise sit
     alone next to an empty cell. Spanning the row and splitting its own links
     into two costs no extra height and leaves no hole. */
  .sp-footer-col-wide {
    grid-column: 1 / -1;
  }

  /* NOT `columns: 2` — .sp-footer-links is a grid container, and CSS
     multi-column has no effect on one. Splitting the track does the same job
     and keeps the existing 9px row gap intact. */
  .sp-footer-col-wide .sp-footer-links {
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
  }

  .sp-footer-about {
    max-width: none;
  }

  .sp-footer-bottom-inner {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
}

/* Same off-screen rendering skip as the category rows (see the long note at
   the end of app/home.css). The footer is 918px tall on a 412px phone and is
   never in the first viewport on any page, so its style/layout/paint can wait
   until the reader scrolls to it. `auto` in contain-intrinsic-size means the
   real height replaces the guess after the first render, so nothing jumps. */
.sp-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 918px;
}