/* =========================================================
   POLSTEAM – SEA HERO + ICON BAND (poprawki: subheading, gapy, bottom spacing, ikony)
   ========================================================= */

:root{
  --ps-sea-primary: var(--polsteam-primary, #00357d);
  --ps-sea-accent:  var(--polsteam-accent, #dd291b);
  --ps-sea-text: #ffffff;

  --ps-sea-glass: rgba(6, 12, 22, .54);
  --ps-sea-glass-2: rgba(6, 12, 22, .36);
  --ps-sea-line: rgba(255,255,255,.14);
  --ps-sea-line-soft: rgba(255,255,255,.10);

  --ps-sea-radius: 18px;
}

.ps-sea-hero{
  position: relative;
  color: var(--ps-sea-text);
  overflow: hidden;

  /* full screen vibe */
  min-height: clamp(640px, 92vh, 980px);

  /* UWAGA: tło dodajesz sam */
  background: transparent;
}

.ps-sea-hero__overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(0,53,125,.28), transparent 60%),
    radial-gradient(700px 420px at 85% 35%, rgba(221,41,27,.18), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.45) 45%, rgba(0,0,0,.65));
}

.ps-sea-hero__wrap{
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;

  /* ważne: dodajemy dół, żeby następna sekcja nie "kleiła się" do bandu */
  padding: clamp(92px, 8vh, 130px) 0 clamp(24px, 4vh, 54px);
}

.ps-sea-hero__grid{
  display: grid;
  grid-template-rows: 1fr auto;
  gap: clamp(28px, 4vh, 44px);
}

/* CONTENT */

.ps-sea-hero__content{
  max-width: 760px;
	padding-left: 15px;
    padding-right: 15px;
}

.ps-sea-hero__kicker{
  margin: 0 0 10px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .85;
}

.ps-sea-hero__title{
  margin: 0 0 10px;
  font-family: "Teko", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .98;
  font-size: clamp(46px, 5.4vw, 76px);
}

/* SUBHEADING: "Dołącz do nas" */
.ps-sea-hero__sub{
  margin: 0 0 18px;
  font-family: "Teko", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.02;
  font-size: clamp(22px, 2.2vw, 34px);
  color: rgba(255,255,255,.92);
}

.ps-sea-hero__lead{
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255,255,255,.86);
}

.ps-sea-hero__lead p{
  margin: 0 0 14px;
}

.ps-sea-hero__note{
  color: rgba(255,255,255,.92);
}

/* CTA */

.ps-sea-hero__cta{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.ps-sea-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 46px;
  padding: 0 18px;

  border-radius: 999px;
  text-decoration: none;

  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 13px;

  transition: transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
  will-change: transform;
}

.ps-sea-btn--ghost{
  color: #fff;
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}

.ps-sea-btn--ghost:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.42);
}

.ps-sea-btn--primary{
  color: #fff;
  border: 1px solid rgba(221,41,27,.55);
  background: rgba(221,41,27,.92);
  box-shadow: 0 14px 30px rgba(221,41,27,.22);
}

.ps-sea-btn--primary:hover{
  transform: translateY(-1px);
  background: rgba(221,41,27,1);
  box-shadow: 0 18px 36px rgba(221,41,27,.28);
}

.ps-sea-btn__dot{
  width: 8px;
  height: 8px;
  margin-left: 10px;
  border-radius: 99px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 0 6px rgba(255,255,255,.14);
}

/* ICON BAND  */

.ps-sea-hero__band{
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  border-top: 1px solid var(--ps-sea-line);
  background: linear-gradient(180deg, var(--ps-sea-glass), var(--ps-sea-glass-2));
  backdrop-filter: blur(10px);

  /* lekki oddech, ale dalej wygląda jak jeden pas */
  padding: 10px 0;

  /* ważne: przerwa od następnej sekcji (żeby się nie “ucinało” i nie kleiło) */
  margin-bottom: clamp(18px, 3vh, 34px);
}

.ps-sea-hero__ibox{
  position: relative;
  padding: 20px 18px 22px; /* oddech w środku */
  outline: none;
  cursor: default;
  transition: background .25s ease;
}

.ps-sea-hero__ibox + .ps-sea-hero__ibox{
  border-left: 1px solid var(--ps-sea-line-soft);
}

.ps-sea-hero__iwrap{
  width: 46px;
  height: 46px;
  border-radius: 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);

  margin-bottom: 12px;

  transform: translateY(4px);
  opacity: 0;
  transition: transform .55s ease, opacity .55s ease, border-color .25s ease, background .25s ease, color .25s ease;

  /* WAŻNE: pod SVG, żeby brało currentColor */
  color: rgba(255,255,255,.92);
}

/* Font Awesome (MORZE) */
.ps-sea-hero__iwrap i{
  font-size: 22px;
  color: currentColor;
  transition: transform .25s ease, color .25s ease;
}

/* SVG (LĄD) – ikony wektorowe */
.ps-sea-hero__icon{
  width: 22px;
  height: 22px;
  display: block;
  fill: currentColor; /* kluczowe: bez tego svg często wygląda jak "brak" */
  transition: transform .25s ease;
}

.ps-sea-hero__ititle{
  margin: 0 0 6px;
  font-family: "Teko", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 22px;
  line-height: 1.05;
}

.ps-sea-hero__itext{
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255,255,255,.82);
}

/* hover – delikatnie */
.ps-sea-hero__ibox:hover,
.ps-sea-hero__ibox:focus{
  background: rgba(255,255,255,.05);
}

.ps-sea-hero__ibox:hover .ps-sea-hero__iwrap,
.ps-sea-hero__ibox:focus .ps-sea-hero__iwrap{
  border-color: rgba(221,41,27,.35);
  background: rgba(221,41,27,.10);
  color: rgba(255,255,255,1);
}

.ps-sea-hero__ibox:hover .ps-sea-hero__iwrap i,
.ps-sea-hero__ibox:focus .ps-sea-hero__iwrap i{
  transform: scale(1.06);
}

.ps-sea-hero__ibox:hover .ps-sea-hero__icon,
.ps-sea-hero__ibox:focus .ps-sea-hero__icon{
  transform: scale(1.06);
}

/* reveal state – działa dla MORZA i LĄDU */
.ps-sea-hero.is-visible .ps-sea-hero__iwrap,
.ps-land-hero.is-visible .ps-sea-hero__iwrap,
.ps-hero-reveal.is-visible .ps-sea-hero__iwrap{
  transform: translateY(0);
  opacity: 1;
}

/* RESPONSIVE */
@media (max-width: 1100px){
  .ps-sea-hero__band{ grid-template-columns: repeat(2, 1fr); }

  /* reset granic pod układ 2x2 */
  .ps-sea-hero__ibox{ border-left: none; }
  .ps-sea-hero__ibox:nth-child(odd){
    border-right: 1px solid var(--ps-sea-line-soft);
  }
  .ps-sea-hero__ibox:nth-child(n+3){
    border-top: 1px solid var(--ps-sea-line-soft);
  }
}

@media (max-width: 640px){
  .ps-sea-hero__band{ grid-template-columns: 1fr; }

  .ps-sea-hero__ibox{
    border-right: none !important;
  }
  .ps-sea-hero__ibox + .ps-sea-hero__ibox{
    border-top: 1px solid var(--ps-sea-line-soft);
  }
}


/* =========================================================
   FIX – białe teksty na dark hero (bez agresywnego nadpisywania wszystkiego)
   ========================================================= */

.ps-sea-hero{
  color: #fff;
}

.ps-sea-hero__lead,
.ps-sea-hero__lead p,
.ps-sea-hero__note,
.ps-sea-hero__itext{
  color: rgba(255,255,255,.85);
}

.ps-sea-hero__title,
.ps-sea-hero__ititle{
  color: #fff;
}

.ps-sea-hero__kicker{
  color: rgba(255,255,255,.9);
}

.ps-sea-btn,
.ps-sea-btn *{
  color: #fff;
}

/* WAŻNE: usunięte "wymuszanie" font-family Font Awesome
   bo to często powoduje brak i

@media (max-width: 991px){
  .ps-sea-hero__wrap{
    padding-left: clamp(18px, 3vw, 44px);
    padding-right: clamp(18px, 3vw, 44px);
  }
}


/* === PS_SEA_ITITLE_DESKTOP (auto) === */
@media (min-width: 1200px){
  .ps-sea-hero__ititle{
    font-size: 18px !important;
    line-height: 1.15 !important;
  }
}
/* === /PS_SEA_ITITLE_DESKTOP (auto) === */