/* ==========================================================================
   VIZTÉR.HU - Responsive Stylesheet
   ========================================================================== */

/* Laptops & Desktop screens below Full HD (max-width: 1600px) */
@media (max-width: 1600px) {
  /* :root {
    font-size: 94%;
  } */

  .site-header {
    /* padding: 1rem 0; */
  }
  
  .site-logo img {
    width: 205px;
    height: auto;
  }

  .nav-divider {
    font-size: 0.85rem;
    margin-top: -0.2rem;
  }

  .hero-component {
    /* margin-top: 1.25rem; */
    margin-bottom: 2.5rem;
  }
  
  .hero-grid {
    min-height: 390px;
    /* grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); */
  }
  
  .hero-badge {
    margin-bottom: 1rem;
    padding: 0.3rem 0.8rem;
    font-size: 0.7rem;
  }
  
  .hero-title-box {
    margin-bottom: 3rem;
    /* margin-right: -75%; */
  }
  
  .hero-title,
  .hero-title-layer {
    /* font-size: clamp(3rem, 5vw, 4.5rem); */
    line-height: 1.12em;
  }
  
  .hero-excerpt-box {
    /* padding: 0 1.25rem; */
  }
  
  .hero-excerpt {
    /* font-size: 0.9rem; */
    /* line-height: 1.5; */
    /* margin-bottom: 0.5rem; */
  }

  .section-spacing {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }

  .what-is-it-box {
    margin-bottom: 2.5rem;
  }

  .what-is-it-title {
    /* font-size: 2.75rem; */
  }

  .category-header-banner {
    /* height: 210px; */
    margin-bottom: 2.5rem;
  }
}

/* Medium Laptops & Large Tablets (max-width: 1440px) */
@media (max-width: 1440px) {
  .what-is-it-box,
  .wp-block-group.what-is-it-box,
  .wp-block-group.vizter-what-is-it,
  .wp-block-group.is-style-what-is-it {
    padding: 2rem 3rem 2rem 2.5rem !important;
  }
}

/* Large Laptops (max-width: 1200px) */
@media (min-width: 1200px) {
  :root {
    font-size: clamp(45%, 0.875vw, 100%);
  }
}

/* Medium Laptops & Large Tablets (max-width: 1200px) */
@media (max-width: 1200px) {
  .post-grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .post-grid-4 > .post-card-3:not(:nth-child(4n + 1))::before {
    display: none;
  }

  .post-grid-4 > .post-card-3:nth-child(2n)::before {
    display: block;
    left: calc(-1rem - 0.5px);
  }
  
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
    min-height: 340px;
  }
  
  .hero-content {
    margin-right: 0;
  }

  .hero-title-box {
    /* margin-right: unset; */
    margin-bottom: 2.5rem;
  }
  
  .hero-title,
  .hero-title-layer {
    font-size: clamp(3rem, 5vw, 4.7rem);
  }
  
  .what-is-it-box,
  .wp-block-group.what-is-it-box,
  .wp-block-group.vizter-what-is-it,
  .wp-block-group.is-style-what-is-it {
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem 2rem 2rem 2rem !important;
    gap: 1rem;
  }

  .what-is-it-title,
  .what-is-it-box .what-is-it-title,
  .what-is-it-box h2.what-is-it-title,
  .what-is-it-box h3.what-is-it-title {
    white-space: normal !important;
  }

  .what-is-it-title::after,
  .what-is-it-box .what-is-it-title::after {
    display: none !important;
  }
}

/* Screens below 1100px - Hamburger Menu */
@media (max-width: 1100px) {
  .main-nav {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-direction: column;
    padding: 3rem 1.5rem 2rem 1.5rem;
    overflow-y: auto;
    z-index: 999;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-16px);
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s ease;
    pointer-events: none;
  }
  
  .main-nav.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
  }

  .mobile-nav-title {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-primary);
    text-transform: none;
    letter-spacing: normal;
  }

  .mobile-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0.25rem;
    transition: opacity var(--transition-fast);
  }

  .mobile-menu-close svg {
    stroke: var(--color-primary);
    pointer-events: none;
  }

  .mobile-menu-close:hover {
    opacity: 0.7;
    background-color: transparent;
    color: var(--color-primary);
  }
  
  .nav-links {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 1.25rem;
  }

  .main-nav .nav-item {
    opacity: 0;
    transform: translateX(-14px);
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .main-nav.active .nav-item {
    opacity: 1;
    transform: translateX(0);
  }

  .main-nav.active .nav-item:nth-child(1) { transition-delay: 0.08s; }
  .main-nav.active .nav-item:nth-child(2) { transition-delay: 0.12s; }
  .main-nav.active .nav-item:nth-child(3) { transition-delay: 0.16s; }
  .main-nav.active .nav-item:nth-child(4) { transition-delay: 0.20s; }
  .main-nav.active .nav-item:nth-child(5) { transition-delay: 0.24s; }
  .main-nav.active .nav-item:nth-child(6) { transition-delay: 0.28s; }
  .main-nav.active .nav-item:nth-child(7) { transition-delay: 0.32s; }
  .main-nav.active .nav-item:nth-child(8) { transition-delay: 0.36s; }
  .main-nav.active .nav-item:nth-child(9) { transition-delay: 0.40s; }
  .main-nav.active .nav-item:nth-child(10) { transition-delay: 0.44s; }
  .main-nav.active .nav-item:nth-child(11) { transition-delay: 0.48s; }
  .main-nav.active .nav-item:nth-child(12) { transition-delay: 0.52s; }
  .main-nav.active .nav-item:nth-child(13) { transition-delay: 0.56s; }
  .main-nav.active .nav-item:nth-child(14) { transition-delay: 0.60s; }
  .main-nav.active .nav-item:nth-child(15) { transition-delay: 0.64s; }
  .main-nav.active .nav-item:nth-child(16) { transition-delay: 0.68s; }
  .main-nav.active .nav-item:nth-child(17) { transition-delay: 0.72s; }
  .main-nav.active .nav-item:nth-child(18) { transition-delay: 0.76s; }
  .main-nav.active .nav-item:nth-child(19) { transition-delay: 0.80s; }
  .main-nav.active .nav-item:nth-child(20) { transition-delay: 0.84s; }

  .nav-link {
    /* font-size: 1.25rem; */
  }
  
  .nav-divider {
    display: none;
  }
  
  .mobile-menu-toggle {
    display: block;
  }
}

/* Tablet Screens (max-width: 992px) */
@media (max-width: 992px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    min-height: auto;
    align-items: start;
  }
  
  .hero-content {
    margin-right: 0;
    width: 100%;
  }
  
  .hero-title-box,
  .hero-title-box.long-text {
    margin-right: 0;
    margin-bottom: 2rem;
    border-radius: var(--border-radius-md);
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .hero-image-wrapper {
    order: -1;
  }

  .what-is-it-title,
  .what-is-it-box .what-is-it-title,
  .what-is-it-box h2.what-is-it-title,
  .what-is-it-box h3.what-is-it-title {
    font-size: 2.4375rem;
    white-space: normal !important;
  }

  .what-is-it-box,
  .wp-block-group.what-is-it-box,
  .wp-block-group.vizter-what-is-it,
  .wp-block-group.is-style-what-is-it {
    padding: 1.75rem 1.75rem 1.75rem 1.5rem !important;
  }
  
  .category-layout-grid {
    grid-template-columns: 1fr !important;
  }
  
  .category-main-col,
  .category-sidebar {
    grid-column: span 1 !important;
  }
  
  .category-sidebar {
    position: static !important;
    margin-top: 3rem;
  }
  
  .post-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
  
  .footer-logo-col {
    grid-column: 1 / -1;
    order: -1;
    margin-bottom: 1.5rem;
  }
  
  /* .footer-categories-col .footer-divider {
    margin-left: 0;
  } */
}

@media (min-width: 768px) {
  .footer-categories-col .footer-col-title {
    margin-left: auto;
    margin-right: 0;
  }
}

/* Mobile & Small Tablet (max-width: 768px) */
@media (max-width: 768px) {
  .container {
    padding: 0 1.25rem;
  }
  
  .container-narrow {
    /* padding: 0 1rem; */
    padding: 0;
  }
  
  .top-bar-inner {
    flex-direction: column;
    gap: 0.4rem;
    text-align: center;
  }
  
  .what-is-it-title,
  .what-is-it-box .what-is-it-title,
  .what-is-it-box h2.what-is-it-title,
  .what-is-it-box h3.what-is-it-title {
    font-size: clamp(1.75rem, 6vw, 2.25rem);
    white-space: normal !important;
    display: inline-block;
  }
  
  .what-is-it-divider {
    width: 100%;
    height: 1px;
  }
  .what-is-it-title::after,
  .what-is-it-box .what-is-it-title::after {
    display: none !important;
  }

  .what-is-it-box,
  .wp-block-group.what-is-it-box,
  .wp-block-group.vizter-what-is-it,
  .wp-block-group.is-style-what-is-it {
    padding: 1.5rem 1.25rem 1.5rem 1.25rem !important;
    gap: 0.85rem;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .section-title {
    font-size: 2rem;
    flex-direction: column;
    align-items: flex-start;
  }
  .section-title::after {
    display: none;
  }
  
  .post-grid-4,
  .post-grid-3,
  .post-grid-2 {
    grid-template-columns: 1fr;
  }

  .post-grid-4 > .post-card-3::before {
    display: none !important;
  }
  
  .page-header-banner {
    --page-header-title-font-size: 2rem;
    /* height: 320px; */
  }

  .page-header-title {
    font-size: 1.5rem !important;
  }
  
  .page-header-title-box {
    left: 1rem;
    padding: 0;
    max-width: calc(100% - 5rem);
  }
  
  .category-header-banner {
    /* height: 180px; */
    aspect-ratio: 500 / 200;
    overflow: visible;
    isolation: isolate;
  }

  .category-header-banner img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius-xl);
    transform: none !important;
  }
  
  .category-header-title-badge {
    font-size: clamp(1.1rem, 0.3rem + 3.5vw, 2rem);
    padding: 0.5rem 1.5rem;
    position: absolute;
    bottom: 0;
    left: 1rem;
    transform: translateY(25%);
  }

  .category-header-description {
    display: block;
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 2.25rem auto 2.25rem auto;
    padding: 0 1rem;
    text-align: center;
    color: #ffffff;
    background-color: var(--color-primary-2);
    border-radius: var(--border-radius-lg);
    padding: 2rem 1.75rem;
  }
  
  .category-sidebar .inverse-text-box {
    display: none !important;
  }

  .site-footer {
    --max-width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .footer-categories-col {
    text-align: left;
  }
  
  .article-header-banner {
    height: 50vw;
    margin-bottom: 2rem;
  }
  
  .article-title {
    font-size: 2.25rem;
  }
  .article-body h2,
  .article-body-content h2,
  .page-content-wrapper h2,
  .page-body-content h2,
  .entry-content h2 {
    font-size: 1.65rem;
  }

  .wp-block-group.vizter-framed-highlight,
  .wp-block-group.is-style-framed-highlight {
    margin: 2.5rem -2.5rem 2.5rem -2.5rem;
  }

  .author-component {
    flex-direction: column;
    text-align: center;
  }
  
  .quote-component {
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
    font-size: 1.35rem;
  }

  blockquote.wp-block-quote,
  .wp-block-quote,
  .article-body blockquote,
  .article-body-content blockquote,
  .page-content-wrapper blockquote {
    padding: 1.5rem 1.5rem 1.5rem 5rem;
    margin: 2rem 0;
  }

  blockquote.wp-block-quote::before,
  .wp-block-quote::before,
  .article-body blockquote::before,
  .article-body-content blockquote::before,
  .page-content-wrapper blockquote::before {
    top: 1rem;
    left: 0.5rem;
    font-size: 10rem;
    line-height: 0.8;
    height: auto;
  }

  .quote-icon {
    font-size: 10rem;
    line-height: 0.8;
    height: auto;
  }

  .quote-text,
  .quote-component p,
  blockquote.wp-block-quote p,
  .wp-block-quote p,
  .article-body blockquote p,
  .article-body-content blockquote p,
  .page-content-wrapper blockquote p {
    font-size: 1.35rem !important;
    font-style: normal !important;
  }
  
  .what-is-it-box,
  .wp-block-group.what-is-it-box,
  .wp-block-group.vizter-what-is-it,
  .wp-block-group.is-style-what-is-it {
    padding: 1.25rem 1rem 1.25rem 1rem !important;
  }

  .framed-highlight {
    padding: 1.5rem;
  }

  .framed-highlight-inner {
    padding-left: 1.25rem;
  }

  #relatedPostsGrid .post-card-3-title {
    font-size: 1.25rem;
  }
}

@media (max-height: 768px) {
}