/* Nextera Sales: sektioner med foto och film (saljfirma-kanslan). */

/* Hero med film */
.hero.film {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 140px 0 110px;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
}
.hero.film::before, .hero.film::after { display: none; }
.hero.film .film-bg { position: absolute; inset: 0; overflow: hidden; }
.hero.film .film-bg video, .hero.film .film-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero.film .film-bg video.on, .hero.film .film-bg img.on { opacity: 1; }
.hero.film .film-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 18, 34, 0.86) 0%, rgba(11, 18, 34, 0.55) 55%, rgba(11, 18, 34, 0.25) 100%),
    linear-gradient(0deg, var(--ink) 0%, rgba(11, 18, 34, 0) 40%);
}
.hero.film .container { position: relative; display: block; max-width: 1180px; }
.hero.film .hero-copy { max-width: 760px; }
.hero.film h1 { font-size: clamp(2.6rem, 6vw, 5.4rem); letter-spacing: -0.035em; line-height: 1.0; margin-bottom: 22px; }
.hero.film h1 .line { overflow: hidden; display: block; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero.film .lead { font-size: 1.22rem; max-width: 620px; }
.hero.film .hero-intro { opacity: 0; }
html.no-gsap .hero.film .hero-intro, html.enkel .hero.film .hero-intro { opacity: 1; }
.hero.film .hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.hero.film .hero-tags span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18);
  font-weight: 600; font-size: 0.95rem;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero.film .hero-tags span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
@media (max-width: 900px) {
  .hero.film { padding: 120px 0 80px; min-height: 92svh; }
  .hero.film .film-shade { background: linear-gradient(0deg, var(--ink) 0%, rgba(11, 18, 34, 0.55) 60%, rgba(11, 18, 34, 0.35) 100%); }
}

/* Formansremsa */
.perk-strip { background: var(--amber); color: var(--ink); }
.perk-strip ul { list-style: none; margin: 0; padding: 18px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.perk-strip li { display: flex; align-items: center; gap: 12px; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.perk-strip li svg { width: 24px; height: 24px; flex: none; }
@media (max-width: 900px) { .perk-strip ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .perk-strip ul { grid-template-columns: 1fr; gap: 10px; } }

/* Foto i tva kolumner */
.photo {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3.2;
  background: var(--ink-2);
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); }
.photo .tag {
  position: absolute; left: 18px; bottom: 18px;
  background: rgba(11, 18, 34, 0.8); color: var(--white);
  padding: 10px 14px; border-radius: 12px;
  font-weight: 600; font-size: 0.9rem;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.photo.tall { aspect-ratio: 4 / 4.4; }
.photo.wide { aspect-ratio: 16 / 9; }

/* Bildgalleri fran jobbet */
.mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 180px;
  gap: 14px;
}
.mosaic .m { position: relative; border-radius: 20px; overflow: hidden; background: var(--ink-2); }
.mosaic .m img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.mosaic .m:hover img { transform: scale(1.05); }
.mosaic .m span {
  position: absolute; left: 14px; bottom: 14px;
  background: rgba(11, 18, 34, 0.78); color: var(--white);
  padding: 7px 11px; border-radius: 10px;
  font-weight: 600; font-size: 0.85rem;
}
.mosaic .m.c6 { grid-column: span 6; }
.mosaic .m.c4 { grid-column: span 4; }
.mosaic .m.c3 { grid-column: span 3; }
.mosaic .m.c8 { grid-column: span 8; }
.mosaic .m.r2 { grid-row: span 2; }
@media (max-width: 900px) {
  .mosaic { grid-auto-rows: 150px; }
  .mosaic .m.c6, .mosaic .m.c4, .mosaic .m.c3, .mosaic .m.c8 { grid-column: span 6; }
  .mosaic .m.r2 { grid-row: span 1; }
}
@media (max-width: 520px) {
  .mosaic { grid-auto-rows: 170px; gap: 10px; }
  .mosaic .m.c6, .mosaic .m.c4, .mosaic .m.c3, .mosaic .m.c8 { grid-column: span 12; }
}

/* Numrerade kort */
.numbered { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ncard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 32px 30px;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}
.ncard .num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 4rem;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--blue-soft);
  margin-bottom: 10px;
}
.ncard h3 { font-size: 1.35rem; margin-bottom: 10px; }
.ncard p { color: var(--muted); margin: 0 0 auto; }
.ncard .btn { align-self: flex-start; margin-top: 24px; }
@media (max-width: 900px) { .numbered { grid-template-columns: 1fr; } }

/* Fotohero pa undersidor */
.page-hero.photo-hero { padding: 150px 0 90px; min-height: 60vh; display: flex; align-items: flex-end; }
.page-hero.photo-hero::before { display: none; }
.page-hero.photo-hero .bg { position: absolute; inset: 0; }
.page-hero.photo-hero .bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-hero.photo-hero .bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11, 18, 34, 0.95) 0%, rgba(11, 18, 34, 0.55) 55%, rgba(11, 18, 34, 0.35) 100%);
}
.page-hero.photo-hero .container { position: relative; }
@media (max-width: 900px) { .page-hero.photo-hero { padding: 130px 0 60px; min-height: 50vh; } }

/* Ansokan utan CV */
.apply { background: var(--ink); color: var(--white); }
.apply .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.apply .wrap > div:first-child p { color: rgba(255, 255, 255, 0.75); font-size: 1.1rem; }
.apply .form { background: var(--white); color: var(--ink); }
.apply ul.checks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.apply ul.checks li { display: flex; gap: 12px; align-items: flex-start; }
.apply ul.checks svg { width: 22px; height: 22px; color: var(--amber); flex: none; margin-top: 2px; }
@media (max-width: 900px) { .apply .wrap { grid-template-columns: 1fr; gap: 30px; } }

/* Rollkort med foto */
.role.with-photo { padding: 0; overflow: hidden; }
.role.with-photo .rp { aspect-ratio: 16 / 10; overflow: hidden; }
.role.with-photo .rp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.role.with-photo .rb { padding: 24px 26px 28px; display: grid; gap: 12px; }

/* Citatremsa (vad vi lovar varandra) */
.promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.promise .p { padding: 28px; border-radius: 22px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.promise .p b { display: block; font-family: var(--font-head); font-size: 1.15rem; margin-bottom: 8px; }
.promise .p span { color: rgba(255, 255, 255, 0.72); }
@media (max-width: 900px) { .promise { grid-template-columns: 1fr; } }

/* Lugnare lage: kortare rubriker i split-sektioner */
.split h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }

/* Nyckeltal */
.stats { background: var(--ink); color: var(--white); padding: 70px 0; border-bottom: 1px solid var(--line-dark); }
.stats ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.stats li { padding: 0 22px 0 0; border-left: 2px solid rgba(255, 176, 32, 0.6); padding-left: 20px; }
.stats .k { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.8rem, 2.6vw, 2.6rem); letter-spacing: -0.04em; line-height: 1; color: var(--white); margin-bottom: 10px; white-space: nowrap; }
.stats .k small { font-size: 0.5em; letter-spacing: 0; margin-left: 4px; color: var(--amber); }
.stats p { margin: 0; color: rgba(255, 255, 255, 0.72); font-size: 0.97rem; line-height: 1.45; }
@media (max-width: 1000px) { .stats ul { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .stats { padding: 50px 0; } .stats ul { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; } }

/* Varumarken och partners som ordmarken */
.wall { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.wall span {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  letter-spacing: -0.02em;
  padding: 12px 20px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  opacity: 0.9;
}
.wall.big span { font-size: clamp(1.2rem, 2vw, 1.7rem); padding: 14px 24px; }
.section.dark .wall span { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); color: var(--white); }
.wall-note { margin-top: 18px; color: var(--muted); font-size: 0.95rem; }
.section.dark .wall-note { color: rgba(255, 255, 255, 0.6); }

/* Citat */
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.quotes.three { grid-template-columns: repeat(3, 1fr); }
.quote-card { background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 30px 28px; position: relative; }
.quote-card::before { content: "\201D"; position: absolute; right: 24px; top: 6px; font-family: var(--font-head); font-size: 5rem; line-height: 1; color: var(--blue-soft); }
.quote-card p { font-size: 1.12rem; line-height: 1.5; margin: 0 0 18px; position: relative; }
.quote-card footer { display: flex; align-items: center; gap: 12px; font-size: 0.95rem; color: var(--muted); }
.quote-card footer b { color: var(--ink); display: block; }
.quote-card .avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-family: var(--font-head); color: var(--white); background: linear-gradient(135deg, var(--blue), var(--cyan)); flex: none; }
.quote-card .avatar.amber { background: linear-gradient(135deg, var(--amber), #ff7a3d); color: var(--ink); }
.section.dark .quote-card { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); color: var(--white); }
.section.dark .quote-card::before { color: rgba(255, 255, 255, 0.1); }
.section.dark .quote-card footer { color: rgba(255, 255, 255, 0.65); }
.section.dark .quote-card footer b { color: var(--white); }
@media (max-width: 900px) { .quotes, .quotes.three { grid-template-columns: 1fr; } }

/* Tidslinje */
.timeline { position: relative; display: grid; gap: 22px; padding-left: 36px; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--blue), var(--cyan)); }
.timeline .t { position: relative; }
.timeline .t::before { content: ""; position: absolute; left: -33px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px var(--white); }
.timeline .y { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--blue); }
.timeline h3 { font-size: 1.15rem; margin: 2px 0 6px; }
.timeline p { margin: 0; color: var(--muted); }

/* Jobblistan */
.jobb-filter { display: grid; gap: 18px; margin-bottom: 30px; }
.jobb-filter .rad { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jobb-filter .rad b { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.jobb-filter input[type=search] { font: inherit; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 999px; width: min(420px, 100%); background: var(--white); }
.jobb-filter input[type=search]:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.15); }
.chip { font: inherit; font-weight: 600; font-size: 0.92rem; padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer; }
.chip.on { background: var(--ink); color: var(--white); border-color: var(--ink); }
.jobb-antal { color: var(--muted); font-weight: 600; margin-bottom: 14px; }
.jobb-lista { display: grid; gap: 14px; }
.jobb-rad {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 24px 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.jobb-rad:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: #cfd8ee; }
.jobb-rad h3 { font-size: 1.2rem; margin-bottom: 6px; }
.jobb-rad p { margin: 0; color: var(--muted); font-size: 0.95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jobb-rad .meta { display: flex; flex-wrap: wrap; gap: 8px; }
.jobb-rad .meta span { font-size: 0.82rem; font-weight: 600; padding: 6px 10px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-deep); }
.jobb-rad .pil { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--white); display: grid; place-items: center; }
.jobb-rad .pil svg { width: 20px; height: 20px; }
.jobb-tom { padding: 30px; border-radius: 16px; background: var(--paper); color: var(--muted); }
@media (max-width: 800px) { .jobb-rad { grid-template-columns: 1fr; } .jobb-rad .pil { display: none; } }

/* Annonsen */
.annons-hero { background: var(--ink); color: var(--white); padding: 150px 0 60px; position: relative; overflow: hidden; }
.annons-hero::before { content: ""; position: absolute; width: 600px; height: 600px; left: -180px; top: -300px; border-radius: 50%; filter: blur(90px); background: radial-gradient(circle, rgba(47, 107, 255, 0.5), transparent 65%); }
.annons-hero .container { position: relative; }
.annons-hero h1 { font-size: clamp(2rem, 4.4vw, 3.6rem); max-width: 860px; }
.annons-hero .meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.annons-hero .meta span { font-size: 0.88rem; font-weight: 600; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); }
.annons-hero .tillbaka { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.7); font-weight: 600; margin-bottom: 22px; }
.annons-hero .tillbaka svg { width: 18px; height: 18px; }
.annons { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: start; padding: 70px 0 90px; }
.annons .text { font-size: 1.06rem; }
.annons .text .ingress { font-size: 1.25rem; font-weight: 500; color: var(--ink); }
.annons .text h2 { font-size: 1.5rem; margin-top: 1.8em; }
.annons .text p { color: #2b3346; }
.annons ul.checks { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.annons ul.checks li { display: flex; gap: 12px; align-items: flex-start; }
.annons ul.checks svg { width: 22px; height: 22px; color: var(--blue); flex: none; margin-top: 2px; }
.annons .fakta { display: grid; gap: 12px; margin: 26px 0 0; padding: 20px 22px; border-radius: 16px; background: var(--paper); font-size: 0.98rem; }
.annons .fakta b { display: block; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.annons .sidan { position: sticky; top: 100px; }
.annons .sidan .form { box-shadow: var(--shadow); }
.annons .sidan h2 { font-size: 1.4rem; margin-bottom: 6px; }
.annons .sidan .sub { color: var(--muted); margin-bottom: 20px; }
.form .fel { display: none; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #fff0f0; color: #a3261e; font-weight: 500; }
.form .fel.show { display: block; }
.field input[type=file] { padding: 10px 0; border: 0; }
.annons-dela { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.annons-dela a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--line); font-weight: 600; font-size: 0.9rem; }
[data-jobbannons]:not(.laddad) .annons { opacity: 0.4; }
@media (max-width: 900px) { .annons { grid-template-columns: 1fr; gap: 36px; padding: 50px 0 70px; } .annons .sidan { position: static; } .annons-hero { padding: 120px 0 44px; } }

/* Utmarkelser */
.badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.badges span { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: var(--amber-soft); color: var(--ink); font-weight: 600; font-size: 0.93rem; }
.badges span svg { width: 18px; height: 18px; color: var(--amber); }
.section.dark .badges span, .hero .badges span { background: rgba(255, 176, 32, 0.16); color: var(--white); }