/* ==========================================================================
   RESPONSIVE — Additional media query overrides
   BEM methodology | DeDragones Theme
   ========================================================================== */

/* --------------------------------------------------------------------------
   Post card responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .post-card--featured {
    flex-direction: column;
    grid-column: span 1;
  }

  .post-card--featured .post-card__thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .post-card--list {
    flex-direction: column;
  }

  .post-card--list .post-card__thumb {
    width: 100%;
    min-height: unset;
    aspect-ratio: 16 / 9;
  }
}

/* --------------------------------------------------------------------------
   Hero responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hero-section {
    padding: var(--space-10) 0;
  }

  .hero-section__inner {
    grid-template-columns: 1fr;
  }

  .hero-section__visual {
    display: none;
  }

  .hero-section__title {
    font-size: clamp(26px, 7vw, 38px);
  }
}

/* --------------------------------------------------------------------------
   Post content responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .post-header {
    padding: var(--space-8) 0;
  }

  .post-content {
    padding: var(--space-6) var(--space-4);
  }

  .post-content__body p,
  .post-content__body ul,
  .post-content__body ol {
    font-size: 17px;
  }

  .post-content__body blockquote p {
    font-size: 17px;
  }

  .post-footer {
    padding: var(--space-4) var(--space-4) var(--space-8);
  }

  .post-share {
    flex-wrap: wrap;
  }

  .post-nav {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Widget responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
}

@media (max-width: 600px) {
  .sidebar {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Print styles
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .sidebar,
  .category-strip,
  .post-share,
  .post-nav,
  .related-products,
  .affiliate-disclaimer {
    display: none !important;
  }

  .content-area {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .post-header {
    background: #fff;
    padding: 2rem 0 1rem;
  }

  .post-header__title {
    color: #000;
  }

  body {
    font-size: 12pt;
    background: #fff;
    color: #000;
  }

  a {
    text-decoration: underline;
    color: #000;
  }
}

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

  .reveal {
    opacity: 1;
    animation: none;
  }

  .post-card:hover,
  .product-card:hover,
  .product-item:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   High contrast mode support
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .tag,
  .header-cta,
  .amazon-btn,
  .product-filter__btn.is-active {
    forced-color-adjust: none;
  }
}

/* --------------------------------------------------------------------------
   Focus visible (keyboard nav accessibility)
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}