/*
Theme Name: kasia-st-theme
Theme URI: https://royal-elementor-addons.com/royal-elementor-kit/
Template: royal-elementor-kit
Author: WP Royal
Author URI: https://royal-elementor-addons.com/
Tags: blog,e-commerce,one-column,custom-background,custom-colors,full-width-template,custom-menu,custom-logo,featured-images,sticky-post,theme-options,threaded-comments,translation-ready
Version: 1.0.131.1748334930
Updated: 2025-05-27 08:35:30

*/
.oferta-gallery {
  margin-bottom: 2em;         /* odstęp od reszty stopki */
}
.oferta-gallery a {
  display: block;
  overflow: hidden;
  border-radius: 4px;
}
.oferta-gallery img {
  width: 100%;
  height: auto;
  display: block;
}
/* sam grid: 3 kolumny na desktopie, 2 w tabletach, 1 na telefonach */
.oferta-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
@media (max-width: 768px) {
  .oferta-gallery {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}

/* ARCHIWUM OFERT PO TAKSNOMII SPRZEDAŻ/WYNAJEM */
/*
*
 * HERO */
.archive-hero__bg {
  position: relative;
	display: flex;
	height: 60vh;
	background-size: cover !important;
    background-position: center center !important;
	justify-content: center;
  align-items: center;
	margin-bottom: 10px;
}

.archive-hero__overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(253, 244, 237, 0.8);
  z-index: 1;
}

.archive-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.archive-hero__title {
  color: #A53860;
	margin-bottom: 80px;
}

@media (max-width: 768px) {
  .archive-hero__title {
    margin-bottom: 40px !important;
  }
}

/* jeszcze mniejszy na naprawdę małych ekranach */
@media (max-width: 480px) {
  .archive-hero__title {
    margin-bottom: 20px !important;
  }
}

/* przyciski */
.archive-hero__buttons {
  margin-top: 2rem;
  display: flex;
  gap: 8rem;
  justify-content: center;
}

.archive-hero__buttons .btn {
  display: inline-block;
  font-family: 'Darker Grotesque', sans-serif;
  font-size: 1.5rem;
  padding: 0.2rem 3.5rem;
  transition: all .2s ease;
}

/* wypełniony */
.archive-hero__buttons .btn--primary {
  background-color: #A53860;
  color: #ffffff;
  border: none;
}
.archive-hero__buttons .btn--primary:hover {
  background-color: #8E2E4F;
  color: #ffffff;
}

/* tylko obrys */
.archive-hero__buttons .btn--outline {
  background-color: transparent;
  color: #03466A;
  border: 2px solid #A53860;
}
.archive-hero__buttons .btn--outline:hover {
  background-color: #A53860;
  color: #ffffff;
  border-color: #A53860;
}

/* Tablet & węższe: przyciski w kolumnie, mniejszy odstęp między liniami w dwulinijkowym tekście */
@media (max-width: 1024px) {
  .archive-hero__buttons {
    display: flex;
    flex-direction: column;
    align-items: center;    /* wyśrodkowanie przycisków */
    gap: 1rem;               /* odstęp między przyciskami */
    padding: 0 1rem;         /* trochę marginesu po bokach */
  }

  .archive-hero__buttons .btn {
    width: auto !important;  /* żeby nie rozciągały się na całą szerokość */
    white-space: normal;     /* pozwala zawijać tekst */
    line-height: 1.2;        /* mniejszy odstęp między liniami */
    text-align: center;      /* wyrównanie wewnątrz */
    padding: 0.4rem 4rem; /* możesz dostosować */
    max-width: 300px;        /* ograniczenie szerokości */
	font-size: 1.5rem;
  }
}
@media (max-width: 480px) {
  .archive-hero__buttons .btn {
    font-size: 1.2rem;    /* jeszcze mniejsza na naprawdę małe ekrany */
  }
}


/* KAFELKI - ARCHIWUM OFERT PO TAKSNOMII SPRZEDAŻ/WYNAJEM */
{
	display: block;
}
.oferta-card {
  display: block;
  transition: transform .3s ease, box-shadow .3s ease;
  text-decoration: none;
  color: inherit; 
}
.oferta-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}


/* kontener kafelka */
.oferta-card {
  width: 100% !important;
  box-sizing: border-box;
  margin-bottom: 2rem;
}

/* wewnętrzny flex */
.oferta-card__inner {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

/* obrazek po lewej */
.oferta-card__media {
  width: 50%;
  max-height: 60vh;
  overflow: hidden;
}
.oferta-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* szczegóły po prawej */
.oferta-card__details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 50%;
  padding: 3rem 3rem;
  box-sizing: border-box;
  color: #03466a;
  font-family: 'Darker Grotesque', sans-serif;
  font-size: 24px;
  text-align: left;
  background-color: #CAE3E180;
}

.oferta-card__info {
  display: grid !important;
  grid-template-columns: 250px 1fr !important;
  column-gap: 1rem !important;
  row-gap:    0.5rem !important;
  margin-bottom: 1.5rem;
}


/* tytuł link */
.oferta-card__post-title-link {
  display: block;
  font-size: 1.7em;
  color: #a53860 !important;
  font-family: 'Manrope', sans-serif;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}


/* marginesy między polami */
.oferta-card__headline,
.oferta-card__metraz,
.oferta-card__lokalizacja,
.oferta-card__cena {
  display: flex;          /* na flex, żeby ikona i tekst były obok siebie */
  align-items: center;
  margin: 0.25rem 0;
}

.oferta-card__headline i,
.oferta-card__headline svg,
.oferta-card__metraz i,
.oferta-card__metraz svg,
.oferta-card__lokalizacja i,
.oferta-card__lokalizacja svg,
.oferta-card__cena i,
.oferta-card__cena svg {
  margin-right: 0.5rem;   /* odległość między ikoną a samym tekstem */
  min-width: 1.2em;       /* ewentualne wyrównanie szerokości ikony */
  text-align: center;     /* żeby ikonka (jeśli jest w <i> lub <svg>) była dobrze wyśrodkowana */
}

/*1) Przy elementach parzystych (2, 4, 6, …) odwracamy kierunek flexa:
.oferta-card:nth-child(even) .oferta-card__inner {
  flex-direction: row-reverse;
}

2) Dla pewności upewniamy się, że standardowo kafelek ma flex-direction: row;
.oferta-card__inner {
  flex-direction: row;
} */

/* — Styl dla przycisku “Sprawdź szczegóły” — */
.oferta-card__cta-button {
  display: inline-block;            /* pozwala nadać padding */
  width: auto !important;
  margin-top: 0.75rem;                /* odstęp nad przyciskiem */
  padding: 0.5rem 2rem;           /* wewnętrzny margines, aby wyglądało jak button */
  background-color: #a53860;         /* dowolny kolor tła, np. ten sam, co tytuł */
  color: #ffffff !important;         /* biały tekst na przycisku */
  font-family: 'Darker Grotesque', sans-serif;/* ta sama czcionka co tytuł */
  font-size: 1.5rem;                   /* możemy zostawić domyślną wielkość */
  #text-transform: uppercase;         /* wersaliki */
  text-decoration: none;             /* usunięcie podkreślenia linku */
  transition: background-color 0.2s ease;
}

/* efekt “hover” przycisku */
.oferta-card__cta-button:hover {
  background-color: #8e2e4f; /* odrobinę ciemniejszy odcień przy najechaniu */
}

/* przycisk CTA – ma mieć tylko szerokość treści, nie całego kontenera */
.oferta-card__details .oferta-card__cta-button {
  display: inline-block !important;
  width: auto !important;
  padding: 0.75rem 1.5rem; /* dopasuj do siebie */
  align-self: flex-start;   /* wyrównaj do lewej wewnątrz flex-kontenera */
  text-align: center;
}

/* stacking na mobile: zdjęcie full-width, potem panel info */
@media (max-width: 1024px) {
  .oferta-card__inner {
    flex-direction: column !important;
  }
  .oferta-card__media,
  .oferta-card__details {
    width: 100% !important;
  }
  .oferta-card__media img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  .oferta-card__details {
    padding: 1rem; /* dopasuj jeśli trzeba */
  }
}
/* ikonki w jednej kolumnie na mobile */
@media (max-width: 480px) {
  /* minimalny gap między wierszami ikon + tekstu */
  .oferta-card__info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.1rem !important;
    margin-bottom: 1rem !important;
  }
  .oferta-card__headline,
  .oferta-card__metraz,
  .oferta-card__lokalizacja,
  .oferta-card__cena {
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* mniejszy tytuł */
@media (max-width: 1024px) {
  .oferta-card__post-title-link {
    font-size: 1.4em !important;
  }
}
@media (max-width: 480px) {
  .oferta-card__post-title-link {
    font-size: 1.2em !important;
  }
}