/* =========================================================
   MOBILE.CSS — replace your current file with this version
   Scope: Keeps desktop as-is. Applies only to ≤768px.
   ========================================================= */

/* ----------------- Phones (≤576px) ----------------- */
@media (max-width: 576px) {

  /* Base & containers */
  html, body { overflow-x: hidden; }
  .tim-container, .container, .container-fluid { padding-inline: 16px !important; }
  section, .section, .banner, .hero, .sp-container { padding-block: 36px !important; }

  /* Text alignment (global and consistent) */
  body { text-align: center !important; }
  h1, h2, h3, h4, h5, h6,
  p, small, span, a, li, dt, dd, label,
  blockquote, figcaption, .lead, .subtitle,
  .section .section-title, .section .title, .banner .title {
    text-align: center !important;
  }
  /* Neutralize helpers that force left/right */
  .text-left, .text-start, .text-right, .text-end,
  .text-sm-left, .text-md-left, .text-lg-left, .text-xl-left,
  .text-sm-right, .text-md-right, .text-lg-right, .text-xl-right {
    text-align: center !important;
  }

  /* Type scale for readability */
  h1 { font-size: 28px !important; }
  h2 { font-size: 24px !important; }
  h3 { font-size: 20px !important; }
  h4, .h4 { font-size: 18px !important; }
  p, li, a { font-size: 16px !important; line-height: 1.55; }

  /* Images / media */
  img, video, iframe {
    max-width: 100%; height: auto; display: block; margin-inline: auto;
  }

  /* Buttons / CTAs */
  .btn, .button, .btn-primary, .tim-btn, .cta, .woocommerce a.button {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 18px !important; min-height: 44px; min-width: 44px;
    margin-inline: auto;
  }
  /* Make image-card links fully clickable */
  .entry-image-wrapper a, .post-thumbnail a, .card a, .gallery-item a { display: block; }

  /* Grid: stack columns but keep Bootstrap mechanics */
  .row > [class^="col-"], .row > [class*=" col-"] { flex: 0 0 100% !important; max-width: 100% !important; }
  [class*="col-"] { padding-inline: 12px; }
  .row { margin-inline: -12px; }

  /* Kill floats that push content to edges */
  .float-left, .pull-left, .float-right, .pull-right { float: none !important; }

  /* Header / logos */
  .header .header-inner { padding-block: 8px !important; }
  #site-logo img, .logo-main img, .logo-stickky img, #mobile-logo img {
    max-width: 160px !important; width: 60vw !important; height: auto !important; margin-top: 4px !important;
  }

  /* Hide desktop nav; show hamburger */
  .header .nav, #header-menu-magic-line { display: none !important; }
  #nav-toggle { display: block !important; position: relative; z-index: 10001; cursor: pointer; }

  /* Mobile drawer */
  .mobile-menu-inner {
    position: fixed; inset: 0; background: #0f0f0f;
    transform: translateX(100%); transition: transform .3s ease;
    z-index: 10000; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .mobile-menu-inner.open { transform: translateX(0); }
  body.menu-open { overflow: hidden; }
  .mobile-menu-inner .menu, .mobile-menu-inner ul { padding: 12px 16px !important; }
  .mobile-menu-inner li { border-bottom: 1px solid rgba(255,255,255,0.08); }
  .mobile-menu-inner a { display: block; padding: 14px 8px; font-size: 16px; }
  /* Close (X) hit area */
  .mobile-menu-inner .close-menu {
    position: absolute; top: 12px; right: 12px;
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 10002;
  }
  .mobile-menu-inner .close-menu .bar {
    display: block; width: 24px; height: 2px; background: #fff; position: absolute;
  }
  .mobile-menu-inner .close-menu .bar:first-child { transform: rotate(45deg); }
  .mobile-menu-inner .close-menu .bar:last-child  { transform: rotate(-45deg); }

  /* Carousels */
  .swiper, .swiper-container { width: 100% !important; height: auto !important; }
  .swiper-slide { width: 85% !important; }
  .slick-slider, .slick-list, .slick-track { height: auto !important; }

  /* Cards / media blocks */
  .card, .media, .post, .product, .gallery-item { margin-bottom: 16px; }
  .card img, .media img, .gallery-item img { border-radius: 8px; width: 100% !important; }

  /* Spacing utilities (tone down huge gaps) */
  .mt-100, .pt-100, .pb-100 { margin-top: 32px !important; padding-top: 32px !important; padding-bottom: 32px !important; }
  .mt-80,  .pt-80,  .pb-80  { margin-top: 28px !important; padding-top: 28px !important; padding-bottom: 28px !important; }

  /* Footer: centered links & social */
  footer { text-align: center !important; }
  footer .tim-container { padding-block: 24px !important; }
  footer nav ul, footer .footer-menu, footer .menu, footer .footer-links,
  footer .widget_nav_menu ul, footer .links {
    list-style: none; padding: 0; margin: 8px auto 0;
    display: flex; flex-wrap: wrap; justify-content: center !important; gap: 8px 14px;
  }
  footer nav ul li, footer .footer-menu li, footer .menu li, footer .footer-links li,
  footer .widget_nav_menu ul li, footer .links li { display: inline-flex; float: none !important; }
  footer .social, footer .social-links, footer .site-social, footer .footer-social {
    display: flex; justify-content: center; gap: 12px; padding-top: 8px;
  }
  footer .copyright, footer .site-info, footer p { text-align: center !important; margin-inline: auto; }

  /* ---------- Page-specific mobile fixes ---------- */

  /* Projects page: remove desktop-only fixed width & offsets */
  #Projects .row { margin-inline: -12px; }
  #Projects .row > [class^="col-"], #Projects .row > [class*=" col-"] { flex: 0 0 100% !important; max-width: 100% !important; }
  #Projects .project-box { width: 100% !important; margin: 0 0 24px 0 !important; }
  #Projects .entry-image-wrapper, #Projects .post-thumbnail img { width: 100% !important; height: auto !important; display: block; }
  #Projects .entry-title, #Projects .entry-content-wrapper, #Projects .blog-post { text-align: center !important; }

  /* Biography page: stack columns, remove right padding, center widgets */
  #about-two .row > [class^="col-"], #about-two .row > [class*=" col-"] { flex: 0 0 100% !important; max-width: 100% !important; }
  #about-two .artist-about.pr__30 { padding-right: 0 !important; }
  #about-two .album-feature img { width: 100% !important; height: auto !important; display: block; margin: 12px auto; }
  #about-two .aritist-music { display: flex; align-items: center; gap: 10px; justify-content: center; text-align: center; }
  #about-two .aritist-music .icon, #about-two .aritist-music .content { float: none !important; margin: 0; }
}

/* --------------- Small Tablets (577–768px) --------------- */
@media (min-width: 577px) and (max-width: 768px) {
  /* Relaxed scaling */
  #site-logo img, .logo-main img, .logo-stickky img { max-width: 200px !important; }
  .sp-content h2.cr-text { font-size: 36px !important; }
  .sp-container h3.cr-text { font-size: 22px !important; }

  /* 2-up grids where space allows */
  .row > [class^="col-"], .row > [class*=" col-"] { flex: 0 0 50% !important; max-width: 50% !important; }
  /* Projects & Bio stay 2-up here too */
  #Projects .row > [class^="col-"], #Projects .row > [class*=" col-"],
  #about-two .row > [class^="col-"], #about-two .row > [class*=" col-"] {
    flex: 0 0 50% !important; max-width: 50% !important;
  }
}