/*
 * Mobile-Only Styles for Marko-Dorna Theme
 *
 * This stylesheet is loaded ONLY on screens ≤768px.
 * It does NOT affect desktop layouts at all.
 * Use this file for mobile-specific overrides and improvements.
 *
 * @package marko
 */

/* ═══════════════════════════════════════════════
   NAVIGATION — Mobile
   ═══════════════════════════════════════════════ */

/* Mobile menu animation improvements */
.mobile-menu {
  -webkit-overflow-scrolling: touch;
}

.mobile-links li a {
  min-height: 48px;
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: rgba(212, 168, 67, 0.1);
}

/* Mobile CTA in menu */
.mobile-cta {
  margin: 20px 0 10px;
  text-align: center;
  display: block;
}

/* ═══════════════════════════════════════════════
   FOOTER — Mobile
   ═══════════════════════════════════════════════ */

/* Footer widgets collapse to single column */
.footer-widgets {
  padding: 40px 20px 32px;
}

.footer-widgets--cols-2 .footer-widgets__inner,
.footer-widgets--cols-3 .footer-widgets__inner,
.footer-widgets--cols-4 .footer-widgets__inner {
  grid-template-columns: 1fr;
  gap: 32px;
}

.footer-bottom {
  padding: 24px 20px;
}

.footer-bottom__links {
  gap: 16px;
}

.footer-bottom__social {
  gap: 12px;
}

.footer-bottom__social-link {
  min-width: 44px;
  min-height: 44px;
}

/* ═══════════════════════════════════════════════
   SINGLE POST / PAGE — Mobile
   ═══════════════════════════════════════════════ */

.marko-single__container,
.marko-single__container--wide,
.marko-single__container--narrow {
  padding: 0 20px;
}

.marko-single__back {
  padding-top: 100px;
}

.marko-single__hero {
  padding: 24px 0 36px;
}

.marko-single__title {
  font-size: 1.5rem;
}

.marko-single__meta {
  gap: 10px;
  font-size: 0.75rem;
}

.marko-single__thumbnail-wrap {
  border-radius: 12px;
}

.marko-single__thumbnail-img {
  max-height: 280px;
}

.marko-single__body {
  font-size: 1rem;
  line-height: 1.75;
}

.marko-single__body h2 {
  font-size: 1.375rem;
}

.marko-single__body h3 {
  font-size: 1.125rem;
}

/* Post navigation stacks vertically on mobile */
.marko-single__nav-inner {
  flex-direction: column;
  gap: 16px;
}

.marko-single__nav-item {
  max-width: 100%;
  text-align: center !important;
}

.marko-single__nav-dir {
  justify-content: center !important;
}

.marko-single__nav-home {
  order: -1;
}

.marko-single__tags {
  flex-direction: column;
  gap: 12px;
}

/* Page-specific mobile */
.marko-page__footer-bar {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.marko-page__edit-link,
.marko-page__share-btn {
  justify-content: center;
  min-height: 44px;
}

.marko-page__related-grid {
  grid-template-columns: 1fr;
}

.marko-page__related-card {
  padding: 14px 16px;
}

/* Gallery columns collapse on mobile */
.marko-single__body .gallery-columns-2,
.marko-single__body .gallery-columns-3,
.marko-single__body .gallery-columns-4 {
  grid-template-columns: 1fr;
}

/* Better blockquote on mobile */
.marko-single__body blockquote {
  padding: 0.8em 1.2em;
  font-size: 0.9375rem;
}

/* Better code blocks on mobile */
.marko-single__body pre {
  padding: 16px;
  font-size: 0.8125rem;
  -webkit-overflow-scrolling: touch;
}

/* Table horizontal scroll on mobile */
.marko-single__body .wp-block-table,
.marko-single__body table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════════════
   BLOG PAGE — Mobile
   ═══════════════════════════════════════════════ */

.blog-header__title {
  font-size: 1.75rem;
}

.blog-header__subtitle {
  font-size: 0.9375rem;
}

.blog-grid {
  grid-template-columns: 1fr;
  gap: 20px;
}

.blog-card__image,
.blog-card__placeholder {
  height: 200px;
}

.blog-card__content {
  padding: 20px;
}

.blog-card__title {
  font-size: 1rem;
}

.blog-pagination {
  margin-top: 40px;
}

.blog-pagination .page-numbers {
  min-width: 40px;
  height: 40px;
  font-size: 0.8125rem;
}

/* ═══════════════════════════════════════════════
   GLOBAL MOBILE OVERRIDES
   ═══════════════════════════════════════════════ */

/* Prevent horizontal overflow */
.marko-single,
.blog-page {
  overflow-x: hidden;
}

/* Touch targets minimum 44px */
.marko-single__back-link {
  min-height: 44px;
}

.marko-single__nav-item {
  min-height: 60px;
}

.marko-single__tag,
.marko-single__cat-badge {
  min-height: 32px;
}

/* Better tap feedback */
.marko-single__back-link:active,
.marko-single__nav-item:active,
.marko-single__nav-home:active,
.marko-single__tag:active,
.marko-single__cat-badge:active,
.blog-card:active {
  opacity: 0.8;
  transition: opacity 0.1s;
}

/* Responsive embeds */
.marko-single__body iframe,
.marko-single__body video,
.marko-single__body embed,
.marko-single__body object {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
}

/* ═══════════════════════════════════════════════
   EXTRA SMALL SCREENS (≤480px)
   ═══════════════════════════════════════════════ */
@media (max-width: 480px) {
  .marko-single__container,
  .marko-single__container--wide,
  .marko-single__container--narrow {
    padding: 0 16px;
  }

  .marko-single__back {
    padding-top: 90px;
  }

  .marko-single__hero {
    padding: 20px 0 28px;
  }

  .marko-single__title {
    font-size: 1.375rem;
  }

  .marko-single__meta {
    gap: 8px;
    font-size: 0.6875rem;
  }

  .marko-single__meta-divider {
    width: 3px;
    height: 3px;
  }

  .marko-single__thumbnail {
    padding: 0 0 40px;
  }

  .marko-single__thumbnail-img {
    max-height: 220px;
  }

  .marko-single__body {
    font-size: 0.9375rem;
  }

  .marko-single__body h2 {
    font-size: 1.25rem;
  }

  .marko-single__body h3 {
    font-size: 1.0625rem;
  }

  .marko-single__nav {
    padding: 32px 0 60px;
  }

  .marko-single__nav-item {
    min-height: 50px;
  }

  .marko-single__nav-title {
    font-size: 0.8125rem;
  }

  .marko-single__cat-badge {
    padding: 4px 10px;
    font-size: 0.65rem;
  }

  .marko-single__tag {
    padding: 4px 12px;
    font-size: 0.75rem;
  }

  /* Page tiny screens */
  .marko-page__related-card {
    padding: 12px 14px;
  }

  .marko-page__related-title {
    font-size: 0.8375rem;
  }

  /* Blog tiny screens */
  .blog-header__title {
    font-size: 1.5rem;
  }

  .blog-card__image,
  .blog-card__placeholder {
    height: 180px;
  }

  .blog-card__content {
    padding: 16px;
  }

  .blog-card__title {
    font-size: 0.9375rem;
  }

  .blog-card__excerpt {
    font-size: 0.8125rem;
    -webkit-line-clamp: 2;
  }

  .blog-card__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-top: 12px;
  }

  .blog-posts {
    padding: 24px 0 60px;
  }

  /* Footer widgets extra small */
  .footer-widgets {
    padding: 32px 16px 24px;
  }

  .footer-bottom {
    padding: 20px 16px;
  }
}