/* ═══════════════════════════════════════════
   ریسپانسیو — سایت شخصی مربی بدنسازی
   ═══════════════════════════════════════════ */

/* ── تبلت: ۱۰۲۴ و کمتر ── */
@media (max-width: 1024px) {

    .header {
        z-index: 10005 !important;
    }

    .hamburger { 
        display: flex; 
        z-index: 10006 !important;
    }

    .nav {
        position: fixed;
        z-index: 10005 !important;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: var(--bg-secondary);
        border-left: 1px solid var(--border);
        padding: 90px 22px 30px;
        transition: var(--transition-slow);
        overflow-y: auto;
    }

    .nav.is-open { right: 0; }

    .nav__list { flex-direction: column; gap: 0; }

    .nav__link {
        padding: 14px 12px;
        font-size: 0.95rem;
        border-bottom: 1px solid var(--border);
    }

    .header__cta { display: none; }

    /* هیرو */
    .hero > .container { 
        display: grid; 
        grid-template-columns: 1fr;
        text-align: center; 
        gap: 15px; 
        justify-items: center;
    }
    .hero__content { 
        display: contents; 
    }
    .hero__badge { order: 1; }
    .hero__title { order: 2; }
    .hero__subtitle { order: 3; }
    .hero__image { 
        width: 300px; 
        order: 4; /* Your photo */
        margin: 10px auto; 
    }
    .hero__image img { height: 380px; }
    .hero__stats { 
        order: 5; /* Now sits directly under your photo */
        justify-content: center; 
        border-top: none; /* Removes the top border line on mobile to keep it clean */
        padding-top: 10px;
    }
    .hero__text { 
        order: 6; /* Introduction text moved below stats */
        max-width: 100%; 
    }
    .hero__buttons { 
        order: 7; /* Buttons are now at the bottom */
        justify-content: center; 
    }


    /* Programs Section custom spacing */
    #programs {
        padding-top: 25px; /* Reduced from 50px to 25px to pull the title closer to the stats */
    }
    
    .programs__tabs {
        margin-bottom: 15px; /* Reduced from 44px to 15px to pull the cards closer to the buttons */
    }

    /* About Section custom mobile spacing */
    #about {
        padding-bottom: 25px; /* Pulls the services section closer from the top */
    }
    
    #services {
        padding-top: 25px; /* Pulls the services section closer from the bottom */
    }

    .about__text {
        margin-bottom: 16px; /* Squeezes the gap under the main paragraph */
    }

    .about__details {
        margin-bottom: 16px; /* Squeezes the gap under the list */
    }

    .about__detail {
        padding: 8px 6px; /* Squeezes each list row vertically (Reduced from 16px) */
    }

    .about__detail i {
        width: 34px; /* Slightly smaller icons to match the compact rows */
        height: 34px;
        font-size: 0.85rem;
    }
    /* Transformations Section custom mobile spacing */
    #transformations {
        padding-top: 25px; /* Squeezes the gap above the title and description */
        padding-bottom: 25px; /* Squeezes the gap below the cards, pulling the next section closer */
    }

    #transformations .section__header {
        margin-bottom: 15px; /* Pulls the swiping cards closer to the text */
    }

    #transformations .section__desc {
        margin-top: 10px; /* Squeezes the space above the description text */
    }

    /* Contact Cards 2x2 Grid Layout (Highly Compressed) */
    .contact__info {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px; /* Gap between the 4 boxes and above the button is exactly 14px */
        margin-bottom: 0px !important; /* REMOVED to prevent double-spacing below the button */
    }

    .info-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 10px 4px; /* Tiny vertical/horizontal padding */
        gap: 4px; /* Small gap between icon and text */
        margin-bottom: 0 !important;
        
        /* REMOVED aspect-ratio so the height shrinks and becomes flat/short! */
        height: auto; 
        box-sizing: border-box;
    }

    .info-card:hover {
        transform: translateY(-2px);
    }

    .info-card__icon {
        width: 36px; /* Cute compact icon container */
        height: 36px;
        font-size: 0.95rem; /* Compact icon font */
    }

    .info-card__body h4 {
        font-size: 0.88rem; /* Compact title size */
        margin-bottom: 0px;
    }

    .info-card__body p {
        font-size: 0.70rem; /* Compact email/username text */
        color: var(--text-muted);
        word-break: break-all;
    }

    /* Force the Telegram CTA button to span across BOTH columns */
    .whatsapp-cta {
        grid-column: span 2;
        width: 100%;
        box-sizing: border-box;
        padding: 14px 18px; /* Squeezed button padding to make it thinner */
    }

    /* Contact Section custom mobile spacing to pull form up */
    #contact {
        padding-top: 25px; /* Squeezes space above header */
        padding-bottom: 25px; /* Squeezes space below form */
    }

    .contact__grid {
        grid-template-columns: 1fr !important;
        gap: 14px; /* Gap below the blue button is now exactly 14px, making both spaces perfectly even! */
    }

    .contact-form {
        padding: 16px 18px; /* Squeezes the form box paddings to make it shorter */
    }

    .contact-form__title {
        margin-bottom: 14px; /* Squeezes the gap under the form title */
        font-size: 1.05rem;
    }

    .contact-form .form-group {
        margin-bottom: 10px; /* Squeezes gaps between input fields */
    }
    
    .contact-form .form-group label {
        margin-bottom: 4px; /* Squeezes labels closer to input fields */
    }


    /* درباره */
    .about__grid { grid-template-columns: 1fr; gap: 40px; }
    .about__image img { height: 400px; }

    /* خدمات */
    .services__grid { 
        display: flex; /* Turn them into a horizontal slider! */
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding: 20px 9% 30px; /* Exact 9% padding left/right keeps the 82% card centered */
        max-width: 100%;
        margin: 0;
        scrollbar-width: none;
        perspective: 1200px;
        transform-style: preserve-3d;
    }

    .services__grid::-webkit-scrollbar {
        display: none;
    }

    .service-card {
        flex: 0 0 82%; /* Exact requested golden ratio width! */
        scroll-snap-align: center;
        scroll-snap-stop: always;
        box-sizing: border-box;
        position: relative;
        transform-style: preserve-3d;
        transition: z-index 0.1s ease;
        will-change: transform, opacity;
        padding: 24px 18px; /* Compact padding to keep them shorter */
    }

    /* شاگردان */
    .transformations__grid { 
        display: flex; /* Turn them into a horizontal slider! */
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding: 20px 9% 30px; /* Exact 9% padding left/right keeps the 82% card centered */
        max-width: 100%;
        margin: 0;
        scrollbar-width: none;
        perspective: 1200px;
        transform-style: preserve-3d;
    }

    .transformations__grid::-webkit-scrollbar {
        display: none;
    }

    .transform-card {
        flex: 0 0 82%; /* Exact requested golden ratio width! */
        scroll-snap-align: center;
        scroll-snap-stop: always;
        box-sizing: border-box;
        position: relative;
        transform-style: preserve-3d;
        transition: z-index 0.1s ease;
        will-change: transform, opacity;
    }

    /* نظرات */
    .testimonials__grid {
        display: flex; /* Turn them into a horizontal slider! */
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding: 20px 9% 30px; /* Exact 9% padding left/right keeps the 82% card centered */
        max-width: 100%;
        margin: 0;
        scrollbar-width: none;
        perspective: 1200px;
        transform-style: preserve-3d;
    }

    .testimonials__grid::-webkit-scrollbar {
        display: none;
    }

    .testimonial-card {
        flex: 0 0 82%; /* Exact requested golden ratio width! */
        scroll-snap-align: center;
        scroll-snap-stop: always;
        box-sizing: border-box;
        position: relative;
        transform-style: preserve-3d;
        transition: z-index 0.1s ease;
        will-change: transform, opacity;
        padding: 20px 18px; /* Compact padding to keep them shorter */
    }

    /* گالری */
    .gallery__grid {
        display: flex; /* Turn it into a horizontal slider! */
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding: 20px 9% 30px; /* Exact 9% padding left/right keeps the 82% card centered */
        max-width: 100%;
        margin: 0;
        scrollbar-width: none;
        perspective: 1200px;
        transform-style: preserve-3d;
        grid-auto-rows: unset; /* Remove grid row heights */
    }

    .gallery__grid::-webkit-scrollbar {
        display: none;
    }

    .gallery__item {
        flex: 0 0 82% !important; /* Force all photos (including wide ones) to match the 82% width */
        height: 250px !important; /* Clear, clean height for mobile gallery */
        scroll-snap-align: center;
        scroll-snap-stop: always;
        box-sizing: border-box;
        position: relative;
        transform-style: preserve-3d;
        transition: z-index 0.1s ease;
        will-change: transform, opacity;
    }

    /* Only show 3 images + the "See More" card on mobile/tablet */
    /* Hides the 4th and 5th items in the grid list */
    .gallery__grid .gallery__item:nth-child(4),
    .gallery__grid .gallery__item:nth-child(5) {
        display: none !important;
    }

    /* بلاگ */
    .blog__grid {
        display: flex; /* Turn it into a horizontal slider! */
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding: 20px 9% 30px; /* Exact 9% padding left/right keeps the 82% card centered */
        max-width: 100%;
        margin: 0;
        scrollbar-width: none;
        perspective: 1200px;
        transform-style: preserve-3d;
    }

    .blog__grid::-webkit-scrollbar {
        display: none;
    }

    .blog-card {
        flex: 0 0 82%; /* Exact matching width! */
        scroll-snap-align: center;
        scroll-snap-stop: always;
        box-sizing: border-box;
        position: relative;
        transform-style: preserve-3d;
        transition: z-index 0.1s ease;
        will-change: transform, opacity;
        padding-bottom: 14px; /* Compact padding to keep them shorter */
    }

    .blog-card__body {
        padding: 16px 14px; /* Shorter vertical padding inside card */
    }

    .blog-card__text {
        margin-bottom: 10px;
        line-height: 1.8;
    }

    /* Only show the first 2 blog articles in the mobile slider */
    /* Hides 3rd, 4th, etc., cards but spares the "More" card */
    .blog__grid .blog-card:nth-child(n+3):not(.blog-card--more) {
        display: none !important;
    }

    /* Reveal the "More" card on mobile/tablet */
    .blog-card--more {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        height: auto;
        min-height: 380px; /* Matches the average height of mobile blog cards */
    }

    /* تعرفه */
    .pricing__grid { 
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 10px; 
        
        /* Your exact requested margins: 9% padding keeps the 82% card perfectly centered */
        padding: 20px 9% 25px; 
        
        max-width: 100%; 
        margin: 0;
        scrollbar-width: none;
        perspective: 1200px;
        transform-style: preserve-3d;
    }
    
    .pricing__grid::-webkit-scrollbar {
        display: none;
    }

    .pricing-card {
        flex: 0 0 82%; /* Your exact requested card width! */
        scroll-snap-align: center;
        scroll-snap-stop: always;
        box-sizing: border-box;
        position: relative;
        transform-style: preserve-3d;
        transition: z-index 0.1s ease; 
        will-change: transform, opacity;
        
        /* Reduce card inner padding to make it shorter */
        padding: 20px 16px; 
    }

    /* THE VISUAL SHOCK ABSORBERS */
    /* Turns on smooth transitions ONLY during teleportation to absorb the 1-pixel bump */
    .pricing-card.is-warping {
        transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s ease !important;
    }

    /* Shrink the header spacing to make the card shorter */
    .pricing-card__header {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }

    .pricing-card__title {
        font-size: 1.05rem;
        margin-bottom: 4px;
    }

    .pricing-card__amount {
        font-size: 2.1rem; /* Slightly more compact price */
    }

    .pricing-card__period {
        font-size: 0.85rem;
        margin-top: -2px;
    }

    /* Shrink the checklist item spacing to make the card shorter */
    .pricing-card__features {
        margin-bottom: 16px;
        text-align: right;
    }

    .pricing-card__features li {
        padding: 5px 0; /* Reduced from 9px to 5px to save vertical space! */
        font-size: 0.80rem; /* Cleaner, more compact text */
    }

    /* Make the order button slightly more compact */
    .pricing-card .btn {
        padding: 10px 20px;
        font-size: 0.88rem;
    }

    .pricing-card--popular { 
        border-color: var(--accent);
        box-shadow: 0 8px 30px var(--accent-glow);
    }

    /* تماس */
    .contact__grid { grid-template-columns: 1fr; gap: 30px; }

    /* فوتر */
    .footer__grid { grid-template-columns: 1fr 1fr; }
}


/* ── موبایل: ۷۶۸ و کمتر ── */
@media (max-width: 768px) {

    .top-bar__right { gap: 10px; font-size: 0.7rem; }

    .hero { min-height: auto; padding: 100px 0 60px; }
    .hero__title { font-size: 2.2rem; }
    .hero__image { width: 240px; }
    .hero__image img { height: 300px; }
    .hero__image-frame { top: 12px; right: -12px; bottom: -12px; left: 12px; }

    .section { padding: 35px 0; }
    .section__title { font-size: 1.8rem; }
    .section__header { margin-bottom: 20px; }

    /* آمار */
    .stats {
        padding: 15px 0; /* Reduced from 60px to 15px to shrink top/bottom spaces */
    }

    .stats__grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 12px; /* Reduced gap between the two rows of stats */
    }

    .stat {
        padding: 6px 10px; /* Reduced vertical padding inside each stat box */
    }

    .stat__icon {
        width: 48px; /* Slightly smaller icons for a cleaner look */
        height: 48px;
        font-size: 1.10rem;
        margin: 0 auto 6px; /* Reduced gap between the icon and the number */
    }

    .stat__number { 
        font-size: 1.8rem; /* Clean, matching mobile size */
    }

    /* خدمات */
    /*.services__grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }

    /* شاگردان */
    /*.transformations__grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }

    /* نظرات */
    /*.testimonials__grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }

    /* گالری */
    /*.gallery__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
    .gallery__item--wide { grid-column: span 2; }

    /* بلاگ */
    /*.blog__grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }

    /* فرم */
    .form-row { grid-template-columns: 1fr; }
    .contact-form { padding: 22px; }

    /* فوتر ۳ ستونه روی موبایل */
    .footer__grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; /* Forces exactly 3 columns side-by-side */
        gap: 16px !important;
        padding-bottom: 24px;
    }

    /* ستون اول لوگو و شبکه‌های اجتماعی را در بالا وسط‌چین می‌کنیم */
    .footer__grid .footer__col:nth-child(1) {
        grid-column: span 3 !important; /* Stretches full-width across the top */
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 12px;
    }

    .logo--footer {
        justify-content: center;
        margin-bottom: 8px;
    }

    .footer__about {
        text-align: center;
        font-size: 0.78rem;
        max-width: 480px;
        line-height: 1.8;
        margin-bottom: 12px;
    }

    .footer__social {
        justify-content: center;
        gap: 10px;
    }

    /* تنظیمات ۳ ستون پایینی */
    .footer__col {
        text-align: center;
    }

    .footer__title {
        font-size: 0.80rem !important; /* Smaller title to fit the narrow columns */
        margin-bottom: 10px !important;
        white-space: nowrap; /* Prevents title text from wrapping awkwardly */
        position: relative;
    }

    /* خط نارنجی زیر عنوان‌ها را وسط‌چین می‌کنیم */
    .footer__title::after {
        right: 50% !important;
        transform: translateX(50%) !important;
        width: 18px !important; /* Slightly shorter underline line */
    }

    .footer__links li {
        text-align: center;
        margin-bottom: 6px;
    }

    .footer__links a {
        font-size: 0.70rem !important; /* Squeezes link text sizes */
    }

    .footer__contact-info li {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
    }

    .footer__contact-link {
        display: flex;
        flex-direction: column !important; /* Stack the icon on top of the text on phones */
        gap: 4px !important;
        align-items: center !important;
        text-align: center !important;
    }

    .footer__contact-info i {
        font-size: 0.85rem !important;
        width: auto !important;
    }

    .footer__contact-info span {
        font-size: 0.65rem !important;
        white-space: nowrap;
    }

    .footer__contact-info i {
        font-size: 0.85rem !important; /* Slightly smaller contact icons */
        width: auto !important;
    }

    .footer__contact-info span {
        font-size: 0.65rem !important; /* Keeps phone numbers/emails readable inside narrow columns */
        white-space: nowrap; /* Prevents numbers/social usernames from wrapping */
    }
}


/* ── موبایل کوچک: ۴۸۰ و کمتر ── */
@media (max-width: 480px) {

    .top-bar { display: none; }

    .logo__text { font-size: 1.1rem; }
    .logo__icon { width: 36px; height: 36px; font-size: 0.82rem; }

    .hero__title { font-size: 1.8rem; }
    .hero__subtitle { font-size: 1rem; }
    .hero__image { width: 200px; }
    .hero__image img { height: 260px; }
    .hero__buttons { flex-direction: column; }
    .hero__buttons .btn { width: 100%; }
    .hero__stats { gap: 20px; }
    .hero-stat__num { font-size: 1.5rem; }

    .section { padding: 25px 0; }
    .section__title { font-size: 1.5rem; }

    .about__image img { height: 300px; }

    .gallery__grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
    .gallery__item--wide { grid-column: span 1; }

    .programs__tabs { flex-direction: column; align-items: center; }

    .back-to-top { bottom: 18px; left: 18px; width: 40px; height: 40px; }
}
/* ═══════════════════════════════════════════
ریسپانسیو اختصاصی صفحه نوشته (Single Post)
═══════════════════════════════════════════ */

/* ── تبلت: ۱۰۲۴ و کمتر ──*/
@media (max-width: 1024px) {
    .post-layout {
        grid-template-columns: minmax(0, 1fr);
        padding: 20px 0 20px !important; /* Shrinks top/bottom padding of main area */
        overflow-x: hidden !important;   /* Locks the page width perfectly on phones */
    }
    .sidebar { 
        position: static; 
        order: 2; 
    }
    .post-content { 
        order: 1; 
    }
    /* Disables 3D layer canvas and locks the sliders flat to the 2D page on mobile */
    .testimonials__grid,
    .gallery__grid,
    .blog__grid,
    .related-posts__grid,
    .services__grid,
    .transformations__grid,
    .pricing__grid {
        perspective: none !important;        /* Disables 3D layers on mobile */
        transform-style: flat !important;    /* Forces flat 2D layout rendering */
        overflow-y: clip !important;         /* Strictly clips and locks any vertical wiggles */
    }

    .testimonial-card,
    .gallery__item,
    .blog-card,
    .related-card,
    .service-card,
    .transform-card {
        transform-style: flat !important;    /* Keeps individual cards perfectly flat */
        will-change: auto !important;        /* Prevents graphic layer drifting */
    }
    /* Reduces vertical empty spaces on phone layout */
    .related-posts {
        margin-top: 0px !important;    /* Reduces gap above related articles */
        margin-bottom: 0px !important; /* Reduces gap below related articles */
    }
    .popular-widget {
        margin-top: 0px !important;    /* Reduces gap above popular articles widget */
        margin-bottom: 0px !important; /* Reduces gap below popular articles widget */
    }
    /* Shrinks empty spaces around Gallery on phone layout */
    #gallery {
        padding-top: 0px !important;    /* Tightens gap above Gallery title */
        padding-bottom: 0px !important; /* Tightens gap below Gallery images */
    }
    #blog {
        padding-top: 0px !important;    /* Tightens gap above Blog Articles title */
    }
    .gallery__grid, 
    .testimonials__grid {
        padding-bottom: 20px !important; /* Shrinks space between sliders and text titles */
    }
    /* Shrinks top and bottom empty spaces of the Hero section on phone layout */
    .hero {
        min-height: auto !important;
        padding-top: 15px !important;    /* Reduces the massive blank void at the very top of the page */
        padding-bottom: 25px !important; /* Reduces the large gap below the Hero buttons */
    }
    #about {
        padding-top: 0px !important;    /* Pulls the "About Me" section up closer to the Hero */
    }
    /* Completely removes the outline button and collapses its empty space on phone layout */
    .hero__buttons .btn--outline {
        display: none !important; /* Hides the button entirely on mobile */
    }
    .hero__buttons {
        margin-bottom: 10px !important; /* Shrinks the empty space below the remaining orange button */
    }
    

    /* Related Posts Horizontal Slider on Tablet & Mobile */
    .related-posts__grid {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding: 20px 9% 30px !important;
        max-width: 100%;
        margin: 0px !important;
        scrollbar-width: none;
        perspective: 1200px;
        transform-style: preserve-3d;
    }

    .related-posts__grid::-webkit-scrollbar {
        display: none;
    }

    .related-card {
        flex: 0 0 82% !important;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        box-sizing: border-box;
        position: relative;
        transform-style: preserve-3d;
        transition: z-index 0.1s ease;
        will-change: transform, opacity;
        height: auto;
        display: flex;
        flex-direction: column;
    }

    /* Hide any 3rd, 4th related cards so they scroll on mobile */
    .related-posts__grid .related-card:nth-child(n+3):not(.related-card--more) {
        display: none !important;
    }

    .related-card--more {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: var(--bg-card) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius);
        min-height: 250px;
        text-decoration: none !important;
    }

    .related-card__more-content {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .related-card__more-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        background: rgba(255, 255, 255, 0.04);
        border: 2px solid var(--accent);
        border-radius: var(--radius-full);
        font-size: 1.35rem;
        color: var(--accent);
        transition: var(--transition);
    }

    .related-card--more:hover .related-card__more-icon {
        transform: scale(1.1) rotate(90deg);
        background: var(--accent);
        color: #fff;
    }

    .related-card__more-text {
        font-size: 0.9rem;
        font-weight: 600;
        color: #fff !important;
    }
}

/* ── موبایل: ۷۶۸ و کمتر ──*/
@media (max-width: 768px) {
    .post-hero { 
        min-height: 400px; 
    }
    .post-hero__title { 
        font-size: 2rem; 
    }
    .post-hero__meta { 
        gap: 16px; 
    }
    .post-section__title { 
        font-size: 1.25rem; 
    }
    .post-section__image img { 
        height: 250px; 
    }
    .nutrition-box__grid { 
        grid-template-columns: repeat(2, 1fr); 
    }
    .author-box { 
        flex-direction: column; 
        align-items: center; 
        text-align: center; 
    }
    .author-box__social { 
        justify-content: center; 
    }
    .comment-form .form-row { 
        grid-template-columns: 1fr; 
    }
    /* Note: .related-posts__grid { grid-template-columns: 1fr; } has been removed here to allow the 1024px horizontal slider to work on mobile views. */
}

/* ── موبایل کوچک: ۴۸۰ و کمتر ──*/
@media (max-width: 480px) {
    .post-hero { 
        min-height: 340px; 
    }
    .post-hero__title { 
        font-size: 1.6rem; 
    }
    .post-intro { 
        font-size: 1rem; 
        padding: 20px; 
    }
    .nutrition-box__grid { 
        grid-template-columns: 1fr; 
    }
    /* Stack the footer columns into 1 single column on tiny phones (S8+, etc.) */
    .footer__grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .footer__grid .footer__col {
        grid-column: span 1 !important;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .footer__title::after {
        right: 50% !important;
        transform: translateX(50%) !important;
    }
    
    /* Ensure the breadcrumbs wrap nicely if the text is long */
    .breadcrumb {
        flex-wrap: wrap !important;
    }

    /* Insurance Policy: Forces every container on the page to fit small screens */
    .container {
        width: 100% !important;
        padding-right: 16px !important;
        padding-left: 16px !important;
        box-sizing: border-box !important;
    }
}

/* Completely disables the blue tap highlight on mobile clicks */
* {
    -webkit-tap-highlight-color: transparent !important;
}