/* Classic Template CSS - Traditional business directory styling */

/* Layout */
.container{ max-width:1200px; width:92%; margin-left:auto; margin-right:auto; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.py-8{ padding-top:2rem; padding-bottom:2rem; }
.py-16{ padding-top:4rem; padding-bottom:4rem; }
.py-20{ padding-top:5rem; padding-bottom:5rem; }
.mb-6{ margin-bottom:1.5rem; }
.mb-8{ margin-bottom:2rem; }
.mb-10{ margin-bottom:2.5rem; }
.mb-12{ margin-bottom:3rem; }
.p-4{ padding:1rem; }
.p-6{ padding:1.5rem; }
.px-3{ padding-left:.75rem; padding-right:.75rem; }
.px-4{ padding-left:1rem; padding-right:1rem; }
.px-6{ padding-left:1.5rem; padding-right:1.5rem; }
.px-8{ padding-left:2rem; padding-right:2rem; }
.py-1{ padding-top:.25rem; padding-bottom:.25rem; }
.py-2{ padding-top:.5rem; padding-bottom:.5rem; }
.py-3{ padding-top:.75rem; padding-bottom:.75rem; }
.rounded-none{ border-radius:0; }
.rounded-md{ border-radius:.375rem; }
.rounded-lg{ border-radius:.5rem; }

/* Colors */
.bg-white{ background:#fff; }
.bg-gray-50{ background:#f9fafb; }
.bg-gray-100{ background:#f3f4f6; }
.bg-gray-200{ background:#e5e7eb; }
.bg-gray-300{ background:#d1d5db; }
.bg-gray-800{ background:#1f2937; }
.bg-gray-900{ background:#111827; }
.hover\:bg-gray-50:hover{ background:#f9fafb; }
.hover\:bg-gray-100:hover{ background:#f3f4f6; }
.hover\:bg-gray-900:hover{ background:#111827; }

/* Text Colors */
.text-white{ color:#fff; }
.text-gray-300{ color:#d1d5db; }
.text-gray-600{ color:#4b5563; }
.text-gray-700{ color:#374151; }
.text-gray-800{ color:#1f2937; }
.text-gray-900{ color:#111827; }

/* Typography */
.font-medium{ font-weight:500; }
.font-semibold{ font-weight:600; }
.font-bold{ font-weight:700; }
.text-sm{ font-size:.875rem; }
.text-base{ font-size:1rem; }
.text-lg{ font-size:1.125rem; }
.text-xl{ font-size:1.25rem; }
.text-2xl{ font-size:1.5rem; }
.text-3xl{ font-size:1.875rem; }
.text-4xl{ font-size:2.25rem; }
.text-5xl{ font-size:3rem; }

/* Borders */
.border{ border-width:1px; }
.border-0{ border-width:0; }
.border-gray-300{ border-color:#d1d5db; }
.border-gray-400{ border-color:#9ca3af; }
.hover\:border-gray-400:hover{ border-color:#9ca3af; }

/* Shadows */
.shadow{ box-shadow:0 1px 2px rgba(0,0,0,.06); }
.hover\:shadow-lg:hover{ box-shadow:0 10px 20px rgba(0,0,0,.12); }

/* Transitions */
.transition-colors{ transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out; }
.transition-shadow{ transition:box-shadow .15s ease-in-out; }
.duration-200{ transition-duration:.2s; }
.duration-300{ transition-duration:.3s; }

/* Layout */
.grid{ display:grid; }
.flex{ display:flex; }
.inline-block{ display:inline-block; }
.items-center{ align-items:center; }
.justify-center{ justify-content:center; }
.justify-between{ justify-content:space-between; }
.text-center{ text-align:center; }
.gap-2{ gap:.5rem; }
.gap-6{ gap:1.5rem; }
.gap-8{ gap:2rem; }
.max-w-2xl{ max-width:42rem; }
.max-w-6xl{ max-width:72rem; }

/* Grid Responsive */
.grid-cols-1{ grid-template-columns:repeat(1,minmax(0,1fr)); }
.grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

/* Focus and Hover States */
.focus\:ring-2:focus{ box-shadow:0 0 0 2px rgba(59,130,246,.5); }
.focus\:ring-white:focus{ box-shadow:0 0 0 2px rgba(255,255,255,.5); }
.focus\:outline-none:focus{ outline:2px solid transparent; outline-offset:2px; }
.hover\:underline:hover{ text-decoration:underline; }

/* Form Elements */
input[type="search"]{ 
    appearance:none; 
    background-color:#fff; 
    border:1px solid #d1d5db; 
    border-radius:0; 
    padding:.75rem 1rem; 
    font-size:1rem; 
    line-height:1.5; 
}

input[type="search"]:focus{ 
    outline:2px solid transparent; 
    outline-offset:2px; 
    box-shadow:0 0 0 2px rgba(59,130,246,.5); 
    border-color:transparent; 
}

/* Buttons */
button, .button{ 
    display:inline-flex; 
    align-items:center; 
    justify-content:center; 
    border:1px solid transparent; 
    font-weight:500; 
    text-decoration:none; 
    cursor:pointer; 
    transition:all .15s ease-in-out; 
}

/* Classic Template Specific Styles */
.gw360-classic-card{ 
    background:#fff; 
    border:1px solid #d1d5db; 
    transition:border-color .3s ease; 
}

.gw360-classic-card:hover{ 
    border-color:#9ca3af; 
}

.gw360-classic-button-primary{ 
    background:#1f2937; 
    color:#fff; 
    padding:.5rem 1.5rem; 
    font-weight:500; 
    border-radius:0; 
}

.gw360-classic-button-primary:hover{ 
    background:#111827; 
}

.gw360-classic-button-secondary{ 
    background:#fff; 
    color:#1f2937; 
    border:1px solid #d1d5db; 
    padding:.5rem 1.5rem; 
    font-weight:500; 
    border-radius:0; 
}

.gw360-classic-button-secondary:hover{ 
    background:#f9fafb; 
}

/* Hero Section */
.gw360-classic-hero{ 
    background:#1f2937; 
    color:#fff; 
    padding:5rem 0; 
}

.gw360-classic-hero h1{ 
    font-size:3rem; 
    font-weight:700; 
    margin-bottom:1.5rem; 
}

.gw360-classic-hero p{ 
    font-size:1.25rem; 
    color:#d1d5db; 
    margin-bottom:2rem; 
}

/* Service Cards */
.gw360-classic-service-card{ 
    background:#fff; 
    border:1px solid #d1d5db; 
    padding:1.5rem; 
    text-align:center; 
    transition:border-color .3s ease; 
}

.gw360-classic-service-card:hover{ 
    border-color:#9ca3af; 
}

.gw360-classic-service-card img{ 
    width:4rem; 
    height:4rem; 
    margin:0 auto 1rem; 
    object-fit:cover; 
}

.gw360-classic-service-card h3{ 
    font-weight:600; 
    color:#111827; 
    margin-bottom:.5rem; 
}

.gw360-classic-service-card p{ 
    font-size:.875rem; 
    color:#4b5563; 
}

/* Featured Listings */
.gw360-classic-featured-card{ 
    background:#fff; 
    border:1px solid #d1d5db; 
    padding:1.5rem; 
    transition:border-color .3s ease; 
}

.gw360-classic-featured-card:hover{ 
    border-color:#9ca3af; 
}

.gw360-classic-featured-card img{ 
    width:100%; 
    height:12rem; 
    object-fit:cover; 
    margin-bottom:1rem; 
}

.gw360-classic-featured-card h3{ 
    font-size:1.25rem; 
    font-weight:600; 
    color:#111827; 
    margin-bottom:.5rem; 
}

.gw360-classic-featured-card p{ 
    color:#4b5563; 
    margin-bottom:.75rem; 
}

/* Responsive Design */
@media (min-width: 768px){
    .md\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .md\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
    .md\:grid-cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
    .md\:py-16{ padding-top:4rem; padding-bottom:4rem; }
    .md\:py-24{ padding-top:6rem; padding-bottom:6rem; }
    .md\:py-32{ padding-top:8rem; padding-bottom:8rem; }
    .md\:text-4xl{ font-size:2.25rem; }
    .md\:text-5xl{ font-size:3rem; }
    .md\:text-6xl{ font-size:3.75rem; }
}

@media (min-width: 1024px){
    .lg\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
    .lg\:px-8{ padding-left:2rem; padding-right:2rem; }
}

/* Typography Refinements */
.gw360-classic h1, .gw360-classic h2, .gw360-classic h3{ 
    color:#111827; 
    font-weight:700; 
}

.gw360-classic p{ 
    color:#374151; 
    line-height:1.6; 
}

.gw360-classic .text-secondary{ 
    color:#4b5563; 
}

/* Section Spacing */
.gw360-classic-section{ 
    padding:4rem 0; 
}

.gw360-classic-section.bg-gray-50{ 
    background:#f9fafb; 
}

.gw360-classic-section.bg-gray-800{ 
    background:#1f2937; 
    color:#fff; 
}

/* Call to Action */
.gw360-classic-cta{ 
    background:#1f2937; 
    color:#fff; 
    padding:4rem 0; 
    text-align:center; 
}

.gw360-classic-cta h2{ 
    font-size:1.875rem; 
    font-weight:700; 
    margin-bottom:1rem; 
}

.gw360-classic-cta p{ 
    font-size:1.25rem; 
    color:#d1d5db; 
    margin-bottom:2rem; 
    max-width:42rem; 
    margin-left:auto; 
    margin-right:auto; 
}

/* Utility Classes */
.mb-2{ margin-bottom:.5rem; }
.mb-3{ margin-bottom:.75rem; }
.mb-4{ margin-bottom:1rem; }
.mt-1{ margin-top:.25rem; }
.mt-2{ margin-top:.5rem; }
.mt-4{ margin-top:1rem; }
.mr-2{ margin-right:.5rem; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.w-16{ width:4rem; }
.h-16{ height:4rem; }
.w-full{ width:100%; }
.h-48{ height:12rem; }
.object-cover{ object-fit:cover; }
.flex-1{ flex:1 1 0%; }
.max-w-2xl{ max-width:42rem; }