/* ==========================================================================
   Shamrocks & Stallions — Responsive Stylesheet
   Mobile-first breakpoints
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breakpoint Reference:
   xs:  < 480px   (small phones)
   sm:  ≥ 480px   (large phones / small tablets)
   md:  ≥ 768px   (tablets)
   lg:  ≥ 1024px  (laptops)
   xl:  ≥ 1280px  (desktops)
   2xl: ≥ 1440px  (wide screens)
   -------------------------------------------------------------------------- */

/* ==========================================================================
   XS — Extra small phones (< 480px)
   ========================================================================== */
@media (max-width: 479px) {

  :root {
    --space-6:  1.25rem;
    --nav-height: 68px;
  }

  .container {
    padding-inline: var(--space-4);
  }

  /* Hero */
  .hero-headline {
    font-size: 2.25rem;
    letter-spacing: -0.01em;
  }

  .hero-sub {
    font-size: var(--text-base);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    text-align: center;
    justify-content: center;
  }

  .hero-stats {
    gap: var(--space-6);
  }

  .hero-stat-number {
    font-size: var(--text-2xl);
  }

  /* Section headers */
  .section-title {
    font-size: var(--text-2xl);
  }

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

  /* Gallery home */
  .gallery-grid-home {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .gallery-item--featured,
  .gallery-item--md,
  .gallery-item--sm {
    grid-column: unset;
    grid-row: unset;
  }

  .gallery-img-placeholder--1 { min-height: 220px; }

  /* Before/After */
  .before-after-grid {
    grid-template-columns: 1fr;
  }

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

  /* Why Us */
  .why-us-grid {
    grid-template-columns: 1fr;
  }

  .why-us-image {
    order: -1;
  }

  .why-us-img-placeholder {
    aspect-ratio: 16/9;
  }

  /* Footer */
  .footer-main {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding-block: var(--space-12);
  }

  .footer-brand {
    max-width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  /* About */
  .story-grid,
  .why-us-grid {
    grid-template-columns: 1fr;
  }

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

  .service-full-header {
    flex-direction: column;
  }

  .process-steps {
    grid-template-columns: 1fr 1fr;
  }

  .process-steps::before {
    display: none;
  }

  /* Contact */
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .contact-form-card {
    padding: var(--space-6);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  /* Gallery page */
  .masonry-gallery {
    columns: 1;
  }

  .ba-gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-filters {
    gap: var(--space-2);
  }

  /* CTA Banner */
  .cta-banner-inner {
    flex-direction: column;
    text-align: center;
  }

  .cta-banner-actions {
    justify-content: center;
    width: 100%;
  }

  /* Values */
  .values-grid {
    grid-template-columns: 1fr;
  }

  /* Trust */
  .trust-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Team */
  .team-grid {
    grid-template-columns: 1fr;
  }

  /* Estimate CTA */
  .estimate-cta {
    padding: var(--space-10) var(--space-6);
  }

  .estimate-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* Page hero */
  .page-hero {
    padding-top: calc(var(--nav-height) + var(--space-10));
    padding-bottom: var(--space-10);
  }

  /* Scroll-top button */
  .scroll-top {
    bottom: var(--space-5);
    right: var(--space-5);
    width: 42px;
    height: 42px;
  }

  /* Service areas */
  .service-areas-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Nav mobile adjustments */
  .nav-logo-text {
    display: none;
  }
}

/* ==========================================================================
   SM — Small phones and up (480px – 767px)
   ========================================================================== */
@media (min-width: 480px) and (max-width: 767px) {

  /* Gallery home */
  .gallery-grid-home {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }

  .gallery-item--featured {
    grid-column: span 2;
    grid-row: span 1;
  }

  .gallery-item--md {
    grid-column: span 1;
  }

  .gallery-item--sm {
    grid-column: span 1;
  }

  .gallery-img-placeholder--1 { min-height: 240px; }

  /* Before/After */
  .before-after-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Masonry */
  .masonry-gallery {
    columns: 2;
  }

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

  /* Footer */
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    padding-block: var(--space-16);
  }

  .footer-brand {
    grid-column: span 2;
    max-width: 100%;
  }
}

/* ==========================================================================
   Shared mobile styles (< 768px)
   ========================================================================== */
@media (max-width: 767px) {

  /* Navbar */
  .nav-links,
  .nav-cta .btn-call {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-mobile {
    display: block;
  }

  /* Only show the call button inside the CTA area on mobile */
  .nav-cta {
    gap: var(--space-2);
  }

  /* Hero */
  .hero {
    min-height: 92vh;
  }

  .hero-badge {
    font-size: 0.7rem;
  }

  /* Why Us */
  .why-us-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .why-us-image {
    order: -1;
  }

  .why-us-img-placeholder {
    aspect-ratio: 16/10;
    font-size: 4rem;
  }

  /* Story */
  .story-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .story-img-placeholder {
    aspect-ratio: 16/9;
    font-size: 4rem;
  }

  /* Process steps */
  .process-steps {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .process-steps::before {
    display: none;
  }

  /* Contact layout */
  .contact-layout {
    grid-template-columns: 1fr;
  }

  /* Before/after gallery */
  .ba-gallery-grid {
    grid-template-columns: 1fr;
  }

  .ba-project {
    min-width: unset;
  }

  /* Section padding */
  .section-pad {
    padding-block: var(--space-16);
  }

  .section-pad--lg {
    padding-block: var(--space-20);
  }

  /* Footer */
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  /* Team */
  .team-grid {
    grid-template-columns: 1fr !important;
  }

  /* Values */
  .values-grid {
    grid-template-columns: 1fr !important;
  }

  /* Trust badges */
  .trust-grid {
    grid-template-columns: 1fr !important;
  }

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

  /* Service areas */
  .service-areas-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   MD — Tablets (768px – 1023px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {

  /* Navbar */
  .nav-links {
    gap: 0;
  }

  .nav-link {
    padding: var(--space-2) var(--space-2);
    font-size: var(--text-xs);
  }

  .nav-logo-name {
    font-size: var(--text-base);
  }

  .nav-cta .btn-call {
    display: none;
  }

  /* Hero */
  .hero-headline {
    font-size: 3.5rem;
  }

  /* Gallery home */
  .gallery-grid-home {
    grid-template-columns: repeat(6, 1fr);
  }

  .gallery-item--featured { grid-column: span 6; grid-row: span 1; }
  .gallery-img-placeholder--1 { min-height: 280px; }

  .gallery-item--md { grid-column: span 3; }
  .gallery-item--sm { grid-column: span 2; }

  /* Footer */
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }

  .footer-brand {
    grid-column: span 2;
    max-width: 100%;
  }

  /* Why Us */
  .why-us-grid {
    gap: var(--space-10);
  }

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

  /* Masonry */
  .masonry-gallery {
    columns: 2;
  }

  /* BA Gallery */
  .ba-gallery-grid {
    grid-template-columns: 1fr;
  }

  /* Contact */
  .contact-layout {
    grid-template-columns: 1fr;
  }

  /* Process */
  .process-steps::before {
    display: none;
  }

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

/* ==========================================================================
   LG — Laptops (1024px – 1279px)
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1279px) {

  /* Footer */
  .footer-main {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--space-8);
  }

  /* Gallery home */
  .gallery-item--featured { grid-column: span 7; grid-row: span 2; }
  .gallery-item--md { grid-column: span 5; }
  .gallery-item--sm { grid-column: span 4; }

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

  /* Contact layout */
  .contact-layout {
    gap: var(--space-8);
  }
}

/* ==========================================================================
   XL — Desktops (1280px+)
   ========================================================================== */
@media (min-width: 1280px) {

  .container {
    padding-inline: var(--space-8);
  }

  .hero-headline {
    font-size: var(--text-7xl);
  }
}

/* ==========================================================================
   2XL — Wide screens (1440px+)
   ========================================================================== */
@media (min-width: 1440px) {

  .container {
    padding-inline: var(--space-10);
  }
}

/* ==========================================================================
   Reduced motion — accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .fade-in,
  .fade-in-left,
  .fade-in-right,
  .stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  html {
    scroll-behavior: auto;
  }

  .hero-scroll-line {
    animation: none;
  }

  .hero-badge-dot {
    animation: none;
  }
}

/* ==========================================================================
   High-contrast mode — accessibility
   ========================================================================== */
@media (prefers-contrast: high) {

  :root {
    --color-green-mid:  #005a30;
    --color-gold:       #c08000;
    --color-text-soft:  #444444;
  }

  .btn-primary,
  .btn-gold {
    outline: 2px solid currentColor;
  }

  .form-input:focus,
  .form-textarea:focus {
    outline: 3px solid var(--color-green-mid);
  }
}

/* ==========================================================================
   Touch devices — remove hover-only states that feel sticky on touch
   ========================================================================== */
@media (hover: none) {

  .service-card:hover,
  .testimonial-card:hover,
  .value-card:hover,
  .team-card:hover,
  .service-full-card:hover {
    transform: none;
    box-shadow: var(--shadow-md);
  }

  .btn:hover {
    transform: none;
  }

  .gallery-overlay {
    background: rgba(26,58,42,0.35);
  }

  .gallery-overlay-icon {
    opacity: 0.8;
    transform: none;
  }
}