/* ==========================================================================
   Dlaždice sviatostí (stránka "Sviatosti cirkvi")
   Osem fotobánerov (WPBakery riadky s triedou .rkfu-banner-*, v nich Porto
   interactive banner) je usporiadaných do mriežky 2 × 4 (na mobile 1 stĺpec).
   Pod textom je tmavá vínová vrstva, aby bol biely text čitateľný aj na svetlých
   fotkách, nadpis je menší a tlačidlo "Čítaj viac" je vyplnené zlatou farbou.
   Text perexu je skrátený na 4 riadky; celý text je na podstránke sviatosti.
   Mriežka sa týka len wrappera, ktorý priamo obsahuje riadky .rkfu-banner-*.
   ========================================================================== */

/* --- Premenné --------------------------------------------------------------- */
[class*="rkfu-banner-"] {
  --sb-wine: #6b1420;                             /* farba hlavičky */
  --sb-shade: 36, 6, 11;                          /* tmavá vínová pre vrstvu pod textom (RGB) */
  --sb-gold: #d9b45c;                             /* zlatá – tlačidlo, linka pod nadpisom */
  --sb-cream: #fffaf2;                            /* krémová – text, hover tlačidla */
  --sb-pad: clamp(20px, 3.2vw, 44px);             /* vnútorný okraj dlaždice */
}

/* --- Mriežka ------------------------------------------------------------------ */
.wpb-content-wrapper:has(> [class*="rkfu-banner-"]) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-inline: -30px;                           /* roztiahnutie na celú šírku, ako mali pôvodné riadky (Porto container má padding 30 px) */
}

@media (max-width: 575px) {
  .wpb-content-wrapper:has(> [class*="rkfu-banner-"]) {
    margin-inline: -20px;                         /* na mobile má container padding 20 px */
  }
}

.wpb-content-wrapper > [class*="rkfu-banner-"] {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
}

.wpb-content-wrapper > [class*="rkfu-banner-"] > .vc_column_container {
  width: 100%;
  max-width: none;
  flex: 0 0 100%;
}

/* --- Dlaždica ------------------------------------------------------------------- */
[class*="rkfu-banner-"] .porto-ibanner {
  min-height: clamp(380px, 34vw, 520px) !important; /* inline min-height: 640px z editora */
  height: clamp(380px, 34vw, 520px);
}

/* Tmavá vrstva: najsilnejšia dole vľavo, kde je text */
[class*="rkfu-banner-"] .porto-ibanner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(var(--sb-shade), .88) 0%, rgba(var(--sb-shade), .62) 45%, rgba(var(--sb-shade), .12) 100%);
}

/* --- Text: ukotvený dole, nie vycentrovaný ------------------------------------------ */
[class*="rkfu-banner-"] .porto-ibanner-layer {
  position: absolute !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;                         /* rodič je flex, bez toho sa vrstva zmrští na šírku obsahu */
  box-sizing: border-box;
  padding: 0 var(--sb-pad) var(--sb-pad) !important;
  transform: none !important;
}

/* Prázdny podnadpis (hr + prázdny odsek) pri manželstve a pohrebe robil medzeru */
[class*="rkfu-banner-"] .porto-u-sub-heading {
  display: none !important;
}

/* Nadpis: Cinzel ako navigácia, pätička a ostatné nadpisy webu, menší, s tenkou zlatou linkou.
   Pôvodný Playfair Display sa na webe nenačítava (nie je v Google Fonts odkaze ani v @font-face),
   zobrazoval sa len tým, ktorí ho majú nainštalovaný, ostatní videli záložné písmo prehliadača. */
[class*="rkfu-banner-"] .porto-u-heading .porto-u-main-heading > * {
  font-family: Cinzel, Georgia, serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: clamp(24px, 2.5vw, 38px) !important;  /* pôvodne 5.25em = 73 px */
  line-height: 1.2 !important;
  letter-spacing: .02em !important;                /* pôvodne záporný (-0.05em) */
  margin: 0 !important;
  text-shadow: 0 1px 12px rgba(var(--sb-shade), .55);
}

[class*="rkfu-banner-"] .porto-u-heading .porto-u-main-heading > *::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 12px 0 14px;
  background: var(--sb-gold);
}

/* Perex: čitateľnejší riadok, max. 4 riadky */
[class*="rkfu-banner-"] .porto-ibanner-layer p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  max-width: 62ch;
  margin: 0 0 18px;
  font-family: "PT Serif", Georgia, serif;         /* téma dáva záložné sans-serif */
  font-size: clamp(14px, 1.15vw, 16.5px);
  line-height: 1.6;
  color: var(--sb-cream);
}

/* --- Tlačidlo "Čítaj viac ..." ------------------------------------------------------- */
[class*="rkfu-banner-"] .porto-ibanner-layer a.vc_btn3,
[class*="rkfu-banner-"] .porto-ibanner-layer a.vc_btn3:hover,
[class*="rkfu-banner-"] .porto-ibanner-layer a.vc_btn3:focus {
  padding: 11px 22px !important;
  border: 1px solid var(--sb-gold) !important;
  border-radius: 3px !important;
  background: var(--sb-gold) !important;
  box-shadow: none !important;
  color: var(--sb-wine) !important;
  font-family: "PT Serif", Georgia, serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

[class*="rkfu-banner-"] .porto-ibanner-layer a.vc_btn3:hover,
[class*="rkfu-banner-"] .porto-ibanner-layer a.vc_btn3:focus-visible {
  background: var(--sb-cream) !important;
  border-color: var(--sb-cream) !important;
}

[class*="rkfu-banner-"] .porto-ibanner-layer a.vc_btn3:focus-visible {
  outline: 2px solid var(--sb-cream);
  outline-offset: 3px;
}

/* --- Mobil: jeden stĺpec ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .wpb-content-wrapper:has(> [class*="rkfu-banner-"]) {
    grid-template-columns: minmax(0, 1fr);
  }

  [class*="rkfu-banner-"] .porto-ibanner {
    min-height: 420px !important;
    height: 420px;
  }

  [class*="rkfu-banner-"] .porto-ibanner-layer p {
    -webkit-line-clamp: 5;
    font-size: 15px;
  }
}