/* ── v1.3.1 — Önellátó változó-scope ──────────────────────────────────────
   A journal.css a --pp-* változókat korábban KIZÁRÓLAG a frontend.css
   scope-blokkjaiból örökölte. Két hibamód ellen véd ez a blokk:
   (1) a bejegyzés-szerkesztő wrappere (.pet-plugin-journal-form-wrap) nem
       tagja a frontend.css scope-listájának (1.3.1-ig nem volt az → a gomb
       háttere feloldatlan var miatt átlátszó maradt, a szövege pedig a téma
       surface-tokenjével fehér — fehér a fehéren);
   (2) ha a frontend.css bármiért nem töltődik be (cache/optimalizáló), a
       fájl akkor is teljes értékű. Az értékek szándékosan azonosak a
       frontend.css design-system blokkjával, így együttes betöltésnél ez a
       blokk no-op. A literál fallbackek az eredeti paletta színei. */
.pet-plugin-journal,
.pet-plugin-journal-form-wrap {
    --pp-color-text:         var(--sz-text, #2C2C2A);
    --pp-color-muted:        var(--sz-muted, #5F5E5A);
    --pp-color-soft:         var(--sz-soft, #888780);
    --pp-color-surface:      var(--sz-surface, #FBF7EF);
    --pp-color-border:       rgba(var(--sz-text-rgb, 44, 44, 42), 0.10);
    --pp-color-accent:       var(--sz-accent, #2D4A3E);
    --pp-color-accent-deep:  var(--sz-accent-strong, #243b32);
    --pp-color-on-accent:    var(--sz-on-accent, #ffffff);
    --pp-color-info-bg:      rgba(var(--sz-accent-rgb, 45, 74, 62), 0.05);
    --pp-color-error-bg:     var(--sz-error-bg, #f6e7e3);
    --pp-color-error-border: var(--sz-error-border, #d9b3a8);
    --pp-color-error-text:   var(--sz-error-text, #7a2d1f);
    --pp-color-success-bg:   var(--sz-success-bg, #e9efe4);
    --pp-color-success-text: var(--sz-success-text, #30491f);
    --pp-radius:             4px;
}

.pet-plugin-journal {
    margin: 0 0 2rem 0;
    padding: 0;
}

.pet-plugin-journal-heading {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0 0 1.5rem 0;
    font-size: 1.5rem;
}

.pet-plugin-journal-total {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--pp-color-muted);
}

.pet-plugin-journal-timeline {
    position: relative;
    padding-left: 0;
}

.pet-plugin-journal-year-block + .pet-plugin-journal-year-block {
    margin-top: 2.5rem;
}

.pet-plugin-journal-year-divider {
    display: flex;
    align-items: center;
    margin: 0 0 1.5rem 0;
}

.pet-plugin-journal-year-divider::before,
.pet-plugin-journal-year-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--pp-color-border);
}

.pet-plugin-journal-year-label {
    font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
    font-weight: 500;
    font-size: 1.25rem;
    letter-spacing: 2px;
    color: var(--pp-color-muted);
    padding: 0 1rem;
}

.pet-plugin-journal-entry {
    background: var(--pp-color-surface);
    border: 1px solid var(--pp-color-border);
    border-radius: var(--pp-radius);
    padding: 1.25rem 1.5rem;
    margin: 0 0 1.25rem 0;
    position: relative;
}

.pet-plugin-journal-entry-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 0.75rem 0;
}

.pet-plugin-journal-entry-occasion {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--pp-color-text);
}

.pet-plugin-journal-occasion-label {
    font-weight: 500;
}

.pet-plugin-journal-entry-date {
    font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 1px;
    color: var(--pp-color-soft);
    white-space: nowrap;
}

.pet-plugin-journal-entry-title {
    margin: 0.25rem 0 0.75rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--pp-color-text);
    line-height: 1.4;
}

.pet-plugin-journal-entry-body {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--pp-color-text);
    margin: 0;
    
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.pet-plugin-journal-entry-footer {
    margin: 1rem 0 0 0;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--pp-color-border);
}

.pet-plugin-journal-entry-author {
    font-size: 0.85rem;
    color: var(--pp-color-soft);
    font-style: italic;
}

.pet-plugin-journal-photos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
    margin: 1rem 0 0.25rem 0;
}

.pet-plugin-journal-photo {
    display: block;
    overflow: hidden;
    border-radius: var(--pp-radius);
    aspect-ratio: 4 / 3;
    background: var(--pp-color-border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pet-plugin-journal-photo:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--sz-shadow-rgb), 0.08);
}

.pet-plugin-journal-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pet-plugin-journal-show-more {
    margin: 1.5rem 0 0 0;
    text-align: center;
}

.pet-plugin-journal-show-all-btn,
.pet-plugin-journal-show-less-btn {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    background: transparent;
    color: var(--pp-color-accent);
    border: 1px solid var(--pp-color-accent);
    border-radius: var(--pp-radius);
    text-decoration: none;
    font-size: 0.95rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pet-plugin-journal-show-all-btn:hover,
.pet-plugin-journal-show-less-btn:hover {
    background: var(--pp-color-accent);
    color: var(--pp-color-on-accent, #fff);
}

.pet-plugin-journal-empty {
    background: var(--pp-color-info-bg);
    border: 1px dashed var(--pp-color-border);
    border-radius: var(--pp-radius);
    padding: 1.5rem;
    text-align: center;
}

.pet-plugin-journal-empty-text {
    margin: 0;
    color: var(--pp-color-muted);
    font-size: 0.95rem;
    font-style: italic;
}

@media (max-width: 640px) {
    .pet-plugin-journal-heading {
        font-size: 1.3rem;
    }
    .pet-plugin-journal-entry {
        padding: 1rem 1rem;
    }
    .pet-plugin-journal-entry-header {
        flex-direction: column;
        gap: 0.25rem;
    }
    .pet-plugin-journal-entry-date {
        font-size: 0.8rem;
    }
    .pet-plugin-journal-entry-body {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    .pet-plugin-journal-photos {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 0.4rem;
    }
    .pet-plugin-journal-year-label {
        font-size: 1.1rem;
        padding: 0 0.5rem;
    }
}

.pet-plugin-journal-owner-cta {
    margin: 0 0 1.5rem 0;
    padding: 0;
}

.pet-plugin-journal-new-entry-btn {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    background: var(--pp-color-accent);
    color: var(--pp-color-on-accent, #fff);
    border: 1px solid var(--pp-color-accent);
    border-radius: var(--pp-radius);
    text-decoration: none;
    font-size: 0.95rem;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.pet-plugin-journal-new-entry-btn:hover {
    background: var(--pp-color-accent-deep, var(--pp-color-text));
    color: var(--pp-color-on-accent, #fff);
    transform: translateY(-1px);
}

.pet-plugin-journal-entry-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.pet-plugin-journal-entry-edit-link {
    font-size: 0.85rem;
    color: var(--pp-color-accent);
    text-decoration: none;
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.pet-plugin-journal-entry-edit-link:hover {
    opacity: 1;
    text-decoration: underline;
}

.pet-plugin-journal-form-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1rem;
}

.pet-plugin-journal-form-breadcrumb {
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
}

.pet-plugin-journal-form-breadcrumb a {
    color: var(--pp-color-muted);
    text-decoration: none;
}

.pet-plugin-journal-form-breadcrumb a:hover {
    color: var(--pp-color-accent);
    text-decoration: underline;
}

.pet-plugin-journal-form-heading {
    font-size: 1.75rem;
    margin: 0 0 1.5rem 0;
    color: var(--pp-color-text);
}

.pet-plugin-journal-form .pet-plugin-form-row {
    margin: 0 0 1.5rem 0;
}

.pet-plugin-journal-form label > strong {
    display: block;
    margin: 0 0 0.5rem 0;
    color: var(--pp-color-text);
}

.pet-plugin-journal-form .pet-plugin-form-select,
.pet-plugin-journal-form .pet-plugin-form-input,
.pet-plugin-journal-form .pet-plugin-form-textarea,
.pet-plugin-journal-form .pet-plugin-form-file {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--pp-color-border);
    border-radius: var(--pp-radius);
    font-size: 1rem;
    font-family: inherit;
    background: var(--pp-color-surface);
    color: var(--pp-color-text);
    box-sizing: border-box;
}

.pet-plugin-journal-form .pet-plugin-form-textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.6;
}

.pet-plugin-journal-form .pet-plugin-form-description {
    margin: 0.4rem 0 0 0;
    font-size: 0.85rem;
    color: var(--pp-color-muted);
    font-style: italic;
}

.pet-plugin-journal-charcount {
    font-style: normal;
    color: var(--pp-color-soft);
}

.pet-plugin-journal-status-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.pet-plugin-journal-status-options label {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.pet-plugin-form-hint {
    font-size: 0.85rem;
    color: var(--pp-color-muted);
    font-style: italic;
}

.pet-plugin-journal-existing-photos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    margin: 0.75rem 0;
}

.pet-plugin-journal-existing-photo {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border: 1px solid var(--pp-color-border);
    border-radius: var(--pp-radius);
    padding: 0.5rem;
    background: var(--pp-color-surface);
}

.pet-plugin-journal-existing-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--pp-radius) - 2px);
}

.pet-plugin-journal-existing-keep {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--pp-color-muted);
}

.pet-plugin-journal-form-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.pet-plugin-journal-form-actions .pet-plugin-button-primary {
    padding: 0.75rem 1.5rem;
    background: var(--pp-color-accent);
    color: var(--pp-color-on-accent, #fff);
    border: none;
    border-radius: var(--pp-radius);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.pet-plugin-journal-form-actions .pet-plugin-button-primary:hover {
    background: var(--pp-color-accent-deep, var(--pp-color-text));
}

.pet-plugin-journal-form-actions .pet-plugin-button-secondary {
    padding: 0.75rem 1.25rem;
    background: transparent;
    color: var(--pp-color-muted);
    border: 1px solid var(--pp-color-border);
    border-radius: var(--pp-radius);
    text-decoration: none;
    font-size: 0.95rem;
}

.pet-plugin-journal-form-actions .pet-plugin-button-secondary:hover {
    background: var(--pp-color-info-bg);
}

.pet-plugin-journal-form-delete {
    margin: 2.5rem 0 1rem 0;
    padding: 1rem 0 0 0;
    border-top: 1px dashed var(--pp-color-border);
    text-align: right;
}

.pet-plugin-journal-delete-btn {
    background: transparent;
    color: var(--sz-error);
    border: 1px solid var(--sz-error-border);
    border-radius: var(--pp-radius);
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pet-plugin-journal-delete-btn:hover {
    background: var(--sz-error-bg);
    color: var(--sz-error-text);
    border-color: var(--sz-error-border);
}

.pet-plugin-info {
    margin: 0 0 1.5rem 0;
    padding: 0.75rem 1rem;
    border-radius: var(--pp-radius);
    background: var(--pp-color-info-bg);
    border: 1px solid var(--pp-color-border);
}

.pet-plugin-info-success {
    background: var(--pp-color-success-bg);
    border-color: var(--pp-color-success-text);
    color: var(--pp-color-success-text);
}

.pet-plugin-info-error {
    background: var(--pp-color-error-bg);
    border-color: var(--pp-color-error-border);
    color: var(--pp-color-error-text);
}

.pet-plugin-info p {
    margin: 0;
}

@media (max-width: 640px) {
    .pet-plugin-journal-form-heading {
        font-size: 1.4rem;
    }
    .pet-plugin-journal-form-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .pet-plugin-journal-form-actions .pet-plugin-button-primary,
    .pet-plugin-journal-form-actions .pet-plugin-button-secondary {
        text-align: center;
    }
    .pet-plugin-journal-existing-photos {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
}