/*
 * Responsive rules for the modular single-post Elementor widgets.
 * The semantic classes in this file are scoped to the widget markup so the
 * breakpoints do not change unrelated theme components.
 */

.dn-single-post-widget,
.dn-single-post-widget *,
.dn-single-post-widget *::before,
.dn-single-post-widget *::after {
    box-sizing: border-box;
}

.dn-single-post-widget {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.dn-single-post-widget img,
.dn-single-post-widget iframe,
.dn-single-post-widget video,
.dn-single-post-widget svg {
    max-width: 100%;
}

.dn-single-post-widget a,
.dn-single-post-widget span,
.dn-single-post-widget h4,
.dn-single-post-widget h5,
.dn-single-post-widget p,
.dn-single-post-widget li {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* 1. Post meta */
.dn-meta-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: center !important;
    gap: .625rem .75rem !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.dn-single-post-part-dn_single_post_meta {
    container: dn-meta-widget / inline-size;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.dn-meta-item {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    line-height: 1.8;
    border-radius: .625rem;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}

.dn-meta-item > span {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dn-meta-code {
    margin-inline-start: 0 !important;
}

.dn-meta-code > span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 2. Related/most-viewed column */
.dn-related-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1rem !important;
    width: 100%;
    min-width: 0;
}

.dn-single-post-related-column {
    container: dn-related-column / inline-size;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.dn-single-post-related-column > .dn-related-layout {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.dn-related-card,
.dn-related-item,
.dn-related-copy,
.dn-most-item {
    min-width: 0;
    max-width: 100%;
}

.dn-related-card {
    width: 100%;
}

.dn-related-item {
    width: 100%;
    overflow: hidden;
    align-items: flex-start;
}

.dn-related-thumb {
    flex: 0 0 4rem;
}

.dn-related-copy {
    overflow: hidden;
}

.dn-related-copy h5,
.dn-related-copy span {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.dn-related-card h4 {
    max-width: 100%;
    line-height: 1.7;
}

/* 3. Advertisement column */
.dn-ads-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .75rem !important;
    width: 100%;
    min-width: 0;
}

.dn-single-post-ads-column {
    container: dn-ads-column / inline-size;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.dn-single-post-ads-column > div,
.dn-single-post-ads-column .dn-ads-layout {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.dn-ad-slot {
    width: 100%;
    min-width: 0;
    min-height: 0 !important;
    aspect-ratio: 3 / 2;
    height: auto;
    isolation: isolate;
    transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.dn-ad-slot:hover {
    transform: translateY(-2px);
}

.dn-ad-slot > a,
.dn-ad-slot > a > img,
.dn-ad-slot img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* 4. Breadcrumb */
.dn-breadcrumb-nav {
    display: block !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.dn-breadcrumb-list {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: .25rem .5rem !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    line-height: 1.9;
}

.dn-breadcrumb-list > .dn-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    line-height: inherit;
}

.dn-breadcrumb-list .dn-breadcrumb > span,
.dn-breadcrumb-list .dn-breadcrumb > a,
.dn-breadcrumb-list .dn-breadcrumb > .breadcrumb-categories > a,
.dn-breadcrumb-list .dn-breadcrumb > .breadcrumb-taxonomy > a {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dn-breadcrumb-custom-text {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dn-breadcrumb-list > *,
.dn-breadcrumb-list a {
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* 5. Share bar and author card */
.dn-share-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: .75rem !important;
    width: 100%;
    min-width: 0;
    padding: .75rem !important;
    overflow: hidden;
}

.dn-single-post-part-dn_single_post_share {
    container: dn-share-widget / inline-size;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.dn-share-link {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    width: 100% !important;
    min-width: 0;
    gap: .5rem !important;
    padding: .625rem .75rem !important;
}

.dn-share-link span,
.dn-share-link input {
    min-width: 0;
}

.dn-share-link input {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(.7rem, 2.5vw, .875rem);
    min-width: 0;
}

.dn-share-actions {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0;
    gap: .5rem !important;
}

.dn-share-actions > span {
    margin-inline-start: 0 !important;
}

.dn-share-actions > a,
.dn-share-link button {
    flex: 0 0 auto;
}

.dn-share-author {
    width: 100%;
    min-width: 0;
}

.dn-share-author-info {
    overflow: hidden;
}

.dn-share-author-info a {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dn-share-author-action {
    flex: 0 0 auto;
}

.dn-share-bar > *,
.dn-share-author > * {
    min-width: 0;
    max-width: 100%;
}

.dn-share-actions > a,
.dn-share-link > button {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

@container dn-share-widget (max-width: 479px) {
    .dn-share-bar {
        padding: .75rem !important;
        gap: .75rem !important;
    }

    .dn-share-link {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: .625rem .75rem !important;
    }

    .dn-share-link > span {
        grid-column: 1 / -1;
        line-height: 1.7;
    }

    .dn-share-actions {
        justify-content: flex-start !important;
    }

    .dn-share-actions > a,
    .dn-share-link > button {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    .dn-share-author {
        align-items: center !important;
        gap: .625rem !important;
        padding: .75rem !important;
    }

    .dn-share-author-info a {
        font-size: .875rem !important;
    }
}

@container dn-share-widget (min-width: 480px) and (max-width: 767px) {
    .dn-share-bar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 1rem !important;
    }

    .dn-share-link {
        width: 100% !important;
        max-width: 100%;
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .dn-share-actions {
        width: 100% !important;
        justify-content: center !important;
    }
}

@container dn-share-widget (min-width: 768px) {
    .dn-share-bar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .dn-share-link {
        width: auto !important;
        max-width: 68%;
        flex: 1 1 auto;
    }

    .dn-share-actions {
        width: auto !important;
        flex: 0 0 auto;
        justify-content: flex-end !important;
    }
}

/* 6. Tags */
.dn-tags-widget {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    container: dn-tags-widget / inline-size;
}

.dn-tags-title-row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    line-height: 1.8;
}

.dn-tags-list {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: .5rem !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.dn-tag-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.7;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.dn-tags-title-row > span:last-child,
.dn-tags-title-row .i-lucide-tags {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

@container dn-tags-widget (max-width: 399px) {
    .dn-tags-widget {
        margin-bottom: 1.25rem !important;
    }

    .dn-tags-title-row {
        gap: .5rem !important;
        margin-bottom: .75rem !important;
        font-size: .875rem !important;
    }

    .dn-tags-list {
        gap: .375rem !important;
    }

    .dn-tag-link {
        padding: .375rem .625rem !important;
        font-size: .6875rem !important;
        border-radius: .625rem !important;
    }
}

@container dn-tags-widget (min-width: 400px) and (max-width: 767px) {
    .dn-tags-list {
        gap: .5rem !important;
    }

}

@container dn-tags-widget (min-width: 768px) {
    .dn-tags-list {
        gap: .625rem !important;
    }

    .dn-tag-link {
        white-space: nowrap;
    }
}

/* 7. Previous/next navigation */
.dn-pagination-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    min-width: 0;
    gap: .75rem !important;
    max-width: 100%;
    container: dn-pagination-widget / inline-size;
    overflow: hidden;
}

.dn-single-post-part-dn_single_post_pagination {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.dn-pagination-item {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.dn-pagination-item > span {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.8;
}

@container dn-pagination-widget (max-width: 479px) {
    .dn-pagination-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: .625rem !important;
        padding-top: 1.25rem !important;
    }

    .dn-pagination-item {
        padding: .75rem !important;
        border-radius: 1rem !important;
    }

    .dn-pagination-item > span:first-child {
        font-size: .6875rem !important;
    }

    .dn-pagination-item > span:last-child {
        font-size: .8125rem !important;
        line-height: 1.8;
    }
}

@container dn-pagination-widget (min-width: 480px) and (max-width: 767px) {
    .dn-pagination-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .75rem !important;
    }

    .dn-pagination-item {
        padding: .875rem !important;
    }
}

@container dn-pagination-widget (min-width: 768px) {
    .dn-pagination-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1rem !important;
    }

    .dn-pagination-item {
        min-height: 6rem;
    }
}

/* 8. Comments */
.dn-comments-output,
.dn-comments-container,
.dn-comment-form-container,
.dn-comment-list-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.dn-single-post-part-dn_single_post_comments {
    container: dn-comments-widget / inline-size;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.dn-comments-container {
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.dn-comment-form-container > div {
    width: 100%;
    min-width: 0;
    padding-inline: .75rem !important;
}

.dn-comment-form-container .comment-form,
.dn-comment-form-container .comment-form > p,
.dn-comment-form-container .comment-form .comment-form-author,
.dn-comment-form-container .comment-form .comment-form-email,
.dn-comment-form-container .comment-form .comment-form-comment {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.dn-comments-container input,
.dn-comments-container textarea,
.dn-comments-container select {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.dn-comment-list-container,
.dn-comment-list-container .comment-list {
    max-width: 100%;
    min-width: 0;
}

.dn-comment-list-container .comment-list {
    padding-inline: 0 !important;
}

.dn-comment-list-container .comment-list .children {
    margin-inline-start: 0 !important;
    padding-inline-start: .75rem !important;
}

.dn-comment-list-container article {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: .75rem !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dn-comment-list-container article header {
    align-items: stretch !important;
}

.dn-comment-list-container article header > .reply-button-wrapper {
    align-self: flex-start;
}

.dn-comment-list-container article .comment-content {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dn-comments-container .comments-pagination-section,
.dn-comments-container .comments-pagination-section nav,
.dn-comments-container .comments-pagination-section ul {
    max-width: 100%;
}

.dn-comments-container .comments-pagination-section {
    overflow: hidden;
}

.dn-comments-container .comments-pagination-section ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .5rem !important;
    padding-inline: 0 !important;
}

.dn-comments-container .comments-pagination-section li,
.dn-comments-container .comments-pagination-section .dn-pagination-btn {
    min-width: 0;
    max-width: 100%;
}

.dn-comment-submit,
.dn-comment-reply-button {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

@container dn-comments-widget (max-width: 479px) {
    .dn-comment-form-container > div {
        padding: .75rem !important;
    }

    .dn-comment-form-container .comment-form input,
    .dn-comment-form-container .comment-form textarea {
        font-size: .8125rem !important;
        padding: .625rem .75rem !important;
    }

    .dn-comment-form-container .comment-form textarea {
        min-height: 8rem;
    }

    .dn-comment-submit {
        width: 100% !important;
        text-align: center;
    }

    .dn-comment-list-container .comment-list .children {
        padding-inline-start: .5rem !important;
    }

    .dn-comment-list-container article {
        padding: .75rem !important;
    }

    .dn-comment-list-container article header {
        gap: .5rem !important;
    }

    .dn-comment-list-container article header > .reply-button-wrapper {
        order: 2;
        width: 100%;
    }

    .dn-comment-list-container article header > .reply-button-wrapper a {
        display: inline-flex;
        max-width: 100%;
    }

    .dn-comments-container .comments-pagination-section .dn-pagination-btn {
        padding: .375rem .625rem !important;
        font-size: .6875rem !important;
    }
}

@container dn-comments-widget (min-width: 480px) and (max-width: 767px) {
    .dn-comment-list-container article {
        padding: 1rem !important;
    }

    .dn-comment-list-container .comment-list .children {
        padding-inline-start: 1rem !important;
    }
}

@container dn-comments-widget (min-width: 768px) {
    .dn-comment-form-container > div {
        padding: 1.5rem !important;
    }

    .dn-comment-list-container article {
        padding: 1.25rem !important;
    }

    .dn-comment-list-container .comment-list .children {
        padding-inline-start: 1.5rem !important;
    }
}

@container dn-meta-widget (min-width: 420px) and (max-width: 767px) {
    .dn-meta-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .dn-meta-code {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@container dn-meta-widget (min-width: 768px) {
    .dn-meta-layout {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
    }

    .dn-meta-item {
        width: auto;
        flex: 0 1 auto;
        max-width: 100%;
    }

    .dn-meta-code {
        margin-inline-start: auto !important;
    }
}

@media (min-width: 480px) {
    .dn-comment-form-container > div {
        padding-inline: 1rem !important;
    }
}

@media (min-width: 640px) {
    .dn-share-author {
        gap: 1rem !important;
        padding: 1rem !important;
    }

    .dn-related-thumb {
        flex-basis: 5rem;
    }

    .dn-comment-list-container .comment-list .children {
        padding-inline-start: 1.5rem !important;
    }

    .dn-comment-list-container article {
        padding: 1rem !important;
    }
}

@container dn-related-column (min-width: 560px) and (max-width: 1199px) {
    .dn-related-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1.25rem !important;
    }
}

@container dn-related-column (min-width: 1200px) {
    .dn-related-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 2rem !important;
    }
}

@container dn-ads-column (min-width: 520px) and (max-width: 1199px) {
    .dn-ads-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1rem !important;
    }
}

@container dn-ads-column (min-width: 1200px) {
    .dn-ads-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1rem !important;
    }
}

@media (max-width: 1023px) {
    .dn-single-post-related-column {
        position: static !important;
        top: auto !important;
    }

    .dn-single-post-ads-column {
        position: static !important;
        top: auto !important;
    }
}

@media (max-width: 479px) {
    .dn-single-post-related-column {
        margin-inline: 0 !important;
    }

    .dn-related-card {
        padding: .875rem !important;
        border-radius: 1.25rem !important;
    }

    .dn-related-card h4 {
        margin-bottom: .875rem !important;
        font-size: 1rem !important;
        gap: .5rem !important;
    }

    .dn-related-item {
        gap: .625rem !important;
        padding: .5rem !important;
        margin-inline: -.5rem !important;
    }

    .dn-related-thumb {
        flex-basis: 3.75rem;
        width: 3.75rem !important;
        height: 3.75rem !important;
        border-radius: .875rem !important;
    }

    .dn-related-copy h5 {
        font-size: .75rem !important;
        line-height: 1.7 !important;
    }

    .dn-related-copy span {
        font-size: .625rem !important;
        line-height: 1.6 !important;
    }

    .dn-ad-slot {
        min-height: 7rem !important;
        border-radius: 1rem !important;
    }

    .dn-ad-placeholder {
        padding: .75rem !important;
    }

    .dn-ad-placeholder span {
        font-size: .6875rem !important;
        line-height: 1.7 !important;
        text-align: center;
    }

    .dn-meta-layout {
        padding: .75rem !important;
        font-size: .75rem;
    }

    .dn-share-link {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .dn-share-link > span {
        grid-column: 1 / -1;
    }

    .dn-share-link input {
        grid-column: 1;
    }

    .dn-share-actions > a {
        width: 2.5rem;
        height: 2.5rem;
    }

    .dn-tag-link {
        padding: .5rem .75rem !important;
        font-size: .75rem !important;
    }
}

@media (min-width: 480px) and (max-width: 639px) {
    .dn-related-card {
        padding: 1rem !important;
    }

    .dn-related-item {
        gap: .75rem !important;
    }

    .dn-ad-slot {
        min-height: 8rem !important;
    }
}

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