/* ==========================================================================
   HERO SLIDER — #swiper-three-fields-slider-block-block-1 (.three-fields-slider)

   Full-bleed photo slides, dark gradient overlay for text contrast, left-
   aligned heading, and two CTAs per slide (primary = the paragraph's own
   button-link field, secondary = the "Skontaktuj się" contact link that
   ships as a separate views field on every slide).

   IMPORTANT: everything below is scoped under .three-fields-slider.
   field--name-field-heading / field--name-field-button-link / field--name-
   field-image are generic Drupal field classes reused elsewhere (e.g. the
   #branze block), so styling them unscoped — as the old CSS did — leaked
   into those other blocks and forced them to fight back with their own
   !important overrides. Keeping every rule scoped here avoids that.
   ========================================================================== */
   
   


.three-fields-slider .swiper-container,
.three-fields-slider .swiper-wrapper {
  min-height: clamp(420px, 70vh, 760px) !important;
}


.three-fields-slider .field--name-field-image picture,
.three-fields-slider .field--name-field-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}




@media (max-width: 799.98px) {
	.three-fields-slider .swiper-container, .block-views-blockthree-fields-slider-block-block-1,
	.three-fields-slider .swiper-container, .block-views-blockthree-fields-slider-block-block-2,
	.three-fields-slider .swiper-container, .block-views-blockthree-fields-slider-block-block-3,
	.three-fields-slider .swiper-container, .block-views-blockthree-fields-slider-block-block-4,
	.three-fields-slider .swiper-container, .block-views-blockthree-fields-slider-block-block-5
	{
    background-color: #1c1c1c;
}   

  .three-fields-slider .swiper-slide {
    position: relative !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .three-fields-slider .field--name-field-image {
    position: relative !important;
    inset: auto !important;
    height: 55vw;       /* or use aspect-ratio: 16 / 9; */
    max-height: 320px;
  }

  .three-fields-slider .swiper-slide::before {
    display: none !important;   /* desktop-only left-to-right gradient */
  }

  .three-fields-slider .paragraph--type--paragraph-three-fields-slider {
    position: static !important;
    height: auto !important;
    justify-content: flex-start !important;
    padding: 0 0 0 !important;
    background: #1c1c1c;  /* dark block under the image */
  }
  
  .three-fields-slider .field--name-field-heading, .three-fields-slider .field--name-field-selling-phrase, .three-fields-slider .field--name-field-button-link {
      padding-left: 8%;
      padding-right: 8%;
  }

 .three-fields-slider .views-field-nothing {
    position: static !important;
    margin-top: 1rem !important;
  }
  
  .region-header .swiper-button-prev, .region-header .swiper-button-next
  {
  	top: 140px;
  }
  
  .three-fields-slider h2 {
  	
  }
  
}

.three-fields-slider {
  margin: 0;
}

.three-fields-slider .field--item {
  float: none !important;
}

/* ---- Slide shell: fixed-height, full-bleed image ---- */
.three-fields-slider .swiper-slide {
  position: relative;
  height: clamp(420px, 70vh, 760px);
  overflow: hidden;
  /*background-color: var(--mw-gray-4);  placeholder while the image loads */
}

.three-fields-slider .swiper-slide-views,
.three-fields-slider .views-field-rendered-entity {
  position: relative;
  height: 100%;
}

/* The paragraph is the text-stack container. Its image child is pulled out
   with position:absolute (full-bleed background); the three text fields
   that remain — heading, selling-phrase, button-link — stay in normal flow
   as flex items, so they always stack in the correct order (heading, then
   phrase, then button) no matter how long any of them is. The stack is
   bottom-anchored (justify-content: flex-end) so the primary button always
   lands at a fixed distance from the slide's bottom edge, which is what
   lets the secondary "Skontaktuj się" button (a separate field, positioned
   below) line up with it on the same row. */
.three-fields-slider .paragraph--type--paragraph-three-fields-slider {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /*max-width: 640px;*/
  padding: 0 6% 3.5rem 6%;
}

.three-fields-slider .field--name-field-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.three-fields-slider .field--name-field-image picture,
.three-fields-slider .field--name-field-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dark gradient overlay so white text stays readable on any photo,
   strongest where the text sits (left), fading out to the right */
.three-fields-slider .swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.5) 40%, rgba(0,0,0,.12) 75%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}

/* ---- Heading ---- */
.three-fields-slider .field--name-field-heading {
  position: relative;
  z-index: 2;
  margin: 0 0 0.75rem;
}

.three-fields-slider h2 {
  text-align: left;
  color: var(--mw-white);
  font-size: clamp(26px, 4vw, 50px);
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

/* ---- Selling phrase (subheading text under the heading) ---- */
.three-fields-slider .field--name-field-selling-phrase {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin: 0 0 1.75rem;
}

.three-fields-slider .field--name-field-selling-phrase p {
  margin: 0;
  padding: 0; /* override the sitewide "p { padding: 16px 0 16px 0; }" rule */
  color: var(--mw-white);
  font-size: clamp(14px, 1.6vw, 19px);
  line-height: 1.55;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}

/* ---- Buttons: primary CTA (paragraph link) + secondary CTA (contact) ---- */
.three-fields-slider .field--name-field-button-link {
  position: relative;
  z-index: 2;
  margin: 0;
}

.three-fields-slider .views-field-nothing {
  position: absolute;
  z-index: 2;
  bottom: 3.5rem; 
  left: calc(6% + 300px); 
}

.three-fields-slider .field--name-field-button-link a {
  display: inline-block;
  box-sizing: border-box;
  min-width: 260px;
  padding: 0.85rem 1.75rem;
  background: var(--mw-orange-3);
  border: 1px solid var(--mw-orange-3);
  border-radius: var(--radius-pill);
  color: var(--mw-white);
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.three-fields-slider .field--name-field-button-link a:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.3);
  filter: brightness(1.05);
  color: var(--mw-white);
  text-decoration: none;
}

.three-fields-slider .views-field-nothing a {
  display: inline-block;
  box-sizing: border-box;
  padding: 0.85rem 1.75rem;
  background: transparent;
  border: 1px solid var(--mw-white);
  border-radius: var(--radius-pill);
  color: var(--mw-white);
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}

.three-fields-slider .views-field-nothing a:hover {
  background: rgba(255,255,255,.12);
  transform: translateY(-2px);
  color: var(--mw-white);
  text-decoration: none;
}

/* ---- Small screens: taller slide, buttons stacked full-width below the phrase ---- */
@media (max-width: 629px) {
  .three-fields-slider .swiper-slide {
    height: clamp(560px, 92vh, 820px);
  }

  .three-fields-slider .paragraph--type--paragraph-three-fields-slider {
    max-width: none;
    padding: 0 8% 6rem 8%;
  }

  .three-fields-slider h2 {
    font-size: clamp(20px, 6vw, 30px);
  }

  .three-fields-slider .field--name-field-selling-phrase {
    max-width: none;
    font-size: clamp(14px, 3vw, 16px);
  }

  .three-fields-slider .views-field-nothing {
    left: 8%;
    right: 8%;
    bottom: 1.25rem;
  }

  .three-fields-slider .field--name-field-button-link a,
  .three-fields-slider .views-field-nothing a {
    display: block;
    width: 100%;
    min-width: 0;
  }
}

/* ---- Navigation arrows + pagination dots ---- */
.swiper-button-next,
.swiper-button-prev {
  color: var(--mw-orange-3);
  z-index: 3;
}

.three-fields-slider .swiper-pagination-bullet-active {
  background: var(--mw-orange-3);
}



/* 1) Fix the dead selector: swiper-container is the SAME element as
   three-fields-slider (compound selector, no space), not a descendant.
   Also lock `height` in addition to `min-height`, with !important, so
   Swiper's own JS-driven autoHeight (inline style="height:Xpx") can
   never move it. */
   
@media (min-width: 800px) {
.three-fields-slider.swiper-container,
.three-fields-slider .swiper-wrapper {
  min-height: clamp(420px, 70vh, 760px) !important;
  height: clamp(420px, 70vh, 760px) !important;
}

.three-fields-slider .swiper-slide {
  height: clamp(420px, 70vh, 760px) !important;
}

/* 2) Give the heading a metrics-safer fallback stack, and reserve
   height for up to two lines so a font-display:swap reflow can't
   change the box size and shove the phrase/button via flex-end. */
.three-fields-slider h2 {
  font-family: Raleway, "Helvetica Neue", Arial, sans-serif;
}

.three-fields-slider .field--name-field-heading {
  min-height: calc(2.3 * clamp(26px, 4vw, 50px)); /* ~2 lines at line-height 1.15 */
}

.three-fields-slider .field--name-field-selling-phrase {
  min-height: calc(3.1 * clamp(14px, 1.6vw, 19px)); /* ~2 lines at line-height 1.55 */
}
}

/* 3) Mobile: the text stack is height:auto in normal flow, so a swap
   reflow here shifts real page content below the slider. Reserve
   space for the worst-case (2-line heading + 2-line phrase + button). */
@media (max-width: 799.98px) {
  .three-fields-slider .paragraph--type--paragraph-three-fields-slider {
    min-height: 260px; /* tune to your longest real headline/phrase */
  }
}

/* ######################### EOF HERO ################################ */





/* ######################### BRANŻE ################################ */

/* ### Temp - only PL ### */
html[lang="pl"] #branze {

    padding: 40px 0;
    /*background-color: var(--mw-gray-3);
    margin-left: -10px;
  margin-right: -10px;
  max-width: calc(100% + 20px);*/
}

#branze h2 {
    color: var(--mw-orange-3) !important;
    background-color: #fffbea;
    border-left: 5px solid #ffcc00;
    padding: 10px 15px;
    
}

@media (min-width: 700px) {
   #branze h2 {
       display: inline;
   } 
}

#branze .layout__region--content {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

#branze .field--name-field-heading {
    display: none !important;
}

#branze .field--name-field-button-link {
    position: relative;
    top: -50px;
    left: 12px;
    border-radius: 10px;
}

#branze .field--name-field-button-link:hover {
    position: relative;
    top: -50px;
    left: 16px;
    border-radius: 10px;
}

#branze .field--name-field-button-link a {
    border-radius: 10px;
    background-color: var(--mw-orange-3);
    border: 1px solid #ffffff;
    color: #ffffff;
    padding: 10px;
    border-radius: var(--radius-pill);
    font-size: 16px;
}

#branze .field--name-field-button-link a:hover {
    text-decoration: none;
}


/* ######################### EOF BRANŻE ################################ */







/* ######################### NETFLIX ################################ */
#netflix-banner {
    margin-top: 1em;
    margin-top: 1em;
}

#netflix-banner p:last-child {
    margin-bottom: auto;
}

#netflix-banner {
    padding: 0;
}

#netflix-banner {
    background-color: #EB8D34;
    padding: 0;
}

/*#netflix-banner .layout__region--second {
    background-color: #c4c8c9;
    padding: 0;
}*/


#netflix-banner p:last-child {
    margin-bottom:0;
    padding-bottom: 0;
    padding-right: 0;
    padding-top:0;
}


#netflix-text {
    margin: 1em;
}

#netflix-text h2 {
    color: #ffffff;
    font-size: 2em
}

@media  (max-width: 1154px) {
    #netflix-banner .layout__region--first, #netflix-banner .layout__region--second {
        flex: none;
        width: 100%;
    }
}

#netflix-text img {
    max-width: 166px;
    text-align: center;
    display: block;
}

#netflix-banner .layout__region--first img {
    width: 100%;
}

/* Outer card container */
#netflix-banner {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  align-items: stretch; /* make both columns equal height */
}

/*
#netflix-banner .layout__region {
  display: flex;
}
*/

/* Image column */
#netflix-banner .layout__region--first {
  position: relative;
  min-height: 420px;
}

#netflix-banner .layout__region--first .field--name-body {
  width: 100%;
}

#netflix-banner .layout__region--first img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text column */
#netflix-text {
  /*background: var(--color-brand-orange, #f5883e); /* match your existing orange */
  display: flex;
  align-items: center;
  width: 100%;
}

#netflix-text .field--name-body {
  padding: 48px 40px;
}

#netflix-text h2 {
  color: #fff;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 20px;
}

#netflix-text p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 16px;
}

#netflix-text p strong {
  font-weight: 700;
}

#netflix-text p u {
  text-decoration: none; /* drop the underline, weight does the job */
}

/* Logo links → clean button row */
#netflix-text p:last-of-type {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

#netflix-text p:last-of-type a {
  display: inline-flex;
  width: fit-content;
}

#netflix-text p:last-of-type img {
  height: 44px;
  width: auto;
  margin: 0 !important; /* override the inline margin-bottom */
  border-radius: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

#netflix-text p:last-of-type a:hover img {
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* Responsive: stack on smaller screens */
@media (max-width: 900px) {
  #netflix-banner {
    flex-direction: column;
  }

  #netflix-banner .layout__region--first {
    min-height: 280px;
  }

  #netflix-text .field--name-body {
    padding: 32px 24px;
  }

  #netflix-text h2 {
    font-size: 24px;
  }
}

html[lang="sv"] #netflix-banner,
html[lang="de-at"] #netflix-banner{
  display: none !important;
}


/* Make sure the container establishes the positioning context (it already does, this is just a safety net) */
#netflix-banner .layout__region--first {
  position: relative;
  overflow: hidden;
}

/* Overlay the heading on top of the image, bottom-left, Netflix-style */
#netflix-banner .layout__region--first h3 {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;           /* stick to bottom, stretch left/right */
  margin: 0;
  padding: 1.25rem clamp(1rem, 4vw, 2.5rem) 1.5rem;
  color: #fff;
  font-weight: 800;
  font-size: clamp(1.75rem, 5vw, 8.25rem);
  line-height: 1.15;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  /* subtle scrim so white text stays legible over bright parts of the photo */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 65%);
  pointer-events: none;        /* let clicks pass through to whatever is behind, if anything */
}

/* ######################### EOF NETFLIX ################################ */