/* =====================================================================
   FG SEO Services - Responsive Styles
   Mobile first adjustments layered on top of styles.css.
   ===================================================================== */

/* Large laptops and down */
@media (max-width: 1080px) {
  :root { --fg-section-y: 80px; }

  .fg-hero__grid { gap: 40px; }
  .fg-steps { grid-template-columns: repeat(3, 1fr); }
  .fg-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .fg-footer__brand { grid-column: 1 / -1; }
}

/* Tablets */
@media (max-width: 900px) {
  .fg-nav,
  .fg-header__actions .fg-btn { display: none; }
  .fg-burger { display: flex; }

  /* Mobile nav panel */
  .fg-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    background: var(--fg-white);
    border-bottom: 1px solid var(--fg-line);
    padding: 16px 24px 22px;
    box-shadow: var(--fg-shadow);
  }
  .fg-nav.is-open .fg-nav__link { padding: 13px 14px; font-size: 1rem; }
  .fg-nav.is-open .fg-btn { display: inline-flex; margin-top: 8px; }

  /* Mobile keeps navigation flat: no dropdowns, no carets, no submenu toggles.
     Services and Industries simply link to their overview pages. */
  .fg-nav-item,
  .fg-nav-dropdown { display: block; position: static; }
  .fg-nav.is-open .fg-nav-dropdown__toggle { display: flex; }
  .fg-nav-caret { display: none; }
  .fg-nav-dropdown-menu { display: none !important; }

  .fg-hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .fg-hero { padding: 56px 0 64px; }
  .fg-about-grid { grid-template-columns: 1fr; gap: 32px; }
  .fg-portrait { max-width: 360px; }
  .fg-profile-card { max-width: 380px; margin-left: auto; margin-right: auto; }
  .fg-split { grid-template-columns: 1fr; gap: 32px; }
  .fg-split--reverse > :first-child { order: 0; }
  .fg-contact-grid { grid-template-columns: 1fr; }

  /* Industry hero stacks: text first, image below */
  .fg-page-hero--media .fg-page-hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .fg-industry-hero-image { max-width: 560px; }

  .fg-grid--3,
  .fg-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .fg-problem-grid { grid-template-columns: repeat(2, 1fr); }
  .fg-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Large phones */
@media (max-width: 640px) {
  :root { --fg-section-y: 60px; --fg-gap: 16px; }

  body.fg-site { font-size: 16px; }

  .fg-container { padding: 0 18px; }

  .fg-grid--2,
  .fg-grid--3,
  .fg-grid--4 { grid-template-columns: 1fr; }
  .fg-problem-grid { grid-template-columns: 1fr; }
  .fg-steps { grid-template-columns: 1fr; }
  .fg-stats { grid-template-columns: repeat(2, 1fr); }

  .fg-dashboard__grid { grid-template-columns: 1fr; }

  .fg-form__row { grid-template-columns: 1fr; }

  .fg-cta-band { padding: 36px 22px; }

  .fg-footer__grid { grid-template-columns: 1fr 1fr; }
  .fg-footer__brand { grid-column: 1 / -1; }
  .fg-footer-contact-list { gap: 14px 28px; }

  .fg-btn-row { gap: 10px; }
  .fg-btn { width: 100%; }
  .fg-hero__cta .fg-btn { width: auto; }
  .fg-section-head { margin-bottom: 32px; }

  .fg-home-hero-image-card { max-width: 520px; }
  .fg-home-hero-float { font-size: 0.7rem; padding: 6px 11px; max-width: 70%; }
  .fg-home-hero-float--2 { display: none; }
}

/* Small phones */
@media (max-width: 480px) {
  /* Keep the full brand name readable, drop the tagline when space is tight */
  .fg-logo-tagline { display: none; }
  .fg-logo-name { font-size: 1.08rem; }
  .fg-logo-mark { width: 40px; height: 40px; }

  .fg-home-hero-float--1 { display: none; }
}

@media (max-width: 400px) {
  .fg-footer__grid { grid-template-columns: 1fr; }
}

/* ---------- Portfolio page responsive ---------- */
@media (max-width: 1080px) {
  .fg-portfolio-hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .fg-portfolio-summary { max-width: 460px; }
}

@media (max-width: 900px) {
  .fg-portfolio-stats { grid-template-columns: repeat(2, 1fr); }
  .fg-case-featured { grid-template-columns: 1fr; gap: 28px; }
  .fg-case-detail__grid { grid-template-columns: 1fr; gap: 32px; }
  .fg-home-portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .fg-service-hero__grid { grid-template-columns: 1fr; }
  .fg-service-includes__grid { grid-template-columns: repeat(2, 1fr); }
  .fg-chooser__grid { grid-template-columns: repeat(2, 1fr); }
  .fg-service-process { grid-template-columns: repeat(2, 1fr); }
  .fg-service-process::before { display: none; }
  .fg-service-proof__grid { grid-template-columns: repeat(2, 1fr); }
  .fg-related-services__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .fg-portfolio-grid { grid-template-columns: 1fr; }
  .fg-portfolio-stats { grid-template-columns: 1fr; }
  .fg-case-proof-grid { grid-template-columns: repeat(2, 1fr); }
  .fg-case-featured { padding: 22px; }
  .fg-portfolio-filters { justify-content: flex-start; }
  .fg-case-detail__company { font-size: 1.4rem; }
  .fg-home-portfolio-grid { grid-template-columns: 1fr; }
  .fg-home-portfolio-actions .fg-btn { width: 100%; max-width: 320px; }
}

@media (max-width: 400px) {
  .fg-case-proof-grid,
  .fg-case-proof-grid--mini { grid-template-columns: 1fr 1fr; }
}

/* ---------- Testimonials responsive ---------- */
@media (max-width: 900px) {
  .fg-testimonial-grid,
  .fg-testimonial-grid--portfolio { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .fg-testimonial-grid,
  .fg-testimonial-grid--portfolio,
  .fg-testimonial-grid--about { grid-template-columns: 1fr; }
  .fg-testimonials-actions .fg-btn { width: 100%; max-width: 320px; }
  .fg-service-hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .fg-service-trust-row { margin-top: 20px; padding-top: 18px; gap: 10px; }
  .fg-service-problem__grid { grid-template-columns: 1fr; gap: 28px; }
  .fg-service-includes__grid { grid-template-columns: 1fr; }
  .fg-chooser__grid { grid-template-columns: 1fr; }
  .fg-answer-block { padding: 24px 22px; }
  .fg-answer-block__q { font-size: 1.2rem; }
  .fg-service-deliverables__grid { grid-template-columns: 1fr; }
  .fg-service-process { grid-template-columns: 1fr; }
  .fg-service-process::before { display: none; }
  .fg-service-proof__grid { grid-template-columns: 1fr; }
  .fg-related-services__grid { grid-template-columns: 1fr; }
}

/* ---------- Industry landing pages responsive ---------- */
@media (max-width: 1080px) {
  .fg-industry-hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .fg-industry-services__grid { grid-template-columns: repeat(2, 1fr); }
  .fg-industry-roadmap { grid-template-columns: repeat(2, 1fr); }
  .fg-industry-roadmap::before { display: none; }
}

@media (max-width: 900px) {
  .fg-industry-intent__grid { grid-template-columns: 1fr; }
  .fg-industry-problem__grid { grid-template-columns: 1fr; gap: 28px; }
  .fg-industry-keywords__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .fg-industry-hero { padding: 40px 0 48px; }
  .fg-industry-opportunity-card { position: relative; right: auto; bottom: auto; left: auto; margin-top: 12px; }
  .fg-industry-services__grid { grid-template-columns: 1fr; }
  .fg-industry-roadmap { grid-template-columns: 1fr; }
}

/* ---------- Blog article page responsive ---------- */
@media (max-width: 980px) {
  .fg-article-layout { grid-template-columns: 1fr; gap: 28px; }
  .fg-article-shell { grid-template-columns: 1fr; gap: 32px; }
  .fg-article-main { max-width: none; }
  .fg-article-sidebar { position: static; top: auto; }
  .fg-article-flow { grid-template-columns: repeat(2, 1fr); }
  .fg-article-flow::before { display: none; }
  .fg-related-articles__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .fg-blog-hero { padding: 40px 0 44px; }
  .fg-blog-featured-frame { margin-top: 28px; }
  .fg-article-shell { padding-top: 30px; }
  .fg-article-stat-grid { grid-template-columns: 1fr; }
  .fg-article-flow { grid-template-columns: 1fr; }
  .fg-article-checklist-grid { grid-template-columns: 1fr; }
  .fg-related-articles__grid { grid-template-columns: 1fr; }
  .fg-author-box { flex-direction: column; gap: 16px; text-align: left; }
  .fg-article-main h2 { margin-top: 36px; }
  .fg-article-inline-cta { flex-direction: column; align-items: flex-start; }
  .fg-article-inline-cta__actions { width: 100%; }
  .fg-article-inline-cta__actions .fg-btn { width: 100%; }

  /* Stacked comparison table on small screens */
  .fg-article-comparison-table thead { display: none; }
  .fg-article-comparison-table table,
  .fg-article-comparison-table tbody,
  .fg-article-comparison-table tr,
  .fg-article-comparison-table td { display: block; width: 100%; }
  .fg-article-comparison-table tr { border-bottom: 1px solid var(--fg-line); padding: 6px 0; }
  .fg-article-comparison-table tr:last-child { border-bottom: none; }
  .fg-article-comparison-table td { border: none; padding: 8px 18px; }
  .fg-article-comparison-table td:first-child { border-right: none; }
  .fg-article-comparison-table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--fg-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-blue);
    margin-bottom: 2px;
  }
}

/* ---------- Blog hub (listing page) responsive ---------- */
@media (max-width: 980px) {
  .fg-blog-grid { grid-template-columns: repeat(2, 1fr); }
  .fg-blog-featured-card { grid-template-columns: 1fr; }
  .fg-blog-featured-media img { min-height: 240px; }
  .fg-blog-featured-content { padding: 32px; }
}

@media (max-width: 640px) {
  .fg-bloghub-hero { padding: 40px 0 44px; }
  .fg-blog-page .fg-bloghub-hero .fg-blog-hero-subtitle {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .fg-blog-grid { grid-template-columns: 1fr; }
  .fg-blog-featured-content { padding: 24px; }
  .fg-blog-final-cta .fg-btn-row { flex-direction: column; }
  .fg-blog-final-cta .fg-btn-row .fg-btn { width: 100%; }
}

/* ---------- Contact page responsive ---------- */
@media (max-width: 1024px) {
  .fg-contact-review-areas__grid { grid-template-columns: repeat(2, 1fr); }
  .fg-contact-proof-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 920px) {
  .fg-contact-hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .fg-contact-hero__sub { max-width: 100%; }
  .fg-contact-form-section__grid { grid-template-columns: 1fr; }
  .fg-contact-details-card { position: static; top: auto; }
  .fg-contact-process__grid { grid-template-columns: 1fr; gap: 18px; }
  .fg-contact-fit__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .fg-contact-hero { padding: 44px 0 52px; }
  .fg-contact-hero-card { padding: 26px; }
  .fg-contact-form-card { padding: 26px 22px; }
  .fg-contact-form .fg-form__row { grid-template-columns: 1fr; gap: 0; }
  .fg-contact-review-areas__grid { grid-template-columns: 1fr; }
  .fg-contact-proof-strip { grid-template-columns: 1fr; }
  .fg-contact-hero-copy .fg-btn-row { flex-direction: column; }
  .fg-contact-hero-copy .fg-btn-row .fg-btn { width: 100%; }
  .fg-contact-final-cta .fg-btn-row { flex-direction: column; }
  .fg-contact-final-cta .fg-btn-row .fg-btn { width: 100%; }
}