/*
 * WebWithSM — assets/css/responsive.css
 *
 * All media queries. Loaded after main.css.
 * Breakpoints:
 *   ≤ 1024px  — Tablet
 *   ≤  768px  — Mobile (most phones, small tablets)
 *   ≤  480px  — Small mobile
 *   ≤  360px  — Very small phones (iPhone SE etc.)
 */


/* ─────────────────────────────────────────────────────────────────────────────
   TABLET — ≤ 1024px
───────────────────────────────────────────────────────────────────────────── */
@media ( max-width: 1024px ) {

	/* Nav */
	.primary-nav-wrap { display: none; }
	.nav-hamburger    { display: flex; }
	.btn-wa-text      { display: none; }
	.nav-actions .btn { padding: 9px 16px; font-size: 13px; }

	/* Hero */
	.hero-grid        { grid-template-columns: 1fr; gap: 40px; }
	.about-card       { max-width: 500px; margin: 0 auto; width: 100%; }
	.hero-desc        { max-width: 100%; }

	/* Services */
	.services-grid    { grid-template-columns: repeat( 2, 1fr ); }

	/* Industries */
	.industries-grid  { grid-template-columns: repeat( 4, 1fr ); }

	/* Why / Process */
	.why-grid         { grid-template-columns: 1fr; gap: 40px; }
	.process-card     { max-width: 600px; }

	/* Case studies */
	.cs-grid          { grid-template-columns: repeat( 2, 1fr ); }
	.cs-header        { flex-direction: column; align-items: flex-start; gap: 20px; }
	.cs-hero__grid    { grid-template-columns: 1fr; gap: 40px; }
	.cs-hero__metrics { grid-template-columns: repeat( 2, 1fr ); }
	.cs-section__grid { grid-template-columns: 1fr; gap: 28px; }
	.cs-results__metrics { grid-template-columns: repeat( 3, 1fr ); }

	/* Fiverr */
	.fiverr-grid      { grid-template-columns: 1fr; gap: 40px; text-align: center; }
	.fiverr-grid > div:first-child .btn { margin: 0 auto; }

	/* Packages */
	.pkg-grid         { grid-template-columns: repeat( 2, 1fr ); }

	/* FAQ */
	.faq-grid         { grid-template-columns: 1fr; gap: 32px; }

	/* Testimonials */
	.testimonials-grid { grid-template-columns: repeat( 2, 1fr ); }

	/* Blog */
	.blog-grid        { grid-template-columns: 1fr; }
	.blog-secondary   { grid-template-columns: repeat( 2, 1fr ); }
	.blog-header      { flex-direction: column; align-items: flex-start; }

	/* Posts grid */
	.posts-grid       { grid-template-columns: repeat( 2, 1fr ); }

	/* Footer */
	.footer-grid      { grid-template-columns: 1fr 1fr; gap: 32px; }

	/* CTA cards */
	.cta-cards-grid   { grid-template-columns: 1fr; gap: 16px; }

	/* Service single */
	.service-hero__grid    { grid-template-columns: 1fr; gap: 36px; }
	.service-features__grid{ grid-template-columns: 1fr; gap: 36px; }
	.service-features__list{ grid-template-columns: 1fr; }
	.service-process__list { grid-template-columns: 1fr; }

	/* Error 404 */
	.error-404__inner { grid-template-columns: 1fr; gap: 24px; text-align: center; }
	.error-404__code  { display: none; }
	.error-404__links ul { justify-content: center; }

	/* Author bio */
	.author-bio__card  { flex-direction: column; align-items: center; text-align: center; }
	.author-bio__img   { margin: 0 auto; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE — ≤ 768px
───────────────────────────────────────────────────────────────────────────── */
@media ( max-width: 768px ) {

	/* Nav */
	.nav-actions .btn  { padding: 9px 14px; font-size: 12px; }

	/* Hero */
	.hero              { padding: 44px 0 52px; }
	.hero h1           { font-size: clamp( 28px, 7vw, 40px ); }
	.hero-desc         { font-size: 15px; }
	.hero-ctas         { flex-direction: column; align-items: stretch; }
	.hero-ctas .btn    { width: 100%; justify-content: center; }
	.hero-stats        { gap: clamp( 14px, 4vw, 28px ); padding-top: 22px; }

	/* Services */
	.services-grid     { grid-template-columns: 1fr; }

	/* Industries */
	.industries-grid   { grid-template-columns: repeat( 2, 1fr ); gap: 12px; }

	/* Case studies */
	.cs-grid           { grid-template-columns: 1fr; }
	.cs-results__metrics { grid-template-columns: 1fr 1fr; }
	.cs-metrics-bar__list { flex-direction: column; gap: 0; }
	.cs-metrics-bar__item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.07); }
	.cs-metrics-bar__item:last-child { border-bottom: none; }

	/* Packages */
	.pkg-grid          { grid-template-columns: 1fr; }

	/* Testimonials */
	.testimonials-grid { grid-template-columns: 1fr; }

	/* Blog */
	.blog-grid         { grid-template-columns: 1fr; }
	.blog-secondary    { grid-template-columns: 1fr; }

	/* Posts grid */
	.posts-grid        { grid-template-columns: 1fr; }

	/* Footer */
	.footer-grid       { grid-template-columns: 1fr; gap: 28px; }
	.footer-bottom     { flex-direction: column; text-align: center; gap: 8px; }

	/* Final CTA */
	.final-cta-btns    { flex-direction: column; align-items: center; gap: 10px; }
	.final-cta-btns .btn { width: 100%; max-width: 320px; justify-content: center; }

	/* Trust bar */
	.trust-list        { gap: 10px; justify-content: flex-start; }
	.trust-item        { font-size: 11.5px; }

	/* Filters */
	.filter-row        { gap: 6px; }
	.filter-btn        { font-size: 12px; padding: 6px 12px; }

	/* Section commons */
	.archive-filter .container { padding-top: 12px; padding-bottom: 12px; }

	/* Why / process */
	.why-grid          { grid-template-columns: 1fr; gap: 36px; }
	.cs-hero__grid     { grid-template-columns: 1fr; }
	.cs-hero__meta     { grid-template-columns: 1fr 1fr; }

	/* Service single */
	.service-hero__badges { flex-direction: column; gap: 10px; }
	.service-hero__ctas   { flex-direction: column; }
	.service-hero__ctas .btn { width: 100%; justify-content: center; }

	/* Post hero */
	.post-hero         { padding-top: 36px; }
	.post-hero__meta   { gap: 8px; }

	/* Related service card */
	.cs-related-service__card { flex-direction: column; }
	.cs-related-service__ctas { flex-direction: column; }
	.cs-related-service__ctas .btn { width: 100%; justify-content: center; }

	/* Blog header */
	.blog-header .btn  { width: 100%; justify-content: center; }

	/* CTA strip */
	.cta-card          { padding: 28px 24px; }
	.cta-card h3       { font-size: 22px; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   SMALL MOBILE — ≤ 480px
───────────────────────────────────────────────────────────────────────────── */
@media ( max-width: 480px ) {

	:root {
		--pad: 16px;
		--section-pad: 44px;
	}

	.hero h1          { font-size: 28px; }
	.stat-num         { font-size: 22px; }

	.industries-grid  { grid-template-columns: repeat( 2, 1fr ); }

	.chip-row         { gap: 6px; }

	.cs-results__metrics { grid-template-columns: 1fr; }

	.pkg-grid         { gap: 14px; }

	.faq-item__q      { font-size: 15px; }

	.footer-grid      { gap: 24px; }

	.service-features__list { grid-template-columns: 1fr; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   VERY SMALL MOBILE — ≤ 360px
───────────────────────────────────────────────────────────────────────────── */
@media ( max-width: 360px ) {

	:root { --pad: 14px; }

	.hero h1          { font-size: 26px; }
	.hero-stats       { gap: 12px; }

	.industries-grid  { grid-template-columns: 1fr; }

	.nav-actions .btn-primary { padding: 9px 12px; font-size: 11px; }

	.about-stat-grid  { grid-template-columns: 1fr 1fr; }

	.cs-hero__meta    { grid-template-columns: 1fr; }

	.final-cta-btns .btn { max-width: 100%; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   CONTACT PAGE — responsive (complements inline rules in main.css)
───────────────────────────────────────────────────────────────────────────── */
@media ( max-width: 1024px ) {
	.contact-methods              { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
	.contact-grid                 { grid-template-columns: 1fr; gap: 36px; }
	.contact-faq__grid            { grid-template-columns: 1fr; }
	.contact-sidebar              { flex-direction: row; flex-wrap: wrap; gap: 16px; }
	.contact-sidebar__card        { flex: 1; min-width: 240px; }
}

@media ( max-width: 768px ) {
	.contact-hero__top            { margin-bottom: 36px; }
	.contact-methods              { max-width: 100%; gap: 14px; }
	.contact-sidebar              { flex-direction: column; }
	.contact-form-wrap__form      { padding: 24px 20px; }
	.contact-steps__item          { gap: 12px; }
}

@media ( max-width: 480px ) {
	.contact-sidebar__stats       { grid-template-columns: 1fr 1fr; }
	.contact-form-fallback__btns  { flex-direction: column; }
	.contact-form-fallback__btns .btn { width: 100%; justify-content: center; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   INDUSTRY TAXONOMY PAGES — responsive (complements inline rules in main.css)
───────────────────────────────────────────────────────────────────────────── */
@media ( max-width: 1024px ) {
	.industry-hero__grid          { grid-template-columns: 1fr; gap: 40px; }
	.industry-hero__card          { max-width: 480px; }
	.industry-why__grid           { grid-template-columns: 1fr; gap: 36px; }
}

@media ( max-width: 768px ) {
	.industry-hero__ctas          { flex-direction: column; }
	.industry-hero__ctas .btn     { width: 100%; justify-content: center; }
	.industry-hero__stats         { grid-template-columns: repeat( 3, 1fr ); gap: 8px; }
	.industry-hero__stat-num      { font-size: 18px; }
	.industry-hero__points        { gap: 10px; }
}

@media ( max-width: 480px ) {
	.industry-hero__stats         { gap: 6px; }
	.industry-hero__stat          { padding: 12px 6px; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   COMMENTS — responsive
───────────────────────────────────────────────────────────────────────────── */
@media ( max-width: 768px ) {
	.comments-wrap                { max-width: 100%; }
	.comment-meta                 { gap: 10px; }
	.comment-avatar               { width: 40px; height: 40px; }
}