/* ============================================================
   Intencje Modlitw – minimal CSS, reszta z motywu WP
   web.matea.com.pl
   ============================================================ */

/* Tylko rzeczy których WP nie ma out-of-the-box */

.pi-wrap { max-width: 100%; }

/* Char counter pod textarea */
.pi-char-count        { text-align: right; font-size: .8em; opacity: .6; margin-top: 2px; }
.pi-char-count.pi-near-limit { color: var(--wp--preset--color--vivid-amber, #c0822a); opacity: 1; }
.pi-char-count.pi-at-limit   { color: var(--wp--preset--color--vivid-red, #9b2020);   opacity: 1; }

/* Powiadomienia inline formularza */
.pi-form-msg { padding: .75em 1em; margin-bottom: 1em; border-radius: 2px; }
.pi-form-msg.pi-success { background: #edfaed; color: #1a5c1a; border-left: 4px solid #4caf50; }
.pi-form-msg.pi-error   { background: #fdeaea; color: #7a1a1a; border-left: 4px solid #e53935; }

/* Nota pod formularzem */
.pi-form-note { font-size: .8em; opacity: .65; margin-top: 1.5em; }

/* Separator dekoracyjny */
.pi-divider { text-align: center; margin: 1.5em 0; opacity: .4; letter-spacing: .4em; }

/* Karty intencji – ramka zgodna z motywem */
.pi-card {
    border: 1px solid;
    border-color: var(--wp--preset--color--light-gray, currentColor);
    opacity: 1;
    border-radius: 2px;
    padding: 1.2em 1.4em;
    margin-bottom: 1em;
}

/* Avatar inicjałowy */
.pi-card-avatar {
    width: 2.4em; height: 2.4em;
    border-radius: 50%;
    background: currentColor;
    opacity: .15;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    position: relative;
}
.pi-card-avatar span {
    position: absolute;
    opacity: 1;
    font-weight: 700;
    font-size: 1em;
    /* dziedziczy kolor tekstu motywu */
}

.pi-card-header  { display: flex; align-items: center; gap: .8em; margin-bottom: .8em; }
.pi-card-meta    { flex: 1; }
.pi-card-name    { font-weight: 700; }
.pi-card-date    { font-size: .8em; opacity: .55; }

.pi-card-body {
    line-height: 1.75;
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: .8em;
}
.pi-card-body.pi-truncated {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pi-read-more {
    background: none; border: none; padding: 0;
    cursor: pointer; font-size: .85em;
    text-decoration: underline;
    /* kolor przejmuje z motywu (link color) */
    color: inherit;
    opacity: .7;
    margin-bottom: .8em;
    display: block;
}
.pi-read-more:hover { opacity: 1; }

.pi-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .5em;
    border-top: 1px solid;
    border-color: var(--wp--preset--color--light-gray, currentColor);
    opacity: 1;
    padding-top: .8em;
    margin-top: .2em;
}
/* nadpisujemy opacity dla border bo wyżej ustawione globalne */
.pi-card-footer { opacity: 1; }
.pi-card-footer { border-color: rgba(0,0,0,.08); }

/* Przycisk "Omodliłem" – drobny styl żeby nie zajmował całej szerokości */
.pi-card-footer .wp-element-button {
    font-size: .85em;
    padding: .4em 1em;
}
.pi-card-footer .wp-element-button.pi-prayed {
    opacity: .7;
    cursor: default;
}

.pi-pray-count { font-size: .85em; opacity: .6; }

/* Toolbar */
.pi-toolbar { display: flex; gap: .6em; align-items: center; flex-wrap: wrap; margin-bottom: 1.2em; }
.pi-search-wrap { flex: 1; min-width: 180px; }

/* Pagination – używamy klasy .page-numbers którą motyw już styluje.
   Tylko layout flex żeby wyglądało ładnie w rzędzie. */
.pi-pagination {
    display: flex; justify-content: center;
    gap: .4em; flex-wrap: wrap;
    margin-top: 2em;
}
.pi-pagination .page-numbers {
    /* Motyw już styluje .page-numbers – tu tylko button reset */
    border: none; background: none; cursor: pointer;
    font: inherit;
}
.pi-pagination button.page-numbers:hover { text-decoration: underline; }
.pi-pagination button.page-numbers:disabled { opacity: .35; cursor: default; }

/* Loading / empty states */
.pi-loading    { text-align: center; padding: 2em; opacity: .5; }
.pi-no-results { text-align: center; padding: 2.5em; opacity: .5; font-style: italic; }

/* Form layout */
.pi-field            { margin-bottom: 1.2em; }
.pi-field label      { display: block; margin-bottom: .4em; font-weight: 600; }
.pi-form-footer      { display: flex; gap: .8em; align-items: center; flex-wrap: wrap; margin-top: .5em; }
.pi-form-page-title  { margin-top: 0; }
.pi-form-page-subtitle { opacity: .6; font-style: italic; margin-bottom: 1.5em; margin-top: -.3em; }
.pi-required         { color: var(--wp--preset--color--vivid-red, #c00); }
.pi-optional         { font-weight: 400; font-size: .85em; opacity: .65; }

/* Inputy i textarea – pełna szerokość */
.pi-field input[type="text"],
.pi-field input[type="email"],
.pi-field textarea,
.pi-search-wrap input,
.pi-sort-wrap select {
    width: 100%;
    box-sizing: border-box;
    /* Padding, border, font – wszystko z motywu przez inheritance */
}

@media (max-width: 480px) {
    .pi-card { padding: .9em 1em; }
    .pi-toolbar { gap: .4em; }
}