@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

:root {
    --tile-color-blue: #4ab1e8;
    --tile-color-green: #82b84d;
    --tile-color-orange: #f37a4e;
    --tile-color-text-dark: #333;
    --card-spacer-y: 1rem;
    --card-spacer-x: 1rem;
    --card-color: #000;
    --card-bg: #fff;
    --card-border-color: #dfe3e7;
    --card-border-radius: .25rem;
}

body {
  background-color: #f7f7f7 !important;
}

footer {
    background: #e7e7e7 !important;
    border-top: 1px solid #dedede !important;
    color: #898989 !important;
    font-weight: 400 !important;
    font-size: 14px !important;
}
h1, .h1 {
    font-size: 1.75rem;
}
h2, .h2 {
    font-size: 1.5rem;
}
h3, .h3 {
    font-size: 1.25rem;
}
.footer .grid-child {
    align-items: end !important;
    padding: 1rem .5em !important;
}

.main-mid {
    display: flex;
    gap: 20px; /* odstęp między kolumnami */
    box-sizing: border-box;
    width: 100%; /* zajmuje całą szerokość rodzica */
}

.main-mid-left {
    flex: 3; /* proporcja 60% */
    min-width: 0; /* ważne przy flexbox */
    box-sizing: border-box;
}

.main-mid-right {
    flex: 2; /* proporcja 40% */
    min-width: 0;
    box-sizing: border-box;
}

/* Styluje główny kontener artykułu/treści */
.com-content-article.item-page {
    border: 1px solid #ddd !important;
    padding: var(--card-spacer-y) var(--card-spacer-x) !important;
    background-color: var(--card-bg) !important;
    flex: auto !important;
    border-radius: var(--card-border-radius) !important;
}

.com-content-category-blog{
    border: 1px solid #ddd !important;
    padding: var(--card-spacer-y) var(--card-spacer-x) !important;
    background-color: var(--card-bg) !important;
    flex: auto !important;
    border-radius: var(--card-border-radius) !important;
}

.com-contact{
    border: 1px solid #ddd !important;
    padding: var(--card-spacer-y) var(--card-spacer-x) !important;
    background-color: var(--card-bg) !important;
    flex: auto !important;
    border-radius: var(--card-border-radius) !important;
}

.container-header {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, #fff 1%);
    border-top: 0px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.parafia-contact-icons {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
    align-items: center;
}

.main-header-bar {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    width: 1320px;
    color: #898989;
    min-height: 60px;
    font-size: 14px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 5px;
}

.top-address {
    text-align: left;
}

.pcm-info {
    text-align: right;
}

.parafia-contact-icons li img {
    display: none;
}

.parafia-contact-icons li::before {
    font-family: 'Material Symbols Outlined';
    font-weight: 900;
    margin-right: 4px;
    margin-left: 8px;
    color: #919191; /* Kolor ikon */
    font-size: 14px; 
    vertical-align: middle;
    transform: translateY(-1.5px); 
    display: inline-block; /* Wymagane, aby transform działał poprawnie */
}

.parafia-direction::before {
    content: '\e0c8'; /* Ikona map-marker/location */
}

.parafia-email::before {
    content: '\e158'; /* Ikona envelope/email */
}

.parafia-phone::before {
    content: '\e0b0'; /* Ikona phone */
}
.parafia-bank::before {
    content: '\e84f';
}
.parafia-charity::before {
    content: '\f52c';
}
.parafia-church::before {
    content: '\eaae';
}
/* ======================================================= */
/* 2. UKŁAD KAFLI (GRID) */
/* ======================================================= */
.tile-wrapper {
	display: flex;
	justify-content: space-between;
	gap: 15px; /* Odstęp między kafelkami */
	margin: 10px 0;
}
.card:has(.tile-wrapper) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important; 
}

/* 2. Ustawienia dla elementu opakowującego treść .card-body */
.card-body:has(.tile-wrapper) {
    padding: 0 !important; 
    border: 0 !important;
    background: transparent !important; 
}

.tile {
    flex-grow: 1; 
    flex-basis: 0; /* Równa szerokość kolumn */
    text-align: center;    
    /* Ważne: Rezerwacja miejsca na border, aby kafelki nie "skakały" na hoverze */
    border: 3px solid transparent; 
    border-radius: 0; 
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    min-height: 250px; 
    padding: 10px; /* wewnętrzny odstęp */
    /* kluczowe: zachowanie kwadratu */
    aspect-ratio: 1 / 1; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tile h3 {
    font-size: 1.5em;
    font-weight: 700;
    margin-top: 0; 
    margin-bottom: 5px;
    text-transform: uppercase;
}

.tile p.description {
    font-size: 1em;
    line-height: 1.4;
    padding-top: 0;
}

.tile .note {
    font-size: 0.8em;
    font-style: italic;
    display: block;
    margin-top: 5px;
}

/* ======================================================= */
/* 3. STYLIZACJA IKON */
/* ======================================================= */

/* A. WSPÓLNA BAZA DLA WSZYSTKICH IKON (.tile-icon) */
/* (Wymaga, aby w HTML każdy <span> miał klasę "tile-icon") */
.tile .tile-icon {
    display: block;
    text-align: center;
    margin: 5px 0 10px 0;
}

.tile .tile-icon::before {
    /* WŁAŚCIWOŚCI CZCIONKI Material Symbols */
    font-family: 'Material Symbols Outlined';
    font-size: 5em; 
    line-height: 1;
    font-weight: normal; 
    font-style: normal;
    display: inline-block;
    
    /* Korekta pionowego wyrównania */
    transform: translateY(-2px); 
}

/* B. DEFINICJE UNIKALNE (Kody HEX) */

/* IKONA MSZE ŚWIĘTE (Modlitwa) */
.tile-blue .tile-icon-prayer::before {
    content: '\f5ed'; 
}

/* IKONA SAKRAMENTY (Family Restroom) */
.tile-green .tile-icon-sakramenty::before {
    content: '\f1a2'; 
}

/* IKONA LINKI (Globus) */
.tile-orange .tile-icon-linki::before {
    content: '\f798'; 
}

/* ======================================================= */
/* 4. KOLORY I HOVER */
/* ======================================================= */

/* --- STAN NORMALNY --- */

/* KAfelek 1: MSZE ŚWIĘTE (Niebieski) */
.tile-blue {
    background-color: var(--tile-color-blue); 
    color: white; 
}
.tile-blue h3, .tile-blue .tile-icon::before, .tile-blue p.description {
    color: white; 
}

/* KAfelek 2: SAKRAMENTY (Zielony) */
.tile-green {
    background-color: var(--tile-color-green);
    color: white; 
}
.tile-green .tile-icon::before, .tile-green h3, .tile-green p.description {
    color: white;
}

/* KAfelek 3: LINKI (Pomarańczowy) */
.tile-orange {
    background-color: var(--tile-color-orange);
    color: white; 
}
.tile-orange .tile-icon::before, .tile-orange h3, .tile-orange p.description {
    color: white;
}

.tile:hover {
    background-color: white !important; 
    border-style: solid; 
    border-width: 3px; 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.tile-blue:hover {
    border-color: var(--tile-color-blue);
    color: var(--color-text-dark);
}
.tile-blue:hover h3, .tile-blue:hover .tile-icon::before, .tile-blue:hover p.description {
    color: var(--tile-color-blue);
}

.tile-green:hover {
    border-color: var(--tile-color-green);
    color: var(--color-text-dark); 
}
.tile-green:hover h3, .tile-green:hover .tile-icon::before, .tile-green:hover p.description {
    color: var(--tile-color-green);
}

.tile-orange:hover {
    border-color: var(--tile-color-orange);
    color: var(--tile-color-text-dark); 
}
.tile-orange:hover h3, .tile-orange:hover .tile-icon::before, .tile-orange:hover p.description {
    color: var(--tile-color-orange);
}

.parafia-title { 
	font-weight: 700;
	color:#017e77;
	font-family: 'Bitter', serif;
	font-size: 20px;
	margin: 0 0 30px;
	font-weight: 900;
	text-transform: uppercase;
}

ul.parafia-custom-list {
    display: inline-block;
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

ul.parafia-custom-list li {
    list-style: none;
    background: url("../../../images/web_images/li-custom.png") no-repeat left 9px;
    padding: 9px 0 9px 40px; 
}

ul.parafia-custom-list ul {
    padding: 9px 0 0;
    list-style: none;
    margin-left: 0;
}
.parafia-button, a.button, input.button, button.button {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 16px;
    line-height: 20px;
    text-transform: lowercase;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    font-weight: 400;
    background: #017e77;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 0;
    text-decoration: none;
}

.parafia-button:hover, a.button:hover, input.button:hover, button.button:hover {
    background: transparent;
    color: #017e77;
    border-color: #017e77;
    border-style: solid; 
    border-width: 2px; 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.parafia-socials a.facebook {
    display: inline-block;  
    width: 70px;              
    height: 70px;               
    background-image: url("../../../images/web_images/facebook.png");
    background-color: #204385;  
    background-size: contain;    
    background-repeat: no-repeat; 
    background-position: center; 
    text-indent: -9999px;      
}

.main-mid-right.card:has(.slideshowck) {
    background-image: url("../../../images/web_images/testimonials-bg.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}

@media (max-width: 991px) {
    .main-header-bar {
        width: 100%; 
        padding: 0 15px;
        justify-content: flex-end;
    }

    .tile .tile-icon {
        margin: 2px 0;
    }
    .tile .tile-icon::before {
        font-size: 3em; 
   }
   .main-mid {
        flex-direction: column;
    }

    .main-mid-left,
    .main-mid-right {
        width: 100%;
        flex: unset;
    }
    .footer .grid-child {
        align-items: center !important;
    }
}

@media (max-width: 767px) {
    .top-address {
        display: none !important;
    }

    .pcm-info {
        text-align: left;
        width: 100%;
    }

    .main-header-bar {
        width: 100%;
        padding: 0 15px; 
        justify-content: flex-start;
    }

    .pcm-info .parafia-contact-icons {
        gap: 0px; 
        flex-wrap: wrap; 
        justify-content: flex-start;
    }
    .pcm-info .parafia-contact-icons li {
        margin-right: 10px;
        margin-bottom: 5px;
    }
    .tile-wrapper {
        flex-direction: column;
        gap: 15px;
    }

    .tile-wrapper .tile {
        width: 100%; /* zajmuje całą szerokość kontenera */
        max-width: 100%; 
    }
}