/* =========================================================================
   KREATO — blog.css
   Single-post / archive specific styling. Inherits tokens from main.css.
   ========================================================================= */

/* Layout — single post */
.single-post-container { padding: 4rem 0; }
.single-layout { display: grid; gap: 3rem; }
.single-layout.sidebar-right { grid-template-columns: minmax(0, 1fr) 320px; }
.single-layout.sidebar-left  { grid-template-columns: 320px minmax(0, 1fr); direction: rtl; }
.single-layout.sidebar-left > *  { direction: ltr; }
.single-layout.sidebar-none  { grid-template-columns: minmax(0, 760px); justify-content: center; }

/* Layout — blog index + archive (category / tag / author / search).
 *
 * Mirrors `.single-layout` but uses its own `.archive-*` class hooks
 * because index.php and archive.php live alongside single.php and we
 * want to be able to tune them independently (different sidebar
 * widths, different gap rhythm, different card padding) without
 * cross-talk.
 *
 * `.archive-container` adds vertical breathing room between the page
 * banner and the post grid; previously this was a bare `.kreato-container`
 * with no padding, which sat the first row of cards flush against the
 * banner's bottom edge. */
.archive-container { padding: 5rem 0; }
.archive-layout    { display: grid; gap: 3rem; align-items: start; }
.archive-layout.sidebar-right { grid-template-columns: minmax(0, 1fr) 320px; }
.archive-layout.sidebar-left  { grid-template-columns: 320px minmax(0, 1fr); }
.archive-layout.sidebar-none  { grid-template-columns: minmax(0, 1fr); }
.archive-layout.sidebar-left  .archive-content { order: 2; }
.archive-layout.sidebar-left  .archive-sidebar { order: 1; }

.archive-content { min-width: 0; display: flex; flex-direction: column; gap: 3rem; }
.archive-sidebar { display: flex; flex-direction: column; gap: 2rem; position: sticky; top: calc(var(--header-h, 80px) + 1.5rem); }

.archive-description {
    color: var(--color-text-2);
    font-size: var(--text-body-lg);
    line-height: 1.6;
    margin: 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

/* When the archive has a sidebar, the content column ends up ~830px
 * wide inside a 1200px container — three cards in that space leaves
 * each one too narrow. Cap to 2 columns under those conditions; the
 * customer can still get a true 3-up grid by switching the sidebar
 * setting to "none" in Kreato Options. */
.archive-layout.sidebar-right .kreato-post-grid.columns-3,
.archive-layout.sidebar-right .kreato-post-grid.columns-4,
.archive-layout.sidebar-left  .kreato-post-grid.columns-3,
.archive-layout.sidebar-left  .kreato-post-grid.columns-4 { --cols: 2; }

/* Make blog cards a bit roomier — the existing rules in main.css set a
 * 1.5rem body padding, which was fine for the homepage 3-up preview
 * but felt cramped on the wider archive cards. */
.archive-content .kreato-card__body { padding: 1.75rem; }
.archive-content .kreato-card__title { font-size: var(--text-h3); line-height: 1.2; }
.archive-content .kreato-card__excerpt { line-height: 1.65; }
.archive-content .kreato-card__meta { padding-top: 0.75rem; border-top: 1px solid var(--color-border); margin-top: 1rem; }

/* Per-layout post-grid tuning. The `blog-layout--*` modifier on
 * `.archive-content` lets the customer pick a layout in Kreato Options
 * without having to also pick the column count. */
.archive-content.blog-layout--list .kreato-post-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
}
.archive-content.blog-layout--list .kreato-card {
    display: grid;
    grid-template-columns: 320px 1fr;
    align-items: stretch;
}
.archive-content.blog-layout--list .kreato-card__media-link { aspect-ratio: 4/3; }
.archive-content.blog-layout--list .kreato-card__body { padding: 1.75rem 2rem; align-self: center; }

/* Archive responsive breakpoints — sidebar drops below grid on tablet
 * and the grid collapses to a single column on phones. */
@media (max-width: 1199px) {
    .archive-layout.sidebar-right,
    .archive-layout.sidebar-left { grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 991px) {
    .archive-container { padding: 3rem 0; }
    .archive-layout,
    .archive-layout.sidebar-right,
    .archive-layout.sidebar-left  { grid-template-columns: 1fr; gap: 2.5rem; }
    .archive-layout.sidebar-left  .archive-content,
    .archive-layout.sidebar-left  .archive-sidebar { order: initial; }
    .archive-sidebar { position: static; }
    .archive-content.blog-layout--list .kreato-card { grid-template-columns: 1fr; }
    .archive-content.blog-layout--list .kreato-card__media-link { aspect-ratio: 16/10; }
}

.single-post .entry-content { font-size: var(--text-body-lg); color: var(--color-text); }
.single-post .entry-content p { margin: 0 0 1.5em; }
.single-post .entry-content > * + h2,
.single-post .entry-content > * + h3 { margin-top: 2em; }
.single-post .entry-content img,
.single-post .entry-content .wp-block-image { border-radius: var(--radius-lg); }
.single-post .entry-content figure { margin: 2em 0; }

.entry-footer { margin: 3rem 0 2rem; padding-top: 2rem; border-top: 1px solid var(--color-border); display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }

/* Tags */
.kreato-tags { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.kreato-tags__label { font-size: var(--text-sm); color: var(--color-text-3); text-transform: uppercase; letter-spacing: 0.12em; }
.kreato-tags ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.kreato-tags a { background: var(--color-bg-2); padding: 0.4em 0.9em; border-radius: var(--radius-pill); font-size: var(--text-sm); transition: background var(--transition-fast); }
.kreato-tags a:hover { background: var(--color-text); color: var(--color-bg); }

/* Share bar */
.kreato-share { display: flex; align-items: center; gap: 1rem; }
.kreato-share__label { font-size: var(--text-sm); color: var(--color-text-3); text-transform: uppercase; letter-spacing: 0.12em; }
.kreato-share__list { display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.kreato-share__btn { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; background: transparent; color: var(--color-text); border: 1px solid var(--color-border); border-radius: 50%; transition: background var(--transition-fast), color var(--transition-fast); }
.kreato-share__btn:hover { background: var(--color-text); color: var(--color-bg); }

/* Author box */
.kreato-author-box { display: flex; gap: 1.5rem; padding: 2rem; background: var(--color-bg-2); border-radius: var(--radius-lg); margin: 3rem 0; }
.kreato-author-box__avatar img { border-radius: 50%; }
.kreato-author-box__name { font-family: var(--font-heading); font-size: var(--text-h4); font-weight: 700; margin: 0 0 0.5rem; }
.kreato-author-box__bio { color: var(--color-text-2); margin: 0 0 0.5rem; }
.kreato-author-box__site { color: var(--color-accent); font-weight: 600; font-size: var(--text-sm); }

/* Related */
.kreato-related { margin: 4rem 0 2rem; padding-top: 3rem; border-top: 1px solid var(--color-border); }
.kreato-related__heading { margin-bottom: 1.5rem; }
.kreato-related__grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.kreato-related__grid.columns-2 { --cols: 2; }
.kreato-related__grid.columns-3 { --cols: 3; }

/* Post navigation */
.kreato-post-navigation { margin: 2rem 0; padding: 1.5rem 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.kreato-post-navigation .nav-links { display: flex; gap: 2rem; justify-content: space-between; }
.kreato-post-navigation .nav-subtitle { display: block; font-size: var(--text-xs); color: var(--color-text-3); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.25rem; }
.kreato-post-navigation .nav-title { font-weight: 600; }

/* Post format media */
.post-format { margin: 0 0 2rem; border-radius: var(--radius-lg); overflow: hidden; }
.post-format--quote { background: var(--color-bg-2); padding: 2rem; text-align: center; border-radius: var(--radius-lg); }
.post-format--quote .post-format__quote { border: none; padding: 0; margin: 0; font-size: var(--text-h3); font-style: italic; }
.post-format__embed iframe { width: 100%; aspect-ratio: 16/9; }

/* Comments */
.kreato-comments { margin: 2rem 0; }
.kreato-comments .comments-title { margin-bottom: 2rem; font-size: var(--text-h3); }
.kreato-comments .comment-list { list-style: none; padding: 0; margin: 0 0 3rem; }
.kreato-comments .comment-list .comment, .kreato-comments .comment-list .pingback { padding: 1.5rem 0; border-bottom: 1px solid var(--color-border); }
.kreato-comments .comment-list .children { list-style: none; padding-left: 2rem; margin-top: 1.5rem; border-left: 2px solid var(--color-border); }
.kreato-comments .comment-author { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.5rem; }
.kreato-comments .comment-author .avatar { border-radius: 50%; }
.kreato-comments .comment-content p { margin: 0 0 0.75em; }
.kreato-comments .comment-meta a { color: var(--color-text-3); font-size: var(--text-sm); }

/* Pagination */
.kreato-pagination { margin: 3rem 0; }
.kreato-pagination .nav-links { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.kreato-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 44px;
    padding: 0 0.75em;
    border: 1px solid var(--color-border-2);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.kreato-pagination .page-numbers:hover, .kreato-pagination .page-numbers.current {
    background: var(--color-text); color: var(--color-bg); border-color: var(--color-text);
}

.kreato-loadmore { display: inline-flex; align-items: center; gap: 0.5rem; }
.kreato-loadmore__spinner { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
.kreato-loadmore.is-loading .kreato-loadmore__spinner { display: inline-block; }
.kreato-loadmore.is-loading { opacity: 0.7; pointer-events: none; }

/* Sidebar widgets — scoped to .widget-area so footer widgets are unaffected */
.widget-area { display: flex; flex-direction: column; gap: 2rem; }
.widget-area .widget { background: var(--color-bg-2); border-radius: var(--radius-lg); padding: 1.5rem; }
.widget-title { font-size: var(--text-body-lg); margin: 0 0 1rem; }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li { padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); }
.widget ul li:last-child { border-bottom: none; }
.widget ul li a { color: var(--color-text-2); transition: color var(--transition-fast); }
.widget ul li a:hover { color: var(--color-accent); }

/* Author archive card */
.author-card { display: flex; gap: 2rem; padding: 3rem 0; border-bottom: 1px solid var(--color-border); margin-bottom: 3rem; align-items: center; }
.author-avatar img { border-radius: 50%; }
.author-name { margin: 0 0 0.5rem; }
.author-bio { color: var(--color-text-2); margin: 0 0 0.5rem; max-width: 640px; }
.author-website { color: var(--color-accent); font-weight: 600; }

/* Comment form — reply form below the comments list */
.kreato-comments .comment-respond { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--color-border); }
/* When no comments exist, the form is the only child — strip the separator spacing */
.kreato-comments > .comment-respond:first-child:last-child { margin-top: 0; padding-top: 0; border-top: none; }
.kreato-comments .comment-reply-title { font-size: var(--text-h3); margin: 0 0 1.5rem; }
.kreato-comments .comment-reply-title small { display: block; font-size: var(--text-sm); font-weight: 400; margin-top: 0.25rem; }
.kreato-comments .comment-reply-title small a { color: var(--color-accent); text-decoration: none; }
.kreato-comments .comment-form { display: grid; gap: 1.25rem; }
.kreato-comments .comment-form p { margin: 0; }
.kreato-comments .comment-form label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: 0.4rem; color: var(--color-text-2); }
.kreato-comments .comment-form input[type="text"],
.kreato-comments .comment-form input[type="email"],
.kreato-comments .comment-form input[type="url"],
.kreato-comments .comment-form textarea {
    width: 100%;
    background: var(--color-bg-2);
    border: 1px solid var(--color-border-2);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-body);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.kreato-comments .comment-form input[type="text"]:focus,
.kreato-comments .comment-form input[type="email"]:focus,
.kreato-comments .comment-form input[type="url"]:focus,
.kreato-comments .comment-form textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-glow);
}
.kreato-comments .comment-form textarea { min-height: 160px; resize: vertical; }
.kreato-comments .comment-form .comment-notes,
.kreato-comments .comment-form .logged-in-as { color: var(--color-text-3); font-size: var(--text-sm); margin: 0; }
.kreato-comments .comment-form .form-submit { margin: 0; }
/* 2-col layout for name / email / url fields on wider screens */
@media (min-width: 640px) {
    .kreato-comments .comment-form-author,
    .kreato-comments .comment-form-email { display: inline-block; width: calc(50% - 0.625rem); vertical-align: top; }
    .kreato-comments .comment-form-author { margin-right: 1.25rem; }
}

/* Search page header */
.search-header { margin-bottom: 3rem; }
.search-title { font-size: var(--text-h2); margin: 0 0 1rem; }
.search-title span { color: var(--color-accent); }