/* ============================================
   ISHELLA 2.5 — Farena (sideunik) — lysere mint-forward
   Forutsetter at ishella-core.css er lastet først.
   Importerer hub-CSS for delte komponenter og
   overrider kun det Farena trenger annerledes.
   ============================================ */
@import url("kunstgressbaner-ishella-2.5.css");

/* ============================================
   HERO — Farena beholder rød hint i bakgrunnen,
   men lysere overall + mint-glow i panel-kanter
   ============================================ */
.fa-hero.is25-hero::before {
  background-image: url("https://www.isbaneteknikk.no/wp-content/uploads/konnerud-kunstgress-undervarme-2025-09.jpg");
  filter: brightness(0.42) saturate(1.10) contrast(1.05);
}
.fa-hero.is25-hero::after {
  background:
    radial-gradient(ellipse 58% 68% at 18% 50%, rgba(7,37,26,.78) 0%, transparent 60%),
    radial-gradient(ellipse 58% 68% at 88% 28%, rgba(108,240,189,.30) 0%, transparent 65%),
    radial-gradient(ellipse 52% 52% at 12% 88%, rgba(165,228,251,.22) 0%, transparent 70%),
    radial-gradient(ellipse 38% 36% at 78% 84%, rgba(192,247,218,.20) 0%, transparent 70%),
    linear-gradient(135deg, rgba(7,37,26,.74) 0%, rgba(13,52,36,.32) 55%, rgba(7,37,26,.62) 100%);
}

/* Hero h1 accent — ren mint/ice-gradient (rød fjernet) */
.fa-hero h1 .accent {
  background: linear-gradient(135deg, #f0fdf5 0%, var(--is25-green-pale) 32%, var(--is25-green-bright) 65%, var(--is25-ice-bright) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 38px rgba(108,240,189,.55));
  animation: is25-glow-pulse 4.8s ease-in-out infinite;
}

/* Hero panel kantfarger — mint/ice-balanse (uten rød) */
.fa-hero .is25-hero-panel {
  border-color: rgba(165,228,251,.32);
  box-shadow: var(--is25-shadow-lg),
              0 0 60px rgba(108,240,189,.20),
              0 0 80px rgba(165,228,251,.14),
              inset 0 1px 0 rgba(216,240,253,.16);
}
.fa-hero .is25-hero-panel::before {
  background: linear-gradient(135deg,
    rgba(108,240,189,.22) 0%, transparent 30%,
    transparent 70%, rgba(165,228,251,.22) 100%);
}

/* Hero panel-ikoner: Farena bytter rød ikon → mint/ice (alle ikoner blir grønn-tonet) */
.fa-hero .is25-hero-panel-item i.icon-red {
  background: linear-gradient(135deg, rgba(108,240,189,.32) 0%, rgba(165,228,251,.16) 100%) !important;
  color: var(--is25-green-mint) !important;
  border-color: rgba(108,240,189,.42) !important;
  box-shadow: 0 0 18px rgba(108,240,189,.28) inset !important;
}
.fa-hero .is25-hero-panel-item .arrow {
  color: var(--is25-green-bright) !important;
}

/* Lufttettere typografi i Farena — bedre lesbarhet, episk 2026 */
.fa-hero h1 {
  font-size: clamp(2.9rem, 5.6vw, 5.0rem);
  letter-spacing: -.04em;
  line-height: 1.02;
  font-weight: 900;
}
.fa-hero .is25-hero-lede {
  font-size: clamp(1.12rem, 1.4vw, 1.32rem);
  line-height: 1.68;
  max-width: 54ch;
  color: rgba(244,251,246,.94);
  font-weight: 400;
}

/* Hero-eyebrow på Farena — litt større, mer luft */
.fa-hero .is25-eyebrow {
  font-size: .76rem;
  padding: 11px 20px;
  letter-spacing: .15em;
}

/* Hero panel-tittel — mer kontrast og luft */
.fa-hero .is25-hero-panel-head { padding: 26px 30px; }
.fa-hero .is25-hero-panel-head strong { font-size: 1.24rem; }
.fa-hero .is25-hero-panel-head span { font-size: .96rem; margin-top: 8px; }
.fa-hero .is25-hero-panel-list { padding: 12px; }
.fa-hero .is25-hero-panel-item { padding: 16px 18px; }
.fa-hero .is25-hero-panel-item b { font-size: 1.06rem; }
.fa-hero .is25-hero-panel-item small { font-size: .92rem; margin-top: 5px; line-height: 1.45; }

/* Narrative-blokk — mer luft mellom avsnittene + større lesetekst */
.is25-narrative {
  font-size: 1.16rem;
  line-height: 1.82;
  max-width: 880px;
  color: var(--is25-text-muted);
  margin-inline: auto;
}
.is25-narrative p { margin-bottom: 28px; }
.is25-narrative em { color: var(--is25-green-mint); font-style: normal; font-weight: 600; }
.is25-narrative strong { color: #fff; font-weight: 700; }

/* Bridge-variant: glass-skim med mer luft, plassert mellom partner-strip og fagkort */
.is25-narrative--bridge {
  margin-top: clamp(40px, 5vw, 64px);
  margin-bottom: clamp(20px, 3vw, 32px);
  padding: clamp(40px, 5.5vw, 60px) clamp(36px, 5.5vw, 68px);
  background:
    radial-gradient(ellipse 60% 100% at 0% 0%, rgba(108,240,189,.12), transparent 70%),
    radial-gradient(ellipse 60% 100% at 100% 100%, rgba(165,228,251,.10), transparent 70%),
    var(--is25-glass);
  backdrop-filter: var(--is25-blur);
  -webkit-backdrop-filter: var(--is25-blur);
  border: 1px solid var(--is25-glass-edge);
  border-radius: var(--r-xl);
  box-shadow: var(--is25-shadow-md), inset 0 1px 0 rgba(216,240,253,.10);
  font-size: clamp(1.20rem, 1.5vw, 1.36rem);    /* ca. +2-4px større */
  line-height: 1.78;
  color: rgba(244,251,246,.94);
  max-width: 1080px;
}
.is25-narrative--bridge p { margin-bottom: 26px; }
.is25-narrative--bridge p:last-child { margin-bottom: 0; }
.is25-narrative--bridge strong { font-weight: 700; color: #ffffff; }

/* ============================================
   FARENA FAGKORT — overstyr alle rød-detaljer til mint/ice
   (Farena-siden bruker ren ISHELLA-grønn-paletten)
   ============================================ */
/* Isbaneteknikk-kortets tag — fra rød til mint */
.fa-hero ~ * .is25-fagkort--isbat .is25-fagkort-tag {
  background: rgba(108,240,189,.14) !important;
  border-color: rgba(108,240,189,.42) !important;
  color: var(--is25-green-mint) !important;
}
/* Isbaneteknikk-kortets stat-tall — fra rød-gradient til mint */
.fa-hero ~ * .is25-fagkort--isbat .is25-fagkort-stats .ps b {
  background: linear-gradient(135deg, var(--is25-green-bright) 0%, var(--is25-ice-bright) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter: drop-shadow(0 0 14px rgba(108,240,189,.45));
}
/* Hover-glow på alle Farena-fagkort: mint i stedet for rød/blå mix */
.fa-hero ~ * .is25-fagkort:hover {
  border-color: rgba(108,240,189,.45) !important;
  box-shadow:
    var(--is25-shadow-lg),
    0 0 80px rgba(108,240,189,.24),
    0 0 60px rgba(165,228,251,.16) !important;
}
/* Hosle-card-icon (gjelder generisk dekorkort i farena hero panel) — fjern rød */
.fa-hero .is25-hero-panel-item:hover {
  background: rgba(108,240,189,.10) !important;
}

/* Fagkort — bedre rytme, mer pust mellom logo/body/stats */
.is25-fagkort {
  border-radius: 28px;
  background: linear-gradient(165deg, rgba(20,68,48,.62) 0%, rgba(13,52,36,.42) 100%);
  border: 1px solid rgba(192,247,218,.18);
  transition: transform .5s var(--ease-spring),
              border-color .35s var(--ease),
              box-shadow .5s var(--ease);
  position: relative;
  overflow: hidden;
}
.is25-fagkort::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 60% 60% at 0% 0%, rgba(108,240,189,.14), transparent 70%),
    radial-gradient(ellipse 60% 60% at 100% 100%, rgba(165,228,251,.10), transparent 70%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.is25-fagkort:hover::before { opacity: 1; }
.is25-fagkort > * { position: relative; z-index: 1; }
.is25-fagkort:hover {
  transform: translateY(-10px);
  border-color: rgba(108,240,189,.55);
  box-shadow:
    var(--is25-shadow-lg),
    0 0 80px rgba(108,240,189,.28),
    0 0 60px rgba(165,228,251,.18);
}
.is25-fagkort-logo {
  padding: 38px 28px;
  min-height: 168px;
  background: linear-gradient(180deg, #fff 0%, #eef7f2 100%);
}
.is25-fagkort-body { padding: 32px 32px 32px; gap: 0; }
.is25-fagkort h3 {
  font-size: 1.46rem; line-height: 1.22; margin-bottom: 16px;
  letter-spacing: -.014em;
}
.is25-fagkort p {
  font-size: 1.02rem; line-height: 1.7; margin-bottom: 24px;
}
.is25-fagkort-tag {
  font-size: .72rem;
  padding: 7px 14px;
  letter-spacing: .12em;
  margin-bottom: 16px;
}
.is25-fagkort-stats { padding: 20px 0 22px; margin-bottom: 22px; }
.is25-fagkort-stats .ps b { font-size: 1.28rem; }
.is25-fagkort-stats .ps span { font-size: .64rem; margin-top: 6px; }
.is25-fagkort-cta { font-size: 1.02rem; font-weight: 700; }

/* CTA accent på Farena — mint/ice (uten rød) */
.is25-cta h2 .accent {
  background: linear-gradient(135deg, #fff 0%, var(--is25-green-pale) 30%, var(--is25-green-bright) 60%, var(--is25-ice-bright) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 32px rgba(108,240,189,.55));
}

/* Farena CTA — mint-grønn bakgrunn (uten rød) */
.fa-hero ~ .is25-cta {
  background: linear-gradient(135deg, #07251a 0%, #14644a 50%, #0d3a3a 100%);
}
.fa-hero ~ .is25-cta::before {
  background:
    radial-gradient(ellipse 60% 60% at 18% 50%, rgba(108,240,189,.42), transparent 60%),
    radial-gradient(ellipse 50% 70% at 88% 40%, rgba(165,228,251,.32), transparent 65%),
    radial-gradient(ellipse 40% 50% at 50% 100%, rgba(192,247,218,.22), transparent 65%);
}

/* Farena proof-bar: "1 kontrakt" — mint-grønn (uten rød) */
.fa-hero ~ .is25-proof .is25-proof-item:nth-child(1) strong,
.fa-hero ~ * .is25-proof .is25-proof-item:nth-child(1) strong {
  background: var(--is25-grad-green);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 16px rgba(108,240,189,.55));
}

/* Større, mer luftig seksjons-padding på farena-siden for premium-følelse */
.fa-hero ~ .is25-section { padding: clamp(110px, 13vw, 180px) 0; }

/* Section-headers på farena får større tittel og mer pust */
.fa-hero ~ .is25-section .is25-title {
  font-size: clamp(2.4rem, 4.8vw, 4.0rem);
  letter-spacing: -.032em;
}
.fa-hero ~ .is25-section .is25-intro {
  font-size: clamp(1.06rem, 1.32vw, 1.22rem);
  line-height: 1.72;
}

/* Process-bånd — mint-grønn numerering på Farena (uten rød) */
.fa-hero ~ .is25-section .is25-step b,
.fa-hero ~ .is25-section + .is25-section .is25-step b {
  background: var(--is25-grad-green);
  color: #04140c;
  box-shadow: 0 6px 18px rgba(108,240,189,.45),
              inset 0 1px 0 rgba(255,255,255,.45);
}

/* Decision-grid (3-kolonne på Farena: undervarme/vanning/kunstgress + finansiering) */
.fa-hero ~ .is25-section .is25-decision {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
  .fa-hero ~ .is25-section .is25-decision { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .fa-hero ~ .is25-section .is25-decision { grid-template-columns: 1fr; }
}