/* ============================================================
   ARCADE DIRECT — PAGE-SPECIFIC STYLES
   hero, categories, products grid, blog, 404, search, location
   ============================================================ */

/* ============================================================
   PAGE HERO (shared across all pages)
   ============================================================ */
.page-hero {
    background: var(--brand-navy-deep);
    padding: var(--space-12) 0 var(--space-10);
    position: relative;
    overflow: hidden;
}
.page-hero--location {
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
}
.page-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10,20,50,0.85) 0%, rgba(10,20,50,0.6) 100%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero__title {
    color: var(--white);
    font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
    margin-bottom: var(--space-4);
    max-width: 800px;
}
.page-hero__subtitle {
    color: rgba(255,255,255,0.85);
    font-size: var(--text-lg);
    max-width: 640px;
    margin-bottom: var(--space-6);
}
.page-hero__actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.page-hero--standard { padding: var(--space-8) 0 var(--space-6); }
.page-hero--standard .page-hero__title { font-size: clamp(var(--text-xl), 3vw, var(--text-3xl)); }
.page-hero--search { padding: var(--space-10) 0; }
.page-hero--archive { padding: var(--space-10) 0; }
.page-hero--quote { padding: var(--space-10) 0; }

/* ============================================================
   HERO (HOMEPAGE)
   ============================================================ */
.hero {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--brand-navy-deep);
}
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10,20,50,0.92) 0%, rgba(10,20,50,0.55) 60%, rgba(10,20,50,0.3) 100%);
}
.hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: var(--space-10);
    align-items: center;
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}
.hero__content { color: var(--white); }
.hero__eyebrow {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--brand-teal);
    margin-bottom: var(--space-3);
}
.hero__title {
    font-size: clamp(var(--text-3xl), 5vw, 3.5rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: var(--space-4);
    color: var(--white);
}
.hero__subtitle {
    font-size: var(--text-lg);
    color: rgba(255,255,255,0.85);
    max-width: 520px;
    margin-bottom: var(--space-8);
    line-height: 1.6;
}
.hero__actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
}
.hero__trust {
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
}
.trust-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    color: rgba(255,255,255,0.8);
}
.trust-badge svg { width: 16px; height: 16px; fill: var(--brand-teal); flex-shrink: 0; }

/* Hero Search Box */
.hero__search {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
}
.hero-search-form .header-search__inner {
    background: var(--white);
    border-radius: var(--radius-lg);
}
.hero-search-form .header-search__input {
    background: var(--white);
    color: var(--brand-navy-deep);
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}
.section-header--centered {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.section-title {
    font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
    font-weight: 900;
    color: var(--brand-navy-deep);
    margin: 0 0 var(--space-2);
}
.section-title--centered { text-align: center; }
.section-subtitle {
    color: var(--brand-grey-mid);
    font-size: var(--text-base);
    margin: 0;
    max-width: 600px;
}
.section-footer {
    text-align: center;
    margin-top: var(--space-8);
}

/* ============================================================
   CATEGORY GRID
   ============================================================ */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}
.category-card {
    display: block;
    border-radius: var(--radius-xl);
    overflow: hidden;
    text-decoration: none;
    position: relative;
    aspect-ratio: 4/3;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.category-card__image { position: absolute; inset: 0; }
.category-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.category-card:hover .category-card__image img { transform: scale(1.06); }
.category-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,20,50,0.9) 0%, rgba(10,20,50,0.2) 60%, transparent 100%);
}
.category-card__body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-5);
    color: var(--white);
}
.category-card__title {
    font-size: var(--text-base);
    font-weight: 800;
    margin-bottom: var(--space-1);
    color: var(--white);
}
.category-card__desc {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.75);
    margin-bottom: var(--space-1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.category-card__count {
    font-size: var(--text-xs);
    color: var(--brand-teal);
    font-weight: 700;
}

/* ============================================================
   PRODUCTS GRID
   ============================================================ */
.products-grid {
    display: grid;
    gap: var(--space-5);
}
.products-grid--4col { grid-template-columns: repeat(4, 1fr); }
.products-grid--3col { grid-template-columns: repeat(3, 1fr); }
.products-grid--2col { grid-template-columns: repeat(2, 1fr); }

.product-card {
    border: 1.5px solid var(--brand-grey-soft);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--white);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.product-card__image-link { display: block; }
.product-card__image {
    aspect-ratio: 4/3;
    overflow: hidden;
    position: relative;
}
.product-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.product-card:hover .product-card__image img { transform: scale(1.04); }
.product-card__body { padding: var(--space-4); flex: 1; display: flex; flex-direction: column; }
.product-card__title { font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-2); line-height: 1.3; }
.product-card__title a { color: var(--brand-navy-deep); text-decoration: none; }
.product-card__title a:hover { color: var(--brand-teal); }
.product-card__price { font-size: var(--text-sm); font-weight: 700; color: var(--brand-teal-dark); margin-bottom: var(--space-3); }
.product-card__actions { margin-top: auto; }

/* Product Badges */
.product-badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    font-size: var(--text-xs);
    font-weight: 800;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.product-badge--hire { background: var(--brand-navy-deep); color: var(--white); }
.product-badge--sale { background: var(--brand-red); color: var(--white); }
.product-badge--new  { background: var(--brand-teal); color: var(--white); }

/* ============================================================
   HIRE BANNER
   ============================================================ */
.hire-banner {
    background: linear-gradient(135deg, var(--brand-navy-deep) 0%, var(--brand-navy-mid) 100%);
    padding: var(--space-16) 0;
    overflow: hidden;
}
.hire-banner__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
    align-items: center;
}
.hire-banner__eyebrow {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--brand-teal);
    display: block;
    margin-bottom: var(--space-2);
}
.hire-banner__title {
    font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
    font-weight: 900;
    color: var(--white);
    margin-bottom: var(--space-4);
}
.hire-banner__text {
    color: rgba(255,255,255,0.8);
    font-size: var(--text-base);
    line-height: 1.7;
    margin-bottom: var(--space-8);
    max-width: 520px;
}
.hire-banner__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hire-banner__image { border-radius: var(--radius-xl); overflow: hidden; }
.hire-banner__image img { width: 100%; height: auto; display: block; }

/* ============================================================
   FEATURES GRID
   ============================================================ */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
.feature-card {
    padding: var(--space-6);
    border: 1.5px solid var(--brand-grey-soft);
    border-radius: var(--radius-xl);
    background: var(--white);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.feature-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.feature-card__icon {
    width: 48px;
    height: 48px;
    background: var(--brand-teal-light);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}
.feature-card__icon svg { width: 24px; height: 24px; fill: var(--brand-teal); }
.feature-card__title { font-size: var(--text-base); font-weight: 800; margin-bottom: var(--space-2); color: var(--brand-navy-deep); }
.feature-card__text { font-size: var(--text-sm); color: var(--brand-grey-mid); line-height: 1.6; margin: 0; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
.testimonial-card {
    background: var(--white);
    border: 1.5px solid var(--brand-grey-soft);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin: 0;
}
.testimonial-card__stars {
    display: flex;
    gap: 2px;
    margin-bottom: var(--space-3);
}
.testimonial-card__stars svg { width: 16px; height: 16px; fill: #f59e0b; }
.testimonial-card__text {
    font-size: var(--text-sm);
    color: var(--brand-grey-dark);
    line-height: 1.7;
    margin-bottom: var(--space-4);
    font-style: italic;
}
.testimonial-card__footer { border-top: 1px solid var(--brand-grey-soft); padding-top: var(--space-3); }
.testimonial-card__author { font-style: normal; display: flex; flex-direction: column; gap: 2px; }
.testimonial-card__author span:first-child { font-weight: 700; font-size: var(--text-sm); color: var(--brand-navy-deep); }
.testimonial-card__company { font-size: var(--text-xs); color: var(--brand-grey-mid); }

/* ============================================================
   BLOG GRID
   ============================================================ */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
.blog-grid--3col { grid-template-columns: repeat(3, 1fr); }
.blog-card {
    border: 1.5px solid var(--brand-grey-soft);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--white);
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.blog-card__image-link { display: block; }
.blog-card__image { aspect-ratio: 16/9; overflow: hidden; }
.blog-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.blog-card:hover .blog-card__image img { transform: scale(1.04); }
.blog-card__body { padding: var(--space-5); flex: 1; display: flex; flex-direction: column; }
.blog-card__cats { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); flex-wrap: wrap; }
.blog-card__date { font-size: var(--text-xs); color: var(--brand-grey-mid); display: block; margin-bottom: var(--space-2); }
.blog-card__title { font-size: var(--text-base); font-weight: 700; margin-bottom: var(--space-3); line-height: 1.4; }
.blog-card__title a { color: var(--brand-navy-deep); text-decoration: none; }
.blog-card__title a:hover { color: var(--brand-teal); }
.blog-card__excerpt { font-size: var(--text-sm); color: var(--brand-grey-mid); line-height: 1.6; flex: 1; margin-bottom: var(--space-4); }
.blog-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--brand-teal);
    text-decoration: none;
    margin-top: auto;
}
.blog-card__link svg { width: 16px; height: 16px; fill: currentColor; transition: transform var(--transition-fast); }
.blog-card__link:hover svg { transform: translateX(3px); }

/* ============================================================
   BRANDS
   ============================================================ */
.section--brands { padding: var(--space-8) 0; border-top: 1px solid var(--brand-grey-soft); }
.brands-label { text-align: center; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand-grey-mid); margin-bottom: var(--space-6); }
.brands-grid { display: flex; align-items: center; justify-content: center; gap: var(--space-8); flex-wrap: wrap; }
.brand-logo img { height: 40px; width: auto; object-fit: contain; filter: grayscale(100%); opacity: 0.6; transition: filter var(--transition-fast), opacity var(--transition-fast); }
.brand-logo:hover img { filter: grayscale(0%); opacity: 1; }

/* ============================================================
   SINGLE POST
   ============================================================ */
.post-hero { background: var(--brand-navy-deep); padding: var(--space-10) 0 var(--space-8); }
.post-hero__title { color: var(--white); font-size: clamp(var(--text-xl), 4vw, var(--text-3xl)); max-width: 800px; margin-bottom: var(--space-4); }
.post-meta { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.post-meta--top { margin-bottom: var(--space-4); }
.post-meta--byline { color: rgba(255,255,255,0.7); font-size: var(--text-sm); }
.post-meta__date, .post-meta__author, .post-meta__read-time { display: flex; align-items: center; gap: var(--space-2); }
.post-meta__date svg, .post-meta__author svg, .post-meta__read-time svg { width: 14px; height: 14px; fill: var(--brand-teal); }
.post-featured-image { margin-bottom: var(--space-8); }
.post-featured-image__img { width: 100%; border-radius: var(--radius-xl); max-height: 480px; object-fit: cover; }
.post-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-10); align-items: start; }
.post-tags { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--brand-grey-soft); }
.post-tags__label { font-size: var(--text-sm); font-weight: 700; color: var(--brand-grey-mid); }

/* Sidebar */
.post-sidebar { position: sticky; top: calc(80px + var(--space-4)); }
.sidebar-widget { background: var(--white); border: 1.5px solid var(--brand-grey-soft); border-radius: var(--radius-xl); padding: var(--space-5); margin-bottom: var(--space-5); }
.sidebar-widget--cta { background: linear-gradient(135deg, var(--brand-navy-deep), var(--brand-navy-mid)); }
.sidebar-widget--cta .sidebar-widget__title { color: var(--white); }
.sidebar-widget--cta p { color: rgba(255,255,255,0.8); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.sidebar-widget__title { font-size: var(--text-base); font-weight: 800; color: var(--brand-navy-deep); margin-bottom: var(--space-4); }
.sidebar-post-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.sidebar-post-list__item { display: flex; gap: var(--space-3); align-items: flex-start; }
.sidebar-post-list__item img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-md); flex-shrink: 0; }
.sidebar-post-list__title { font-size: var(--text-sm); font-weight: 600; color: var(--brand-navy-deep); text-decoration: none; display: block; line-height: 1.3; margin-bottom: 2px; }
.sidebar-post-list__title:hover { color: var(--brand-teal); }
.sidebar-post-list__date { font-size: var(--text-xs); color: var(--brand-grey-mid); }

/* ============================================================
   PROSE (rich text content)
   ============================================================ */
.prose { max-width: 72ch; }
.prose h2 { font-size: var(--text-2xl); font-weight: 800; margin: var(--space-8) 0 var(--space-4); color: var(--brand-navy-deep); }
.prose h3 { font-size: var(--text-xl); font-weight: 700; margin: var(--space-6) 0 var(--space-3); color: var(--brand-navy-deep); }
.prose h4 { font-size: var(--text-lg); font-weight: 700; margin: var(--space-5) 0 var(--space-2); }
.prose p { margin-bottom: var(--space-4); line-height: 1.75; color: var(--brand-grey-dark); }
.prose ul, .prose ol { margin: var(--space-4) 0 var(--space-4) var(--space-6); }
.prose li { margin-bottom: var(--space-2); line-height: 1.7; color: var(--brand-grey-dark); }
.prose a { color: var(--brand-teal); text-decoration: underline; }
.prose a:hover { color: var(--brand-teal-dark); }
.prose img { border-radius: var(--radius-lg); max-width: 100%; height: auto; margin: var(--space-6) 0; }
.prose blockquote { border-left: 4px solid var(--brand-teal); padding: var(--space-4) var(--space-6); background: var(--brand-teal-light); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin: var(--space-6) 0; }
.prose blockquote p { color: var(--brand-navy-deep); font-style: italic; margin: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: var(--space-6) 0; font-size: var(--text-sm); }
.prose th { background: var(--brand-navy-deep); color: var(--white); padding: var(--space-3) var(--space-4); text-align: left; font-weight: 700; }
.prose td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--brand-grey-soft); }
.prose tr:nth-child(even) td { background: var(--brand-grey-lightest); }

/* ============================================================
   FAQ LIST
   ============================================================ */
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item {
    border-bottom: 1px solid var(--brand-grey-soft);
    padding: var(--space-5) 0;
}
.faq-item:first-child { border-top: 1px solid var(--brand-grey-soft); }
.faq-item__question {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--brand-navy-deep);
    margin-bottom: var(--space-3);
    cursor: pointer;
}
.faq-item__answer p {
    color: var(--brand-grey-mid);
    line-height: 1.7;
    margin: 0;
}

/* ============================================================
   LOCATION PAGE
   ============================================================ */
.location-services { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.location-service-card {
    background: var(--white);
    border: 1.5px solid var(--brand-grey-soft);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
}
.location-service-card__icon {
    width: 48px;
    height: 48px;
    background: var(--brand-teal-light);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}
.location-service-card__icon svg { width: 24px; height: 24px; fill: var(--brand-teal); }
.location-service-card h3 { font-size: var(--text-base); font-weight: 800; margin-bottom: var(--space-3); color: var(--brand-navy-deep); }
.location-service-card p { font-size: var(--text-sm); color: var(--brand-grey-mid); line-height: 1.6; margin-bottom: var(--space-4); }

/* ============================================================
   404 PAGE
   ============================================================ */
.error-404 { text-align: center; max-width: 600px; margin: 0 auto; padding: var(--space-16) 0; }
.error-404__visual { position: relative; margin-bottom: var(--space-6); }
.error-404__code { font-size: 8rem; font-weight: 900; color: var(--brand-grey-soft); line-height: 1; display: block; }
.error-404__icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; fill: var(--brand-teal); }
.error-404__title { font-size: var(--text-3xl); font-weight: 900; color: var(--brand-navy-deep); margin-bottom: var(--space-4); }
.error-404__text { color: var(--brand-grey-mid); font-size: var(--text-base); margin-bottom: var(--space-8); }
.error-404__search { display: flex; gap: var(--space-3); max-width: 480px; margin: 0 auto var(--space-10); }
.error-404__search .form-input { flex: 1; }
.error-404__links-title { font-size: var(--text-lg); font-weight: 700; color: var(--brand-navy-deep); margin-bottom: var(--space-5); }
.error-404__links-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-bottom: var(--space-8); }
.error-link-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1.5px solid var(--brand-grey-soft);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--brand-navy-deep);
    font-weight: 600;
    font-size: var(--text-sm);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.error-link-card:hover { border-color: var(--brand-teal); background: var(--brand-teal-light); }
.error-link-card svg { width: 20px; height: 20px; fill: var(--brand-teal); flex-shrink: 0; }

/* ============================================================
   SEARCH PAGE
   ============================================================ */
.search-page-form__inner { display: flex; gap: var(--space-3); max-width: 600px; }
.search-page-form__input { flex: 1; padding: var(--space-3) var(--space-4); border: 1.5px solid rgba(255,255,255,0.3); border-radius: var(--radius-md); background: rgba(255,255,255,0.1); color: var(--white); font-size: var(--text-base); }
.search-page-form__input::placeholder { color: rgba(255,255,255,0.6); }
.search-page-form__input:focus { outline: none; border-color: var(--brand-teal); }
.search-results-count { font-size: var(--text-sm); color: var(--brand-grey-mid); margin-bottom: var(--space-6); }
.search-no-results { text-align: center; padding: var(--space-16) 0; }
.search-no-results svg { width: 64px; height: 64px; fill: var(--brand-grey-soft); margin-bottom: var(--space-4); }
.search-no-results h2 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.search-no-results p { color: var(--brand-grey-mid); margin-bottom: var(--space-8); }
.search-no-results__suggestions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
    .category-grid { grid-template-columns: repeat(3, 1fr); }
    .products-grid--4col { grid-template-columns: repeat(3, 1fr); }
    .features-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
    .hero__inner { grid-template-columns: 1fr; }
    .hero__search { display: none; }
    .hire-banner__inner { grid-template-columns: 1fr; }
    .hire-banner__image { display: none; }
    .post-layout { grid-template-columns: 1fr; }
    .post-sidebar { position: static; }
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .category-grid { grid-template-columns: repeat(2, 1fr); }
    .products-grid--4col,
    .products-grid--3col { grid-template-columns: repeat(2, 1fr); }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-grid,
    .blog-grid--3col { grid-template-columns: 1fr; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .location-services { grid-template-columns: 1fr; }
    .error-404__links-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .category-grid { grid-template-columns: 1fr; }
    .products-grid--4col,
    .products-grid--3col,
    .products-grid--2col { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    .hero__actions { flex-direction: column; }
    .page-hero__actions { flex-direction: column; }
}