html {
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

a,
button,
input,
textarea,
select {
    -webkit-tap-highlight-color:
        rgba(216, 169, 34, 0.2);
}

.article-body,
.page-content,
.comment-body {
    overflow-wrap: anywhere;
}

.hero-card img,
.article-card img,
.card-image,
.side-story img,
.category-main img,
.category-side-item img {
    background: #e9e3d8;
}

@media (max-width: 768px) {
    .container {
        width: calc(100% - 24px);
    }

    .topbar-inner {
        justify-content: center;
        min-height: 34px;
        font-size: 12px;
    }

    .topbar-message {
        display: none;
    }

    .masthead-inner {
        align-items: stretch;
        flex-direction: column;
        min-height: auto;
        padding: 16px 0;
        gap: 15px;
    }

    .brand-logo {
        width: min(280px, 85%);
        margin-inline: auto;
    }

    .brand-logo img {
        width: 100%;
        max-height: 82px;
    }

    .search-form {
        width: 100%;
    }

    .search-form input {
        min-height: 46px;
        font-size: 16px;
    }

    .search-form button {
        min-height: 46px;
        padding-inline: 16px;
    }

    .navigation {
        position: relative;
    }

    .navigation-inner {
        min-height: 50px;
        gap: 22px;
        padding-right: 20px;
        scroll-snap-type: x proximity;
    }

    .navigation a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        scroll-snap-align: start;
    }

    .navigation a::after {
        bottom: 0;
    }

    .breaking-news-inner {
        min-height: 43px;
    }

    .breaking-label {
        padding-inline: 10px;
        font-size: 9px;
        letter-spacing: 0.03em;
    }

    .breaking-content {
        padding-inline: 11px;
    }

    .breaking-time {
        display: none;
    }

    .breaking-content a {
        font-size: 13px;
    }

    main {
        padding: 27px 0 50px;
    }

    .section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
        margin-bottom: 19px;
    }

    .section-title {
        font-size: 28px;
    }

    .section-title::before {
        width: 5px;
        height: 22px;
        margin-right: 9px;
    }

    .hero-grid {
        display: block;
        margin-bottom: 45px;
    }

    .hero-card {
        height: 460px;
        min-height: 460px;
        margin-bottom: 18px;
    }

    .hero-card img,
    .hero-main-image {
        width: 100%;
        height: 460px;
        min-height: 460px;
        object-fit: cover;
    }

    .hero-overlay {
        padding: 24px 20px;
    }

    .hero-title {
        font-size: clamp(29px, 9vw, 42px);
    }

    .hero-excerpt {
        display: none;
    }

    .side-stories {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .side-story {
        grid-template-columns: 105px minmax(0, 1fr);
    }

    .side-story img,
    .side-story .image-placeholder {
        width: 105px;
        min-height: 115px;
    }

    .side-story-content {
        padding: 12px;
    }

    .side-story h3 {
        font-size: 16px;
    }

    .articles-grid,
    .grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .article-card img,
    .card-image {
        width: 100%;
        height: 220px;
        object-fit: cover;
    }

    .article-card-content,
    .card-content {
        padding: 18px;
    }

    .article-card h3,
    .card h3 {
        font-size: 21px;
    }

    .article h1 {
        font-size: clamp(34px, 10vw, 48px);
        line-height: 1.08;
    }

    .article-excerpt {
        font-size: 19px;
    }

    .article-information {
        align-items: flex-start;
        flex-direction: column;
    }

    .article-image {
        width: calc(100% + 24px);
        max-width: none;
        max-height: 440px;
        margin-left: -12px;
        border-radius: 0;
        object-fit: cover;
    }

    .article-body {
        font-size: 18px;
        line-height: 1.8;
    }

    .article-body iframe,
    .article-body video {
        width: 100%;
        max-width: 100%;
    }

    .share-buttons {
        grid-template-columns: 1fr 1fr;
    }

    .share-button {
        width: 100%;
        min-height: 46px;
    }

    .comment-form-row,
    .contact-row {
        grid-template-columns: 1fr;
    }

    .comment-field input,
    .comment-field textarea,
    .contact-field input,
    .contact-field textarea {
        font-size: 16px;
    }

    .comment-submit,
    .contact-submit {
        width: 100%;
        min-height: 48px;
    }
}

@media (max-width: 390px) {
    .container {
        width: calc(100% - 18px);
    }

    .brand-logo {
        width: 245px;
    }

    .search-form button {
        padding-inline: 12px;
        font-size: 13px;
    }

    .hero-card,
    .hero-card img,
    .hero-main-image {
        height: 420px;
        min-height: 420px;
    }

    .hero-overlay {
        padding: 20px 16px;
    }

    .hero-title {
        font-size: 29px;
    }

    .share-buttons {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}