/*
Theme Name: HypePress
Theme URI: https://gig.web.id
Author: Rifan Muazin
Author URI: https://gig.web.id
Author Email: muazin.asro@gmail.com
Description: HypePress is a modern, high-engagement digital media and viral magazine WordPress theme. Features dynamic homepage blocks, secondary category carousel, sticky header, full author profiles with avatar initials, Indonesian locale dates, and complete Theme Customizer controls.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hypepress
Tags: news, magazine, blog, entertainment, lifestyle, gen-z, grid-layout, custom-menu, featured-images, theme-options
*/

/* Core Theme Enhancements & Fixes */
:root {
    --brand-primary: #f69220;
    --brand-primary-hover: #e07f12;
    --brand-dark: #1b1f23;
    --brand-gray: #8e9195;
    --brand-light: #f8f9fa;
    --brand-border: #e8e8e8;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    color: #333333;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
    color: var(--brand-primary);
}

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

/* Layout & Fixed Header Clearance */
#main-wrapper.rev-2022 {
    padding-top: 115px;
}

@media (max-width: 991px) {
    #main-wrapper.rev-2022 {
        padding-top: 95px;
    }
}

.desktop .main-content,
.main-content {
    opacity: 1 !important;
}

/* Header Styles */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1052;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.header-top {
    background: linear-gradient(90deg, #f7931e 0%, #f15a24 100%);
    padding: 10px 0;
    color: #ffffff;
}

.header-top .row {
    flex-wrap: nowrap;
}

.header-top .col {
    min-width: 0;
}

/* Logo Responsive & Constraint Rules */
.col-logo {
    flex: 0 0 auto;
    max-width: var(--logo-max-space, 25%);
    min-width: 100px;
    display: flex;
    align-items: center;
}

.col-logo .custom-logo-link,
.col-logo .header-brand,
.header-brand {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
}

.col-logo img,
.col-logo .custom-logo,
.header-brand img,
.header-brand .custom-logo {
    max-width: var(--logo-max-width, 200px) !important;
    width: auto;
    height: auto;
    max-height: 42px !important;
    object-fit: contain;
    object-position: left center;
    display: block;
}

.footer-brand img,
.footer-brand .custom-logo {
    max-width: 160px;
    height: auto;
    max-height: 48px;
    object-fit: contain;
    display: block;
    margin-bottom: 12px;
}

#main-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    gap: 15px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#main-menu::-webkit-scrollbar {
    display: none;
}

#main-menu li {
    flex-shrink: 0;
}

#main-menu li a {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
    white-space: nowrap;
}

#main-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

#main-menu .icon svg {
    width: 14px;
    height: 14px;
    fill: #ffffff;
}

#main-menu .hot {
    background: #ff0000;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px;
    text-transform: uppercase;
    animation: pulse-hot 1.5s infinite;
}

@keyframes pulse-hot {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.header-bottom {
    background: #ffffff;
    border-bottom: 1px solid #ebebeb;
    position: relative;
}

.secondary-menu-wrap {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 10px 0;
}

.secondary-menu-wrap::-webkit-scrollbar {
    display: none;
}

.secondary-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 24px;
    align-items: center;
}

.secondary-menu li a {
    color: #555555;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 2px;
    position: relative;
}

.secondary-menu li.current-menu-item a,
.secondary-menu li.current-cat a,
.secondary-menu li a:hover {
    color: var(--brand-primary);
}

.secondary-menu li.current-menu-item a::after,
.secondary-menu li.current-cat a::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--brand-primary);
    border-radius: 2px;
}

/* Search Toggle Trigger & Overlay */
.header-bottom .search-toggle {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 15px;
    margin-left: 15px;
    z-index: 5;
    flex-shrink: 0;
}

.header-bottom .search-toggle:before {
    content: '';
    height: 20px;
    width: 1px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #e2e2e2;
}

.button-search-desktop {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.button-search-desktop svg {
    display: block;
    width: 20px;
    height: 20px;
}

.button-search-desktop svg circle,
.button-search-desktop svg line {
    stroke: #333333 !important;
}

.button-search-desktop:hover svg circle,
.button-search-desktop:hover svg line {
    stroke: var(--brand-primary, #f69220) !important;
}

/* Full-width In-place Search Overlay */
#main-wrapper.rev-2022 .search-toggle-wrap,
.search-toggle-wrap {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff !important;
    z-index: 1050 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

#main-wrapper.rev-2022 .search-toggle-wrap.active,
#main-wrapper.rev-2022 .search-toggle-wrap.is-open,
.search-toggle-wrap.active,
.search-toggle-wrap.is-open {
    display: block !important;
}

.search-toggle-wrap .container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
}

.search-toggle-wrap form {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    margin: 0;
}

.search-toggle-wrap .search-input {
    width: 100%;
    border: 1px solid #e8e8e8;
    background: #f8f9fa;
    border-radius: 25px;
    outline: none;
    font-size: 14px;
    color: #333333;
    padding: 8px 45px 8px 18px;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.2s, background-color 0.2s;
}

.search-toggle-wrap .search-input:focus {
    border-color: var(--brand-primary, #f69220);
    background: #ffffff;
}

.search-toggle-wrap form button[type="submit"] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
}

.search-toggle-wrap form button[type="submit"] svg {
    width: 18px;
    height: 18px;
}

.search-toggle-wrap .button-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 0 0 15px;
    margin-left: 15px;
    border-left: 1px solid #e2e2e2;
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #333333;
}

.search-toggle-wrap .button-close:hover svg line {
    stroke: var(--brand-primary, #f69220) !important;
}

/* Card Post & Image Aspect Ratio Strict Enforcement */
.card-post {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    background-color: #1a1a1a;
    transition: all 0.25s ease-in-out;
    outline: 2px solid transparent;
    width: 100%;
    height: 100%;
}

.card-post a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    color: #ffffff;
}

.card-post a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.85) 100%);
    z-index: 1;
    transition: all 0.25s ease-in-out;
}

.card-post:hover {
    outline-color: var(--brand-1, #f96913);
    transform: translateY(-2px);
}

.card-post:hover a::before {
    background-color: rgba(0, 0, 0, 0.25);
}

.card-post .post-img,
.card-post img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block;
}

/* Headline Top 2 Large Cards (525:295 aspect ratio) */
.headline .col-lg-6 .card-post,
.headline .col-lg-6 .card-post a {
    aspect-ratio: 525 / 295;
    min-height: 240px;
}

/* Headline Bottom 3 Medium Cards & Trending / Magazine Cards (360:203 aspect ratio) */
.headline .col-lg-4 .card-post,
.headline .col-lg-4 .card-post a,
.section-magezine-revamp .card-post,
.section-magezine-revamp .card-post a,
.now-trending .card-post,
.now-trending .card-post a,
.archive-post .card-post,
.archive-post .card-post a {
    aspect-ratio: 360 / 203;
    min-height: 175px;
}

/* Sidebar & List Item Images (195:125 aspect ratio) */
.item-post .item-post__thumb,
.item-post .item-post__thumb img,
.item-post .post-img {
    aspect-ratio: 195 / 125;
    object-fit: cover !important;
    width: 100%;
    border-radius: 4px;
}

.card-post .inner {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 16px 20px 14px;
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-post .post-title {
    font-size: 16px;
    line-height: 1.35;
    font-family: "Merriweather Sans", sans-serif;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-post .cat-wrap {
    list-style-type: none;
    padding-left: 0;
    margin: 0 0 6px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.card-post .cat-wrap .cat-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: 1.2;
    font-family: "Merriweather Sans", sans-serif;
    font-weight: 500;
    color: #ffffff;
}

.card-post .cat-wrap .cat-item .icon {
    display: inline-flex;
    align-items: center;
}

.card-post .cat-wrap .cat-item .icon svg {
    width: 13px;
    height: 13px;
    fill: #ffffff;
}

/* Avatar with Initials */
[data-letters]:before {
    content: attr(data-letters);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85em;
    font-weight: 700;
    width: 2.2em;
    height: 2.2em;
    border-radius: 50%;
    background: var(--tooltip-color, #f69220);
    color: #ffffff;
    text-transform: uppercase;
}

.profile-header__thumb [data-letters]:before {
    width: 80px;
    height: 80px;
    font-size: 32px;
}

/* Social icons footer (Hipwee High Contrast & Hover Effect) */
footer .widget-social ul.social,
footer.main-footer .widget-social ul.social,
.main-footer .social,
.social {
    display: flex;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 12px 0 0 0;
    flex-wrap: wrap;
    align-items: center;
}

footer .widget-social ul.social li,
footer.main-footer .widget-social ul.social li,
.main-footer .social li,
.social li {
    flex: 0 1 auto;
    margin: 0;
    padding: 0;
}

footer .widget-social ul.social li a,
footer.main-footer .widget-social ul.social li a,
.main-footer .social li a,
.social li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border-radius: 0;
    color: #ffffff !important;
    transition: transform 0.2s ease, color 0.2s ease;
}

footer .widget-social ul.social li a .icon,
footer.main-footer .widget-social ul.social li a .icon,
.main-footer .social li a .icon,
.social li a .icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

footer .widget-social ul.social li a .icon svg,
footer.main-footer .widget-social ul.social li a .icon svg,
footer.main-footer .widget-social ul.social li a svg,
.main-footer .social li a svg,
.social li a svg {
    width: 22px;
    height: 22px;
    fill: #ffffff !important;
    color: #ffffff !important;
    transition: fill 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

footer .widget-social ul.social li a .icon svg path,
footer.main-footer .widget-social ul.social li a .icon svg path,
footer.main-footer .widget-social ul.social li a svg path,
.main-footer .social li a svg path,
.social li a svg path {
    fill: #ffffff !important;
    transition: fill 0.2s ease;
}

/* Hover state: Vibrant Orange Accent */
footer .widget-social ul.social li a:hover,
footer.main-footer .widget-social ul.social li a:hover,
.main-footer .social li a:hover,
.social li a:hover {
    color: var(--brand-primary, #f69220) !important;
    transform: translateY(-2px);
}

footer .widget-social ul.social li a:hover .icon svg,
footer.main-footer .widget-social ul.social li a:hover .icon svg,
footer.main-footer .widget-social ul.social li a:hover svg,
.main-footer .social li a:hover svg,
.social li a:hover svg {
    fill: var(--brand-primary, #f69220) !important;
    color: var(--brand-primary, #f69220) !important;
    transform: translateY(-2px);
}

footer .widget-social ul.social li a:hover .icon svg path,
footer.main-footer .widget-social ul.social li a:hover .icon svg path,
footer.main-footer .widget-social ul.social li a:hover svg path,
.main-footer .social li a:hover svg path,
.social li a:hover svg path {
    fill: var(--brand-primary, #f69220) !important;
}

/* Share Article Sticky Bar */
.share-article-sticky {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 10;
}

.share-article-sticky .share-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: transform 0.2s;
}

.share-article-sticky .share-btn:hover {
    transform: scale(1.1);
}

.share-btn.wa { background-color: #25d366; }
.share-btn.fb { background-color: #1877f2; }
.share-btn.tw { background-color: #000000; }
.share-btn.tg { background-color: #0088cc; }
.share-btn.line { background-color: #00c300; }
.share-btn.comments { background-color: #f69220; }

/* ==========================================================================
   CATEGORY, TAG, AUTHOR & ARCHIVE HIPWEE ACCURATE STYLES
   ========================================================================== */

/* Breadcrumb Hipwee */
.breadcrumb {
    margin-bottom: 20px;
    padding: 10px 0;
}
.breadcrumb ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    color: #888888;
}
.breadcrumb ul li a {
    color: #666666;
    text-decoration: none;
    transition: color 0.2s;
}
.breadcrumb ul li a:hover {
    color: var(--brand-primary, #f69220);
}
.breadcrumb ul li:not(:last-child)::after {
    content: '/';
    margin-left: 8px;
    color: #cccccc;
}
.breadcrumb ul li span {
    color: #333333;
    font-weight: 600;
}

/* Section Title Large (Archive & Category) */
.archive-page .section-title--lg,
.search-page .section-title--lg {
    font-size: 32px;
    font-family: "Roboto Slab", serif;
    font-weight: 700;
    color: #222222;
    margin-bottom: 25px;
    line-height: 1.2;
}

/* Category & Archive Top 3 Magazine Grid */
.desktop .section-magezine,
.section-magezine {
    display: flex;
    flex-wrap: wrap;
    margin-left: -12px !important;
    margin-right: -12px !important;
    margin-bottom: 35px !important;
}

.desktop .section-magezine > .archive-post,
.section-magezine > .archive-post {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    padding: 0 12px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.section-magezine .archive-post .archive-post__img {
    aspect-ratio: 360 / 203;
    width: 100%;
    height: auto;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 12px;
    background-color: #f0f0f0;
}

.section-magezine .archive-post .archive-post__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    transition: transform 0.3s ease;
}

.section-magezine .archive-post:hover .archive-post__img img {
    transform: scale(1.04);
}

.section-magezine .archive-post .post-title {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    margin: 0 0 8px 0;
}

.section-magezine .archive-post .post-title a {
    color: #222222;
    text-decoration: none;
    transition: color 0.2s;
}

.section-magezine .archive-post .post-title a:hover {
    color: var(--brand-primary, #f69220);
}

.section-magezine .archive-post .post-excerpt {
    font-size: 13px;
    line-height: 1.5;
    color: #666666;
    margin-bottom: 10px;
}

.section-magezine .archive-post .post-info {
    font-size: 12px;
    color: #888888;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.section-magezine .archive-post .post-info a {
    color: #555555;
    font-weight: 600;
    text-decoration: none;
}

.section-magezine .archive-post .post-info a:hover {
    color: var(--brand-primary, #f69220);
}

/* Content & Sidebar Columns in Archive */
.desktop .col-home-content,
.col-home-content {
    flex: 1 1 auto;
    max-width: calc(100% - 330px);
    width: 100%;
    min-width: 0;
}

.desktop .section-sidebar,
.section-sidebar {
    width: 330px;
    padding-left: 30px;
    box-sizing: border-box;
}

/* Horizontal Archive Post (Hipwee Standard for category, tag, author) */
.archive-post--horizontal {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f0f0f0;
    width: 100%;
    display: block;
}

.archive-post--horizontal:last-child {
    border-bottom: none;
}

.archive-post--horizontal .row {
    display: flex;
    flex-wrap: nowrap;
    gap: 22px;
    align-items: flex-start;
    margin: 0;
}

.archive-post--horizontal .col-auto {
    flex: 0 0 200px;
    max-width: 200px;
    padding: 0;
}

.archive-post--horizontal .archive-post__img {
    aspect-ratio: 360 / 203;
    width: 200px;
    height: auto;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0;
    background-color: #f0f0f0;
}

.archive-post--horizontal .archive-post__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    transition: transform 0.3s ease;
}

.archive-post--horizontal:hover .archive-post__img img {
    transform: scale(1.04);
}

.archive-post--horizontal .col {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}

.archive-post--horizontal .post-title {
    font-size: 19px;
    line-height: 1.35;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    margin: 0 0 8px 0;
}

.archive-post--horizontal .post-title a {
    color: #222222;
    text-decoration: none;
    transition: color 0.2s;
}

.archive-post--horizontal .post-title a:hover {
    color: var(--brand-primary, #f69220);
}

.archive-post--horizontal .post-info {
    padding: 6px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 10px;
    font-size: 12px;
    color: #888888;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.archive-post--horizontal .post-info a {
    color: #555555;
    font-weight: 600;
    text-decoration: none;
}

.archive-post--horizontal .post-info a:hover {
    color: var(--brand-primary, #f69220);
}

.archive-post--horizontal .post-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: #555555;
    margin: 0;
}

.archive-post--horizontal .post-excerpt p {
    margin: 0;
}

/* Author Profile Section (Hipwee Style) */
.profile-author {
    background: #fafafa;
    border-bottom: 1px solid #eeeeee;
    padding: 35px 0 30px;
    margin-bottom: 0;
}

.profile-header .col-auto {
    flex: 0 0 auto;
}

.profile-header__thumb p[data-letters] {
    margin: 0;
}

.profile-header__name {
    font-size: 26px;
    font-family: "Roboto Slab", serif;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.profile-header__name a {
    color: #222222;
    text-decoration: none;
}

.profile-header__name a:hover {
    color: var(--brand-primary, #f69220);
}

.profile-header__description {
    font-size: 14px;
    line-height: 1.6;
    color: #555555;
    max-width: 700px;
    margin-bottom: 14px;
}

.profile-desc__follow {
    display: flex;
    gap: 25px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    color: #666666;
}

.profile-desc__follow .show-up {
    font-weight: 700;
    color: #222222;
    font-size: 15px;
    margin-right: 4px;
}

/* Author Navigation & Tabs */
.author-nav-wrapper {
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
    padding: 10px 0;
    margin-bottom: 30px;
}

.author-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.author-tabs {
    display: flex;
    gap: 25px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.author-tabs__item a {
    font-size: 15px;
    font-weight: 700;
    color: #666666;
    text-decoration: none;
    padding-bottom: 10px;
    display: inline-block;
    position: relative;
}

.author-tabs__item.active a {
    color: var(--brand-primary, #f69220);
    border-bottom: 3px solid var(--brand-primary, #f69220);
}

.article-sort {
    font-size: 13px;
    color: #888888;
    display: flex;
    align-items: center;
    gap: 8px;
}

.article-sort select {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 13px;
    color: #333333;
    outline: none;
    background: #ffffff;
}

.author-articles {
    max-width: 860px;
    margin: 0 auto;
    width: 100%;
}

/* Responsive Overrides for Archive & Author */
@media (max-width: 991px) {
    .desktop .col-home-content,
    .col-home-content {
        max-width: 100%;
        width: 100%;
    }

    .desktop .section-sidebar,
    .section-sidebar {
        width: 100%;
        padding-left: 0;
        margin-top: 35px;
    }

    .desktop .section-magezine > .archive-post,
    .section-magezine > .archive-post {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .archive-post--horizontal .col-auto {
        flex: 0 0 170px;
        max-width: 170px;
    }

    .archive-post--horizontal .archive-post__img {
        width: 170px;
    }

    .archive-post--horizontal .post-title {
        font-size: 17px;
    }
}

@media (max-width: 576px) {
    .desktop .section-magezine > .archive-post,
    .section-magezine > .archive-post {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .archive-post--horizontal .row {
        flex-direction: column;
        gap: 12px;
    }

    .archive-post--horizontal .col-auto {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .archive-post--horizontal .archive-post__img {
        width: 100%;
    }
}

/* ==========================================================================
   AJAX LOAD MORE BUTTON & ITEM TRANSITIONS (Hipwee Modern Style)
   ========================================================================== */
.hypepress-loadmore-wrap {
    margin: 35px auto 45px;
    text-align: center;
    width: 100%;
}

.hypepress-loadmore-wrap .btn-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 36px;
    min-width: 220px;
    height: 48px;
    background: #ffffff;
    color: #222222;
    border: 1.5px solid var(--brand-primary, #f69220);
    border-radius: 28px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    transition: all 0.25s ease-in-out;
    outline: none;
}

.hypepress-loadmore-wrap .btn-load-more:hover {
    background: linear-gradient(135deg, #f69220 0%, #fa742b 100%);
    color: #ffffff !important;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(246, 146, 32, 0.35);
    transform: translateY(-2px);
}

.hypepress-loadmore-wrap .btn-load-more:active {
    transform: translateY(0) scale(0.98);
}

.hypepress-loadmore-wrap .btn-load-more.is-loading {
    pointer-events: none;
    background: #f8f9fa;
    color: #666666;
    border-color: #dddddd;
    box-shadow: none;
    cursor: wait;
}

.hypepress-loadmore-wrap .btn-spinner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hypepress-loadmore-wrap .hypepress-spinner {
    animation: hypepressSpin 0.8s linear infinite;
}

@keyframes hypepressSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.hypepress-loadmore-wrap .loadmore-end-text {
    color: #888888;
    font-size: 14px;
    font-weight: 500;
    padding: 14px 0 5px;
}

@keyframes hypepressItemEnter {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hypepress-item-enter {
    animation: hypepressItemEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}