/* ============================================
   PAGE: Blog
   Description: Styles for blog listing page
   and blog post detail page. Uses existing
   design tokens from base.css.
   ============================================ */

/* ----- Blog Listing ----- */

.blog-listing {
    padding: var(--space-4xl) 0;
    background:
        radial-gradient(ellipse 80% 50% at 10% 0%, rgba(255, 100, 133, 0.08), transparent 55%),
        radial-gradient(ellipse 60% 40% at 90% 10%, rgba(255, 100, 133, 0.05), transparent 50%),
        var(--color-white);
}

.blog-listing__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.blog-listing__header {
    text-align: center;
    margin-bottom: var(--space-3xl);
}

.blog-listing__title {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-md);
}

.blog-listing__description {
    max-width: 600px;
    margin: 0 auto;
    font-size: var(--text-lg);
    color: var(--color-gray-600);
}

.blog-listing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.blog-listing__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    margin-top: var(--space-3xl);
}

.blog-listing__load-more {
    display: flex;
    justify-content: center;
    margin-top: var(--space-3xl);
}

.blog-listing__load-more .btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

.blog-listing__page-info {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

.blog-listing__empty {
    text-align: center;
    padding: var(--space-4xl) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
}

.blog-listing__empty-text {
    font-size: var(--text-lg);
    color: var(--color-gray-500);
    margin: 0;
}


/* ----- Post Card ----- */

.post-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-white);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.post-card__image-link {
    display: block;
    flex-shrink: 0;
}

.post-card__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.post-card__image--placeholder {
    background: var(--color-primary-light, #ffebf0);
}

.post-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: var(--space-lg);
}

.post-card__title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-sm);
    line-height: var(--line-height-tight);
}

.post-card__title a {
    color: var(--color-gray-900);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.post-card__title a:hover {
    color: var(--color-primary-text);
}

.post-card__excerpt {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin: 0 0 var(--space-md);
    line-height: var(--line-height-relaxed);
}

.post-card__meta {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-top: auto;
    padding-top: var(--space-md);
    font-size: var(--text-xs);
    color: var(--color-gray-400);
}

.post-card__date {
    display: block;
}


/* ----- Blog Post Detail ----- */

.blog-post {
    /* Match navbar / editor outer gutter so content aligns on wide screens. */
    --blog-post-side-extra: 24px;
    padding: var(--space-4xl) calc(var(--section-side-padding) + var(--blog-post-side-extra));
    background:
        radial-gradient(ellipse 70% 45% at 100% 0%, rgba(255, 100, 133, 0.06), transparent 55%),
        var(--color-white);
}

.blog-post__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0;
}

.blog-post__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: var(--space-3xl);
    align-items: start;
}

.blog-post__main {
    min-width: 0;
}

.blog-post__back {
    display: inline-block;
    font-size: var(--text-sm);
    color: var(--color-primary-text);
    text-decoration: none;
    margin-bottom: var(--space-xl);
    transition: color var(--transition-fast);
}

.blog-post__back:hover {
    color: var(--color-primary-dark);
}

.blog-post__title {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-md);
    line-height: var(--line-height-tight);
}

.blog-post__meta {
    display: flex;
    gap: var(--space-lg);
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-lg);
}

.blog-post__featured-image {
    margin-bottom: var(--space-2xl);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.blog-post__featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

.blog-post__content {
    font-size: var(--text-lg);
    line-height: var(--line-height-relaxed);
    color: var(--color-gray-700);
}

.blog-post__content p {
    margin-bottom: var(--space-lg);
}

.blog-post__content h2,
.blog-post__content h3,
.blog-post__content h4 {
    color: var(--color-text-heading, #0c2733);
    margin: var(--space-2xl) 0 var(--space-md);
    line-height: var(--line-height-tight);
}

.blog-post__content h2 { font-size: var(--text-2xl); }
.blog-post__content h3 { font-size: var(--text-xl); }
.blog-post__content ul,
.blog-post__content ol {
    margin: 0 0 var(--space-lg);
    padding-left: 1.25rem;
}
.blog-post__content li { margin-bottom: var(--space-sm); }
.blog-post__content a {
    color: var(--color-primary-text);
}
.blog-post__content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md, 8px);
    margin: var(--space-lg) 0;
}

.blog-post__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    margin: 0 0 var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-surface-line-soft, #efe8e6);
}

/* Share bar — label + pink Share CTA + circular network icons */
.blog-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    min-width: 0;
}

.blog-share__label {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gray-400, #9a8f8c);
}

.blog-share__main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 18px;
    border: none;
    border-radius: 999px;
    background: var(--color-primary-btn, #ff6485);
    color: var(--color-white, #fff);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    cursor: pointer;
    box-shadow: var(--shadow-pink-btn);
    transition:
        background-color var(--transition-fast),
        transform var(--transition-fast);
}

.blog-share__main:hover,
.blog-share__main:focus-visible {
    background: var(--color-primary-btn-hover, #ea627e);
    transform: translateY(-1px);
    outline: none;
}

.blog-share__main svg {
    flex-shrink: 0;
}

.blog-share__networks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-share__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--color-surface-line-soft, #e8e0dd);
    border-radius: 50%;
    background: #fff;
    color: var(--color-text-heading, #3e2e2d);
    text-decoration: none;
    cursor: pointer;
    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        color var(--transition-fast);
}

.blog-share__icon:hover,
.blog-share__icon:focus-visible {
    border-color: rgba(255, 100, 133, 0.45);
    background: var(--color-primary-bg, #fff5f8);
    color: var(--color-primary-text, #e91e63);
    outline: none;
}

.blog-share__icon[data-copied] {
    border-color: var(--color-primary-btn, #ff6485);
    background: var(--color-primary-bg, #fff5f8);
    color: var(--color-primary-text, #e91e63);
}

/* Recent posts sidebar */
.blog-recent {
    position: sticky;
    top: 100px;
    padding: var(--space-lg);
    border: 1px solid var(--color-surface-line-soft, #efe8e6);
    border-radius: var(--radius-lg, 12px);
    background: var(--color-primary-bg, #fff5f8);
}

.blog-recent__heading {
    margin: 0 0 var(--space-lg);
    font-size: var(--text-lg);
    color: var(--color-text-heading, #0c2733);
}

.blog-recent__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-recent__item + .blog-recent__item {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(255, 100, 133, 0.15);
}

.blog-recent__link {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    text-decoration: none;
    color: inherit;
}

.blog-recent__thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    background: #fff;
}

.blog-recent__title {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
    color: var(--color-text-heading, #0c2733);
}

.blog-recent__link:hover .blog-recent__title {
    color: var(--color-primary-text);
}

.blog-recent__date {
    display: block;
    margin-top: 4px;
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}

.blog-recent__all {
    display: inline-block;
    margin-top: var(--space-lg);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary-text);
    text-decoration: none;
}

.blog-recent__all:hover {
    color: var(--color-primary-dark);
}

.blog-recent__empty {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

.blog-listing__admin-actions {
    margin-top: var(--space-lg);
}

.blog-listing__staff {
    margin-bottom: var(--space-3xl);
    padding: var(--space-lg);
    background: var(--color-primary-bg, #fff5f8);
    border-radius: var(--radius-lg, 12px);
}

.blog-listing__staff-title {
    font-size: var(--text-lg);
    margin: 0 0 var(--space-md);
}

.blog-listing__staff-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.blog-listing__staff-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.blog-listing__staff-item a {
    color: var(--color-text-heading, #0c2733);
    font-weight: 600;
    text-decoration: none;
}

.blog-listing__staff-item a:hover {
    color: var(--color-primary-text);
}

.blog-listing__badge {
    display: inline-block;
    font-size: var(--text-xs);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--color-surface-soft, #f8f8f8);
    color: var(--color-gray-600, #666);
}

.blog-listing__badge--scheduled {
    background: #e8f4fc;
    color: #1a5f7a;
}

/* ----- Staff editor ----- */

.blog-editor {
    /* Same outer gutter as .navbar so the form lines up with the logo / CTA
       on wide screens (>1440). Side padding lives OUTSIDE the 1240 cap. */
    --blog-editor-side-extra: 24px;
    padding: var(--space-4xl) calc(var(--section-side-padding) + var(--blog-editor-side-extra));
    background:
        radial-gradient(ellipse 70% 40% at 0% 0%, rgba(255, 100, 133, 0.07), transparent 55%),
        var(--color-white);
}

.blog-editor__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0;
}

.blog-editor__back {
    display: inline-block;
    font-size: var(--text-sm);
    color: var(--color-primary-text);
    text-decoration: none;
    margin-bottom: var(--space-md);
}

.blog-editor__heading {
    font-size: var(--text-3xl);
    margin: 0 0 var(--space-sm);
}

.blog-editor__hint {
    color: var(--color-gray-500);
    font-size: var(--text-sm);
    margin: 0 0 var(--space-2xl);
}

.blog-editor__field {
    margin-bottom: var(--space-xl);
}

.blog-editor__label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--color-text-heading, #0c2733);
}

.blog-editor__optional {
    font-weight: 400;
    color: var(--color-gray-500);
}

.blog-editor__input,
.blog-editor__textarea {
    width: 100%;
    border: 1px solid var(--color-surface-line, #e1e1e1);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font: inherit;
    background: #fff;
}

.blog-editor__textarea {
    min-height: 200px;
}

.blog-editor__field-error,
.blog-editor__errors {
    color: #b42318;
    font-size: var(--text-sm);
    margin-top: var(--space-xs);
}

.blog-editor__help {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    margin: var(--space-xs) 0 0;
}

.blog-editor__seo {
    margin-bottom: var(--space-xl);
    padding: var(--space-md);
    border: 1px solid var(--color-surface-line, #e1e1e1);
    border-radius: 8px;
}

.blog-editor__seo summary {
    cursor: pointer;
    font-weight: 600;
    margin-bottom: var(--space-md);
}

.blog-editor__schedule {
    margin-bottom: var(--space-2xl);
}

.blog-editor__schedule-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.blog-editor__schedule-row .blog-editor__input {
    flex: 1 1 220px;
    min-width: 0;
}

.blog-editor__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.blog-editor__current-image {
    margin-top: var(--space-sm);
}

.blog-editor__current-image img {
    display: block;
    margin-top: var(--space-xs);
    border-radius: 6px;
    object-fit: cover;
}


/* ----- Responsive ----- */

@media (max-width: 1024px) {
    .blog-listing__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-post__layout {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .blog-recent {
        position: static;
    }
}

@media (max-width: 640px) {
    .blog-listing__grid {
        grid-template-columns: 1fr;
    }

    .blog-listing__title,
    .blog-post__title {
        font-size: var(--text-2xl);
    }

    .blog-post__meta {
        flex-direction: column;
        gap: var(--space-xs);
    }

    .blog-editor__actions {
        flex-direction: column;
    }

    .blog-editor__actions .btn {
        width: 100%;
        text-align: center;
    }
}