/* This file is part of Moodle and is licensed under the
 * GNU General Public License, version 3 or later.
 *
 * Moodle is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 */

/**
 * Public News (blog) SPA — scoped styles for local_tvtnews.
 *
 * @package    local_tvtnews
 * @copyright  2026 TVTstudy
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 *
 * Colours/spacing/fonts come from the Modern Commerce design-system tokens
 * (design-system.css) with plain fallbacks so the page never depends on it.
 */

.tvtnews-page {
    --tvt-page-bg: var(--mc-page-bg, #f5f7fb);
    --tvt-surface: var(--mc-card-bg, #ffffff);
    --tvt-text: var(--mc-text, #1f2937);
    --tvt-text-muted: var(--mc-text-muted, #6b7280);
    --tvt-border: var(--mc-border, #e5e7eb);
    --tvt-primary: var(--mc-primary, #2563eb);
    --tvt-link: var(--mc-link, var(--tvt-primary));
    --tvt-radius: var(--mc-radius, 0.75rem);
    --tvt-radius-lg: var(--mc-radius-lg, 1rem);
    --tvt-shadow: var(--mc-shadow-sm, 0 1px 2px rgba(16, 24, 40, 0.06));
    --tvt-shadow-hover: var(--mc-shadow-md, 0 12px 24px -8px rgba(16, 24, 40, 0.18));
}

/* Layout ---------------------------------------------------------------- */

.tvtnews-shell .tvtnews-container {
    max-width: 1180px;
    margin-inline: auto;
    padding: var(--mc-space-5, 1.5rem) var(--mc-space-4, 1rem) var(--mc-space-8, 2rem);
}

/* Listing header -------------------------------------------------------- */

.tvtnews-page-header h1 {
    margin: 0 0 var(--mc-space-1, 0.25rem);
    font-family: var(--mc-font-heading, inherit);
    font-size: var(--mc-fs-h1, 2rem);
    line-height: var(--mc-lh-heading, 1.2);
    color: var(--mc-heading-color, var(--tvt-text));
}

.tvtnews-page-header__subtitle {
    margin: 0 0 var(--mc-space-6, 1.5rem);
    color: var(--tvt-text-muted);
    font-size: var(--mc-fs-lead, 1.0625rem);
}

/* Card grid ------------------------------------------------------------- */

.tvtnews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--mc-space-5, 1.5rem);
}

.tvtnews-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--tvt-surface);
    border: 1px solid var(--tvt-border);
    border-radius: var(--tvt-radius);
    box-shadow: var(--tvt-shadow);
    transition: box-shadow var(--mc-transition, 0.2s ease), transform var(--mc-transition, 0.2s ease);
}

.tvtnews-card:hover {
    box-shadow: var(--tvt-shadow-hover);
    transform: translateY(-3px);
}

.tvtnews-card__link {
    display: block;
    outline: none;
}

.tvtnews-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--mc-bg-muted, #eef1f6);
}

.tvtnews-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--mc-transition-slow, 0.3s ease);
}

.tvtnews-card:hover .tvtnews-card__media img {
    transform: scale(1.04);
}

.tvtnews-card__media-fallback,
.tvtnews-media-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--mc-text-subtle, #9ca3af);
    font-size: 2rem;
    background: linear-gradient(135deg, var(--mc-bg-muted, #eef1f6), var(--mc-surface-alt, #f9fafb));
}

.tvtnews-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--mc-space-3, 0.75rem);
    padding: var(--mc-space-4, 1rem) var(--mc-space-4, 1rem) var(--mc-space-5, 1.5rem);
    flex: 1;
}

.tvtnews-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mc-space-3, 0.75rem);
    color: var(--mc-meta-color, var(--tvt-text-muted));
    font-size: var(--mc-fs-meta, 0.8125rem);
}

.tvtnews-card__meta i {
    margin-right: 0.25rem;
}

.tvtnews-card__title {
    margin: 0;
    font-family: var(--mc-font-heading, inherit);
    font-size: var(--mc-fs-h4, 1.0625rem);
    line-height: var(--mc-lh-heading, 1.3);
}

.tvtnews-card__title a {
    color: var(--mc-heading-color, var(--tvt-text));
    text-decoration: none;
}

.tvtnews-card__title a:hover,
.tvtnews-card__title a:focus-visible {
    color: var(--tvt-link);
}

.tvtnews-card__excerpt {
    margin: 0;
    color: var(--tvt-text-muted);
    font-size: var(--mc-fs-body, 0.9375rem);
    line-height: var(--mc-lh-body, 1.6);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tvtnews-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mc-space-2, 0.5rem);
    margin-top: auto;
    padding-top: var(--mc-space-2, 0.5rem);
}

/* Tag pills ------------------------------------------------------------- */

.tvtnews-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border-radius: var(--mc-radius-pill, 999px);
    background: var(--mc-badge-bg, rgba(37, 99, 235, 0.1));
    border: 1px solid var(--mc-badge-border, rgba(37, 99, 235, 0.18));
    color: var(--mc-badge-text, var(--tvt-primary));
    font-size: var(--mc-fs-micro, 0.75rem);
    text-decoration: none;
    line-height: 1.5;
}

.tvtnews-tag:hover,
.tvtnews-tag:focus-visible {
    background: var(--mc-badge-bg-strength, rgba(37, 99, 235, 0.18));
    color: var(--mc-badge-strong-text, var(--tvt-primary));
}

/* Load more / end ------------------------------------------------------- */

.tvtnews-loadmore {
    display: flex;
    justify-content: center;
    margin-top: var(--mc-space-6, 1.5rem);
}

.tvtnews-loadmore .mc-button .mc-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.tvtnews-loadmore .mc-loading i,
.tvtnews-error__retry .bi {
    animation: tvtnews-spin 0.9s linear infinite;
}

.tvtnews-loadmore .mc-loading i.bi-arrow-clockwise {
    animation: none;
}

.tvtnews-end {
    margin: var(--mc-space-6, 1.5rem) 0 0;
    text-align: center;
    color: var(--mc-text-subtle, #9ca3af);
    font-size: var(--mc-fs-meta, 0.8125rem);
}

.tvtnews-empty {
    margin-block: var(--mc-space-6, 1.5rem);
}

.tvtnews-error .mc-alert__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mc-space-3, 0.75rem);
}

/* Article page ---------------------------------------------------------- */

.tvtnews-article-wrap {
    max-width: 860px;
    margin-inline: auto;
    padding: var(--mc-space-5, 1.5rem) var(--mc-space-4, 1rem) var(--mc-space-8, 2rem);
}

.tvtnews-back {
    margin-bottom: var(--mc-space-6, 1.5rem);
}

.tvtnews-article {
    background: var(--tvt-surface);
    border: 1px solid var(--tvt-border);
    border-radius: var(--tvt-radius-lg);
    box-shadow: var(--tvt-shadow);
    padding: var(--mc-space-6, 1.5rem) var(--mc-space-5, 1.5rem) var(--mc-space-8, 2rem);
}

.tvtnews-article__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mc-space-2, 0.5rem);
    margin-bottom: var(--mc-space-4, 1rem);
}

.tvtnews-article__title {
    margin: 0 0 var(--mc-space-4, 1rem);
    font-family: var(--mc-font-heading, inherit);
    font-size: var(--mc-fs-display, clamp(1.6rem, 3vw, 2.25rem));
    line-height: var(--mc-lh-heading, 1.2);
    color: var(--mc-heading-color, var(--tvt-text));
}

.tvtnews-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mc-space-4, 1rem);
    color: var(--mc-meta-color, var(--tvt-text-muted));
    font-size: var(--mc-fs-meta, 0.875rem);
    padding-bottom: var(--mc-space-5, 1.5rem);
    margin-bottom: var(--mc-space-5, 1.5rem);
    border-bottom: 1px solid var(--tvt-border);
}

.tvtnews-article__meta i {
    margin-right: 0.35rem;
}

.tvtnews-article__cover {
    display: block;
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    border-radius: var(--mc-radius, 0.75rem);
    margin-bottom: var(--mc-space-5, 1.5rem);
}

.tvtnews-article__body {
    color: var(--mc-body-color, var(--tvt-text));
    font-size: var(--mc-fs-body, 1rem);
    line-height: var(--mc-lh-body, 1.75);
    word-wrap: break-word;
}

.tvtnews-article__body h2,
.tvtnews-article__body h3,
.tvtnews-article__body h4 {
    font-family: var(--mc-font-heading, inherit);
    color: var(--mc-heading-color, var(--tvt-text));
    line-height: var(--mc-lh-heading, 1.3);
    margin: 1.5em 0 0.5em;
}

.tvtnews-article__body p {
    margin: 0 0 1em;
}

.tvtnews-article__body ul,
.tvtnews-article__body ol {
    margin: 0 0 1em;
    padding-left: 1.5em;
}

.tvtnews-article__body li {
    margin-bottom: 0.25em;
}

.tvtnews-article__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--mc-radius, 0.5rem);
}

.tvtnews-article__body a {
    color: var(--tvt-link);
}

.tvtnews-article__body blockquote {
    margin: 1.25em 0;
    padding: 0.5em 1.25em;
    border-left: 3px solid var(--mc-border-strong, #d1d5db);
    color: var(--tvt-text-muted);
}

.tvtnews-article__body pre,
.tvtnews-article__body code {
    font-family: var(--mc-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.tvtnews-article__body pre {
    overflow-x: auto;
    padding: var(--mc-space-4, 1rem);
    background: var(--mc-bg-muted, #f3f4f6);
    border-radius: var(--mc-radius, 0.5rem);
}

.tvtnews-article__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1em;
}

.tvtnews-article__body th,
.tvtnews-article__body td {
    border: 1px solid var(--tvt-border);
    padding: 0.5em 0.75em;
    text-align: left;
}

.tvtnews-article__body iframe,
.tvtnews-article__body video {
    max-width: 100%;
    border-radius: var(--mc-radius, 0.5rem);
}

/* Related --------------------------------------------------------------- */

.tvtnews-related {
    margin-top: var(--mc-space-8, 2rem);
    padding-top: var(--mc-space-6, 1.5rem);
    border-top: 1px solid var(--tvt-border);
}

.tvtnews-related h2 {
    margin: 0 0 var(--mc-space-4, 1rem);
    font-family: var(--mc-font-heading, inherit);
    font-size: var(--mc-fs-h3, 1.25rem);
    color: var(--mc-heading-color, var(--tvt-text));
}

.tvtnews-related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--mc-space-4, 1rem);
}

.tvtnews-related__card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--mc-surface-raised, #fbfcfe);
    border: 1px solid var(--tvt-border);
    border-radius: var(--mc-radius, 0.75rem);
}

.tvtnews-related__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--mc-bg-muted, #eef1f6);
}

.tvtnews-related__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tvtnews-related__body {
    padding: var(--mc-space-3, 0.75rem);
}

.tvtnews-related__title {
    margin: 0 0 var(--mc-space-1, 0.25rem);
    font-family: var(--mc-font-heading, inherit);
    font-size: var(--mc-fs-body, 0.9375rem);
    line-height: var(--mc-lh-heading, 1.35);
}

.tvtnews-related__title a {
    color: var(--mc-heading-color, var(--tvt-text));
    text-decoration: none;
}

.tvtnews-related__title a:hover,
.tvtnews-related__title a:focus-visible {
    color: var(--tvt-link);
}

.tvtnews-related__date {
    color: var(--mc-meta-color, var(--tvt-text-muted));
    font-size: var(--mc-fs-micro, 0.75rem);
}

/* Skeleton -------------------------------------------------------------- */

.tvtnews-skeleton--list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--mc-space-5, 1.5rem);
}

.tvtnews-skeleton--list .tvtnews-skeleton__card {
    display: flex;
    flex-direction: column;
}

.tvtnews-skeleton--post {
    max-width: 52rem;
    margin: 0 auto;
    padding: var(--mc-space-4, 1rem);
}

@keyframes tvtnews-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Reduced motion -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .tvtnews-card,
    .tvtnews-card__media img,
    .tvtnews-loadmore .mc-button .mc-loading i,
    .tvtnews-error__retry .bi {
        animation: none;
        transition: none;
    }
}

/* Small screens --------------------------------------------------------- */

@media (max-width: 576px) {
    .tvtnews-article {
        padding: var(--mc-space-4, 1rem);
    }
}