/*
================================================
ATTORNEYS.CSS - GARBACZ ZLOTOWITZ LAW FIRM
Full attorneys page styling with alternating layout
Elegant, sophisticated, minimal design with BLUE THEME
UPDATED: Blue color scheme matching areas-of-practice page
================================================
*/

/* ==========================================
   1. ATTORNEYS HERO SECTION - COMPACT WITH BACKGROUND IMAGE & BLUE THEME (RESPONSIVE FIXES)
   ========================================== */
.attorneys-hero {
    /* BLUE GRADIENT BACKGROUND - matching areas-of-practice */
    background: linear-gradient(135deg, #0a1628 0%, #1a2642 50%, #0f1d35 100%);
    padding-top: var(--header-height-mobile);
    min-height: 200px; /* SUPER COMPACT - Andrew appears much higher */
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    
    /* BACKGROUND IMAGE - MULTIPLE PATH OPTIONS - TRY EACH ONE */
    /* Option 1: Relative from css/ folder (MOST COMMON) */
    background-image: url('../images/attorneys-hero-image.jpg');
    
    /* If Option 1 doesn't work, comment it out and try Option 2: */
    /* background-image: url('/images/attorneys-hero-image.jpg'); */
    
    /* If neither work, try Option 3 with your domain: */
    /* background-image: url('https://yourdomain.com/images/attorneys-hero-image.jpg'); */
    
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

@media (min-width: 768px) {
    .attorneys-hero {
        padding-top: var(--header-height);
        min-height: 250px; /* SUPER COMPACT for desktop too */
        background-attachment: fixed;
    }
}

/* Dark overlay for text readability - BLUE TINTED */
.attorneys-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(10, 22, 40, 0.85) 0%,
        rgba(15, 29, 53, 0.75) 50%,
        rgba(10, 22, 40, 0.85) 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Optional: Subtle accent gradient overlay */
.attorneys-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 80% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

.attorneys-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: min(800px, 95vw);
    margin: 0 auto;
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1rem, 3vw, 1rem);
    box-sizing: border-box;
}

.attorneys-hero-title {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.05; /* Tighter line height */
    margin-bottom: clamp(0.75rem, 2vw, 1rem);
    letter-spacing: -0.02em;
    max-width: 100%;
    word-wrap: break-word;
}

.attorneys-hero-title .line {
    display: block;
    overflow: hidden;
    padding: clamp(0.1rem, 0.5vw, 0.15rem) 0;
}

.attorneys-hero-title .line span {
    display: block;
    transform: translateY(100%);
}

.attorneys-hero-subtitle {
    font-size: clamp(0.9rem, 1.8vw, 1.05rem);
    color: var(--color-light-text-muted);
    line-height: 1.55;
    margin: 0;
    max-width: min(700px, 90vw);
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .attorneys-hero-subtitle {
        line-height: 1.6;
    }
}

/* ==========================================
   2. ATTORNEYS GRID SECTION - ALTERNATING LAYOUT WITH BLUE BACKGROUND (RESPONSIVE FIXES)
   ========================================== */
.attorneys-grid-section {
    /* BLUE GRADIENT BACKGROUND - matching hero */
    background: linear-gradient(180deg, #0a1628 0%, #0f1d35 50%, #1a2642 100%);
    padding-top: 2rem; /* Reduced from default to bring content up */
    overflow-x: hidden;
    width: 100%;
}

@media (min-width: 768px) {
    .attorneys-grid-section {
        padding-top: 3rem;
    }
}

.attorney-fullpage-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
    margin-bottom: 3rem;
    padding: clamp(1.5rem, 4vw, 2.75rem);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.012) 100%);
    border: 1px solid rgba(194, 166, 115, 0.16);
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 60px rgba(3, 8, 16, 0.35);
    transition: border-color var(--transition-medium), box-shadow var(--transition-medium);
    animation: fadeInUp 0.8s ease forwards;
    opacity: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.attorney-fullpage-card:hover {
    border-color: rgba(194, 166, 115, 0.3);
    box-shadow: 0 28px 72px rgba(3, 8, 16, 0.45);
}

.attorney-fullpage-card:first-of-type {
    margin-top: 0; /* Remove any top margin from first card */
}

@media (min-width: 768px) {
    .attorney-fullpage-card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 3rem;
        margin-bottom: 5rem;
    }
}

@media (min-width: 1024px) {
    .attorney-fullpage-card {
        gap: 4rem;
    }
}

/* Stagger animations */
.attorney-fullpage-card:first-of-type {
    animation-delay: 0.1s;
}

.attorney-fullpage-card:nth-of-type(2) {
    animation-delay: 0.3s;
}

.attorney-fullpage-card:nth-of-type(3) {
    animation-delay: 0.5s;
}

.attorney-fullpage-card:nth-of-type(4) {
    animation-delay: 0.7s;
}

.attorney-fullpage-card:nth-of-type(5) {
    animation-delay: 0.9s;
}

.attorney-fullpage-card:nth-of-type(6) {
    animation-delay: 1.1s;
}

.attorney-fullpage-card:nth-of-type(7) {
    animation-delay: 1.3s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alternate layout for odd/even — use order instead of direction:rtl to avoid overflow clipping */
.attorney-right {
    direction: ltr;
}

@media (min-width: 768px) {
    .attorney-right .attorney-image-col {
        order: 2;
    }

    .attorney-right .attorney-content-side {
        order: 1;
    }
}

.attorney-image-col,
.attorney-content-side {
    min-width: 0;
}

/* Image column: photo, then Practice Focus / Education stacked right
   beneath it — so the sidebar meta lines up with the bio column next
   to it instead of leaving a gap under a short, square photo */
.attorney-image-col {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* ==========================================
   3. ATTORNEY IMAGE SIDE - BLUE BORDER GLOW (RESPONSIVE FIXES)
   ========================================== */
.attorney-image-side {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    aspect-ratio: 3 / 4;
    /* White behind the head, fading down into deep blue at the bottom */
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #ffffff 50%,
        #16294a 74%,
        #0c1a30 89%,
        #0a1628 100%
    );
    border: 1px solid rgba(194, 166, 115, 0.3);
    transition: all var(--transition-slow);
    max-width: 100%;
    box-sizing: border-box;
    isolation: isolate;
}

/* GZR monogram watermark — sits BEHIND the attorney, anchored to the left */
.attorney-image-side::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 9%;
    left: 3%;
    width: 38%;
    height: 22%;
    /* Blue GZR watermark (baked-in blue PNG so it works on file:// too) */
    background: url('../images/brand/gzr-monogram-blue.png') left center / contain no-repeat;
    opacity: 0.85;
    pointer-events: none;
}

/* Bottom fade — dissolves the bust into the blue */
.attorney-image-side::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(7, 18, 28, 0) 0%,
        rgba(7, 18, 28, 0.18) 38%,
        rgba(7, 18, 28, 0.7) 70%,
        #07121c 100%
    );
}

.attorney-image-side:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 30px rgba(26, 38, 66, 0.6), 
                0 0 40px rgba(212, 175, 55, 0.2);
    transform: scale(1.02);
}

.attorney-image-side:hover::before {
    opacity: 1;
}

.attorney-image-side picture {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
}

.attorney-image-side img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Head sits high; shoulders land in the lower blue band */
    object-position: 62% 0%;
    transform: scale(1.04);
    transform-origin: 62% 0%;
    transition: transform var(--transition-slow);
    /* Fade the very bottom of the cutout so it melts into the blue */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, rgba(0, 0, 0, 0.55) 86%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 72%, rgba(0, 0, 0, 0.55) 86%, rgba(0, 0, 0, 0) 100%);
}

.attorney-placeholder {
    width: 100%;
    height: 100%;
    min-height: 420px;
    display: grid;
    place-items: center;
    background:
        linear-gradient(135deg, rgba(194, 166, 115, 0.72), rgba(10, 22, 40, 0.95)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 18px),
        url("../images/brand/gzr-monogram-white.png") center / 82% auto no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0.84) 70%, rgba(0, 0, 0, 0.36) 88%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0.84) 70%, rgba(0, 0, 0, 0.36) 88%, rgba(0, 0, 0, 0) 100%);
}

.attorney-placeholder span {
    display: grid;
    place-items: center;
    width: 132px;
    height: 132px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background: rgba(10, 22, 40, 0.62);
    color: var(--color-gold-hover);
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 700;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
}

.attorney-inline-link {
    display: inline-flex;
    width: fit-content;
    margin-top: 0.25rem;
    border-bottom: 1px solid rgba(194, 166, 115, 0.6);
    color: var(--color-gold-hover);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.attorney-inline-link:hover {
    border-color: var(--color-light-text);
    color: var(--color-light-text);
}

.attorney-image-side:hover img {
    transform: scale(0.98);
}

.image-overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 56%;
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 0.08) 0%,
        transparent 50%
    );
    pointer-events: none;
    z-index: 9;
}

/* ==========================================
   3B. FULL BIO PAGE — SCOPED REFINEMENTS
   (kept out of the shared .attorney-image-side /
   .attorney-contact-overlay rules so the homepage
   "meet the team" preview cards are unaffected)
   ========================================== */

/* Tier section headers — Partners / Counsel / Associates */
.attorney-tier-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 0 0 2rem;
}

.attorney-tier-header:not(:first-child) {
    margin-top: 1.5rem;
}

.attorney-tier-label {
    font-family: var(--font-body);
    font-size: clamp(0.78rem, 1.4vw, 0.85rem);
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-accent);
    white-space: nowrap;
}

.attorney-tier-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(194, 166, 115, 0.45), transparent);
}

/* Frame the photo at its own natural (square) proportions instead of
   forcing it into a taller box with a scale/offset hack — nothing is
   stretched or cropped, and it just sits at the top of the column.
   No sticky/scroll tricks, so it never "cuts out" and fades back in. */
.attorneys-grid-section .attorney-image-side {
    aspect-ratio: 1 / 1;
}

.attorneys-grid-section .attorney-image-side img {
    object-fit: contain;
    object-position: center top;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
}

/* GZR watermark moves to the top right, clear of the face */
.attorneys-grid-section .attorney-image-side::before {
    top: 6%;
    left: auto;
    right: 6%;
    bottom: auto;
    width: 20%;
    height: 12%;
    opacity: 0.5;
}

/* Just a whisper of a fade at the very bottom edge — the cutout's own
   transparency already blends into the panel; this only softens the
   seam where the photo meets the card padding */
.attorneys-grid-section .attorney-image-side::after {
    height: 10%;
    background: linear-gradient(
        to bottom,
        rgba(7, 18, 28, 0) 0%,
        rgba(7, 18, 28, 0.4) 100%
    );
}

/* Compact, labeled contact chips in the content column */
.attorney-contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.attorney-contact-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(194, 166, 115, 0.35);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
    color: var(--color-light-text-muted);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: all var(--transition-fast);
}

.attorney-contact-chip svg {
    width: 16px;
    height: 16px;
    color: var(--color-accent);
    flex-shrink: 0;
    transition: color var(--transition-fast);
}

.attorney-contact-chip:hover {
    border-color: var(--color-accent);
    color: var(--color-light-text);
    background: rgba(194, 166, 115, 0.08);
    transform: translateY(-2px);
}

.attorney-contact-chip:hover svg {
    color: var(--color-accent-hover);
}

/* Practice Focus + Education & Admission now live in the image column,
   stacked directly beneath the photo, so they line up alongside the
   bio paragraphs instead of leaving a gap under a short, square photo */
.attorney-footer-meta {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(194, 166, 115, 0.16);
}

@media (max-width: 767px) {
    .attorney-fullpage-card {
        padding: 1.5rem;
    }

    .attorney-tier-header {
        margin-bottom: 1.5rem;
    }

    .attorney-footer-meta {
        padding-top: 1.5rem;
    }
}

/* ==========================================
   4. ATTORNEY CONTENT SIDE (RESPONSIVE FIXES)
   ========================================== */
.attorney-content-side {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: clamp(1rem, 3vw, 0);
    max-width: 100%;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .attorney-content-side {
        gap: 2.5rem;
    }
}

/* ==========================================
   5. ATTORNEY HEADER (RESPONSIVE FIXES)
   ========================================== */
.attorney-header {
    border-bottom: 2px solid rgba(194, 166, 115, 0.3);
    padding-bottom: 1.5rem;
    max-width: 100%;
}

.attorney-fullpage-name {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 0.5rem 0;
    color: var(--color-light-text);
    max-width: 100%;
    word-wrap: break-word;
}

.attorney-fullpage-title {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    color: var(--color-accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.title-divider {
    width: min(60px, 20vw);
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), transparent);
    margin-top: 1rem;
}

/* ==========================================
   6. ATTORNEY BIO SECTION (RESPONSIVE FIXES)
   ========================================== */
.attorney-bio-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 100%;
}

.attorney-bio-main {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.8;
    color: var(--color-light-text);
    margin: 0;
    max-width: 100%;
}

.attorney-bio-secondary {
    font-size: clamp(0.9rem, 1.5vw, 0.95rem);
    line-height: 1.7;
    color: var(--color-light-text-muted);
    margin: 0;
    max-width: 100%;
}

/* ==========================================
   7. EXPERTISE SECTION - BLUE THEMED TAGS (RESPONSIVE FIXES)
   ========================================== */
.expertise-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 100%;
}

.expertise-title {
    font-size: clamp(0.9rem, 1.8vw, 1rem);
    font-weight: 600;
    color: var(--color-light-text);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.expertise-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    max-width: 100%;
}

.expertise-tag {
    display: inline-flex;
    align-items: center;
    padding: clamp(0.4rem, 1vw, 0.5rem) clamp(0.75rem, 2vw, 1rem);
    /* BLUE BACKGROUND WITH GOLD BORDER */
    background: rgba(26, 38, 66, 0.6);
    border: 1px solid rgba(194, 166, 115, 0.4);
    border-radius: var(--radius-sm);
    color: var(--color-light-text-muted);
    font-size: clamp(0.8rem, 1.5vw, 0.85rem);
    font-weight: 500;
    transition: all var(--transition-fast);
    box-sizing: border-box;
    white-space: nowrap;
}

.expertise-tag:hover {
    background: rgba(26, 38, 66, 0.9);
    border-color: var(--color-accent);
    color: var(--color-accent);
    box-shadow: 0 0 15px rgba(194, 166, 115, 0.3);
}

/* ==========================================
   8. CREDENTIALS SECTION (RESPONSIVE FIXES)
   ========================================== */
.credentials-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 100%;
}

.credentials-title {
    font-size: clamp(0.9rem, 1.8vw, 1rem);
    font-weight: 600;
    color: var(--color-light-text);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.credentials-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    max-width: 100%;
}

.credentials-list li {
    font-size: clamp(0.9rem, 1.5vw, 0.95rem);
    color: var(--color-light-text-muted);
    line-height: 1.6;
    padding-left: 1.5rem;
    position: relative;
    transition: all var(--transition-fast);
    max-width: 100%;
    box-sizing: border-box;
}

.credentials-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: 700;
    font-size: 1.1rem;
}

.credentials-list li:hover {
    padding-left: 2rem;
    color: var(--color-light-text);
}

/* ==========================================
   9. ATTORNEY CONTACT OVERLAY (ALWAYS VISIBLE) - LARGER BUTTONS (RESPONSIVE FIXES)
   ========================================== */
.attorney-contact-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.25rem, 3vw, 1.5rem);
    padding: clamp(3.5rem, 10vw, 5rem) clamp(1.25rem, 3vw, 1.5rem) clamp(1.25rem, 3vw, 1.5rem);
    background: linear-gradient(
        to bottom,
        rgba(7, 18, 28, 0) 0%,
        rgba(7, 18, 28, 0.45) 28%,
        #07121c 72%
    );
    opacity: 1;
    transform: translateY(0);
    transition: all var(--transition-medium);
    pointer-events: auto;
    z-index: 20;
    box-sizing: border-box;
}

.contact-overlay-btn {
    width: clamp(60px, 10vw, 70px);
    height: clamp(60px, 10vw, 70px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.1);
    border: 2px solid var(--color-accent);
    border-radius: 50%;
    color: var(--color-accent);
    transition: all var(--transition-fast);
    cursor: pointer;
    flex-shrink: 0;
    box-sizing: border-box;
}

.contact-overlay-btn:hover {
    background: var(--color-accent);
    color: #0a1628; /* Dark blue text on gold background */
    transform: scale(1.15) translateY(-5px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4), 
                0 0 30px rgba(194, 166, 115, 0.3);
}

.contact-overlay-btn svg {
    width: clamp(28px, 5vw, 32px);
    height: clamp(28px, 5vw, 32px);
    transition: transform var(--transition-fast);
}

.contact-overlay-btn:hover svg {
    transform: scale(1.1);
}

/* Mobile - slightly smaller but still prominent */
@media (max-width: 767px) {
    .attorney-contact-overlay {
        padding: 5rem 1.5rem 1.5rem;
        gap: 1.25rem;
    }
    
    .contact-overlay-btn {
        width: 60px;
        height: 60px;
    }
    
    .contact-overlay-btn svg {
        width: 28px;
        height: 28px;
    }
}

/* Tablet optimization */
@media (min-width: 768px) and (max-width: 1023px) {
    .contact-overlay-btn {
        width: 65px;
        height: 65px;
    }
    
    .contact-overlay-btn svg {
        width: 30px;
        height: 30px;
    }
}

/* ==========================================
   10. MOBILE OPTIMIZATIONS (ENHANCED)
   ========================================== */
@media (max-width: 767px) {
    .attorneys-hero {
        min-height: 280px;
    }
    
    .attorney-fullpage-card {
        margin-bottom: 3rem;
        gap: 1.5rem;
    }
    
    /* Dissolve column wrappers so children become direct grid items */
    .attorney-fullpage-card .attorney-image-col,
    .attorney-fullpage-card .attorney-content-side {
        display: contents;
    }

    /* Mobile order: name/contact → image → bio → practice focus */
    .attorney-fullpage-card .attorney-header      { order: 1; }
    .attorney-fullpage-card .attorney-image-side  { order: 2; }
    .attorney-fullpage-card .attorney-bio-section { order: 3; }
    .attorney-fullpage-card .attorney-footer-meta { order: 4; }

    .attorney-bio-section {
        gap: 1.25rem;
    }
    
    .expertise-tags {
        gap: 0.5rem;
    }
    
    .expertise-tag {
        font-size: 0.8rem;
        padding: 0.4rem 0.75rem;
    }
    
    .attorney-image-side {
        aspect-ratio: 2 / 3;
    }
}

/* ==========================================
   11. TABLET OPTIMIZATIONS (ENHANCED)
   ========================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .attorney-fullpage-card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 2.5rem;
        margin-bottom: 4rem;
    }
    
    .attorney-fullpage-name {
        font-size: 2.25rem;
    }
    
    .attorney-fullpage-title {
        font-size: 1.1rem;
    }
}

/* ==========================================
   12. LARGE DESKTOP OPTIMIZATIONS (RESPONSIVE FIXES)
   ========================================== */
@media (min-width: 1400px) {
    .attorney-fullpage-card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 5rem;
        margin-bottom: 6rem;
    }
    
    .attorney-fullpage-name {
        font-size: clamp(2.5rem, 4vw, 3rem);
    }
    
    .attorney-bio-main {
        font-size: clamp(1.1rem, 2vw, 1.2rem);
    }
}

/* ==========================================
   13. CTA SECTION - ENHANCED WITH BLUE THEME (RESPONSIVE FIXES)
   ========================================== */

.cta-enhanced-section {
    position: relative;
    overflow: hidden;
    /* BLUE GRADIENT BACKGROUND */
    background: linear-gradient(135deg, #0a1628 0%, #1a2642 100%);
    border-top: 1px solid rgba(194, 166, 115, 0.3);
    border-bottom: 1px solid rgba(194, 166, 115, 0.3);
    width: 100%;
}

/* Background Pattern */
.cta-background-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.cta-content-wrapper {
    position: relative;
    z-index: 1;
    max-width: min(700px, 95vw);
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 2rem);
    box-sizing: border-box;
    padding: 0 clamp(1rem, 3vw, 0);
}

.cta-icon-badge {
    width: clamp(64px, 12vw, 80px);
    height: clamp(64px, 12vw, 80px);
    background: rgba(212, 175, 55, 0.1);
    border: 2px solid var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    transition: all var(--transition-medium);
}

.cta-content-wrapper:hover .cta-icon-badge {
    background: rgba(212, 175, 55, 0.2);
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 0 30px rgba(194, 166, 115, 0.3);
}

.cta-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    max-width: 100%;
    word-wrap: break-word;
}

.cta-subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--color-light-text-muted);
    margin: 0;
    max-width: min(500px, 90vw);
}

/* Contact Options */
.cta-contact-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
    max-width: min(600px, 100%);
}

@media (min-width: 640px) {
    .cta-contact-options {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cta-contact-method {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: clamp(1rem, 3vw, 1.25rem) clamp(1.25rem, 3vw, 1.5rem);
    /* BLUE CARD BACKGROUND */
    background: rgba(15, 29, 53, 0.6);
    border: 1px solid rgba(194, 166, 115, 0.3);
    border-radius: var(--radius-md);
    transition: all var(--transition-medium);
    cursor: pointer;
    box-sizing: border-box;
    max-width: 100%;
}

.cta-contact-method:hover {
    border-color: var(--color-accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(26, 38, 66, 0.6),
                0 0 20px rgba(194, 166, 115, 0.2);
    background: rgba(15, 29, 53, 0.9);
}

.contact-method-icon {
    width: clamp(40px, 8vw, 48px);
    height: clamp(40px, 8vw, 48px);
    background: rgba(212, 175, 55, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.cta-contact-method:hover .contact-method-icon {
    background: var(--color-accent);
    color: #0a1628; /* Dark blue text */
    transform: scale(1.1);
}

.contact-method-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    flex-grow: 1;
    min-width: 0;
}

.contact-method-label {
    font-size: clamp(0.7rem, 1.2vw, 0.75rem);
    color: var(--color-light-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.contact-method-value {
    font-size: clamp(0.9rem, 1.8vw, 1rem);
    color: var(--color-light-text);
    font-weight: 500;
}

.cta-button-large {
    padding: clamp(0.8rem, 2vw, 1.1rem) clamp(1.5rem, 4vw, 2.5rem);
    font-size: clamp(0.9rem, 1.8vw, 1rem);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 100%;
    box-sizing: border-box;
}

.cta-button-large svg {
    transition: transform var(--transition-fast);
}

.cta-button-large:hover svg {
    transform: translateX(5px);
}

/* ==========================================
   14. FOOTER - MULTI-COLUMN LAYOUT WITH BLUE THEME (RESPONSIVE FIXES)
   ========================================== */

#main-footer {
    /* BLUE GRADIENT BACKGROUND */
    background: linear-gradient(180deg, #0a1628 0%, #0f1d35 100%);
    border-top: 1px solid rgba(194, 166, 115, 0.3);
    overflow-x: hidden;
    width: 100%;
}

.footer-main {
    padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.5rem, 3vw, 2rem);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: 100%;
}

@media (min-width: 640px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
        gap: 4rem;
    }
}

/* Brand Column */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.footer-logo img {
    height: clamp(40px, 6vw, 45px);
    width: auto;
    opacity: 0.9;
    transition: opacity var(--transition-fast);
}

.footer-logo:hover img {
    opacity: 1;
}

.footer-tagline {
    font-size: clamp(0.9rem, 1.5vw, 0.95rem);
    color: var(--color-light-text-muted);
    line-height: 1.6;
    max-width: min(280px, 100%);
    margin: 0;
}

.footer-address {
    font-size: clamp(0.85rem, 1.5vw, 0.9rem);
    color: var(--color-light-text-muted);
    line-height: 1.6;
}

.footer-address p {
    margin: 0.25rem 0;
    max-width: 100%;
}

/* Column Titles */
.footer-column-title {
    font-size: clamp(0.9rem, 1.8vw, 1rem);
    font-weight: 600;
    color: var(--color-light-text);
    margin: 0 0 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Footer Links */
.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-links a {
    color: var(--color-light-text-muted);
    font-size: clamp(0.85rem, 1.5vw, 0.9rem);
    transition: color var(--transition-fast), padding-left var(--transition-fast);
    display: inline-block;
}

.footer-links a:hover {
    color: var(--color-accent);
    padding-left: 8px;
}

/* Footer Contact */
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-contact li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer-contact svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

.footer-contact a {
    color: var(--color-light-text-muted);
    font -size: clamp(0.85rem, 1.5vw, 0.9rem);
    transition: color var(--transition-fast);
}

.footer-contact a:hover {
    color: var(--color-accent);
}

/* Footer Bottom */
.footer-bottom {
    padding: 1.5rem 0;
    border-top: 1px solid rgba(194, 166, 115, 0.2);
}

.footer-bottom-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    text-align: center;
}

@media (min-width: 768px) {
    .footer-bottom-content {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.footer-copyright {
    font-size: clamp(0.8rem, 1.5vw, 0.85rem);
    color: var(--color-light-text-muted);
    margin: 0;
}

.footer-legal-links {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: clamp(0.8rem, 1.5vw, 0.85rem);
}

.footer-legal-links a {
    color: var(--color-light-text-muted);
    transition: color var(--transition-fast);
}

.footer-legal-links a:hover {
    color: var(--color-accent);
}

.footer-divider {
    color: rgba(194, 166, 115, 0.3);
}

.credit-bar {
    background: linear-gradient(90deg, 
        rgba(212, 175, 55, 0.03) 0%, 
        rgba(212, 175, 55, 0.08) 50%, 
        rgba(212, 175, 55, 0.03) 100%);
    border-top: 1px solid rgba(212, 175, 55, 0.15);
    padding: 0.75rem;
    text-align: center;
    font-size: clamp(0.75rem, 1.2vw, 0.8rem);
    color: var(--color-light-text-muted);
    font-family: var(--font-body);
    letter-spacing: 0.3px;
}

.credit-bar a {
    color: var(--color-accent);
    font-weight: 500;
    transition: color var(--transition-fast);
    text-decoration: none;
}

.credit-bar a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

/* ==========================================
   15. CTA & FOOTER MOBILE OPTIMIZATIONS (ENHANCED)
   ========================================== */

@media (max-width: 767px) {
    .cta-content-wrapper {
        gap: 1.5rem;
        padding: 0 0.5rem;
    }
    
    .cta-contact-options {
        grid-template-columns: 1fr;
    }
    
    .cta-button-large {
        padding: 1rem 2rem;
        font-size: 0.95rem;
    }
    
    .footer-grid {
        gap: 2rem;
    }
    
    .footer-tagline {
        max-width: none;
    }
    
    .cta-title {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
    }
    
    .cta-subtitle {
        font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    }
    
    .contact-method-icon {
        width: 40px;
        height: 40px;
    }
}

/* ==========================================
   16. ACCESSIBILITY (ENHANCED)
   ========================================== */
.attorney-fullpage-name:focus-visible,
.contact-overlay-btn:focus-visible {
    outline: 2px solid var(--color-accent-text);
    outline-offset: 4px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .attorney-image-side,
    .attorney-image-side img,
    .contact-overlay-btn,
    .expertise-tag {
        transition: none !important;
        animation: none !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .attorney-fullpage-card {
        border: 2px solid var(--color-accent);
        padding: 2rem;
        border-radius: var(--radius-lg);
    }
    
    .expertise-tag,
    .contact-overlay-btn {
        border-width: 2px;
    }
}

/* ==========================================
   17. PRINT STYLES
   ========================================== */
@media print {
    .attorney-image-side {
        border: 1px solid #000;
    }
    
    .contact-overlay-btn {
        border: 1px solid #000;
        background: white !important;
    }
    
    .expertise-tag {
        border: 1px solid #000;
        background: white !important;
    }
}

/* ==========================================
   18. LANDING PAGE ATTORNEY PREVIEW (matches full attorneys page)
   ========================================== */
.attorneys-preview-section {
    background: linear-gradient(180deg, #0a1628 0%, #0f1d35 50%, #1a2642 100%);
}

.attorneys-preview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
    max-width: min(1180px, 100%);
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .attorneys-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
    }
}

@media (min-width: 1024px) {
    .attorneys-preview-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .attorneys-preview-grid .attorney-preview-card:nth-child(3) {
        grid-column: 1 / -1;
        max-width: min(420px, 100%);
        justify-self: center;
        width: 100%;
    }
}

.attorney-preview-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
    /* Cool 3D card effect (matches working repo tilt cards) */
    transform-style: preserve-3d;
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
    border-radius: var(--radius-lg);
}

.attorney-preview-card:hover {
    transform: translateY(-10px);
}

/* Lift + gold glow lives on the image so the tilt transform on the card isn't overridden */
.attorney-preview-card:hover .attorney-image-side {
    border-color: var(--color-accent);
    box-shadow: 0 18px 40px rgba(7, 18, 28, 0.55),
                0 0 40px rgba(194, 166, 115, 0.28);
}

.attorneys-preview-section .attorney-content-side {
    gap: 1.25rem;
    padding: 0;
}

.attorneys-preview-section .attorney-header {
    padding-bottom: 1rem;
}

.attorneys-preview-section .attorney-fullpage-name {
    font-size: clamp(1.45rem, 2.2vw, 1.85rem);
}

.attorneys-preview-section .attorney-fullpage-title {
    font-size: clamp(0.85rem, 1.5vw, 1rem);
}

.attorneys-preview-section .attorney-bio-section {
    gap: 0;
}

.attorneys-preview-section .attorney-bio-main {
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    line-height: 1.75;
}

.attorneys-preview-section .contact-overlay-btn {
    width: clamp(52px, 8vw, 60px);
    height: clamp(52px, 8vw, 60px);
}

.attorneys-preview-section .contact-overlay-btn svg {
    width: clamp(24px, 4vw, 28px);
    height: clamp(24px, 4vw, 28px);
}

/* GZR watermark on the homepage preview cards: smaller and shifted down
   to shoulder height, clear of the face, with the full "GZR" mark visible
   (same blue monogram, same aspect ratio — just a smaller, lower box) */
.attorneys-preview-section .attorney-image-side::before {
    top: 36%;
    left: 2%;
    width: 28%;
    height: 16%;
}

/* ==========================================
   19. BLUE THEME SUMMARY & CUSTOMIZATION GUIDE
   ========================================== */

/*
BLUE COLOR PALETTE (matching areas-of-practice):
- Primary Blue: #0a1628 (dark navy)
- Secondary Blue: #1a2642 (medium navy)
- Accent Blue: #0f1d35 (deep navy)
- Gold Accent: #c2a673 (warm gold)

KEY CHANGES FROM ORIGINAL:
1. Hero section: Blue gradient background
2. Grid section: Blue gradient background
3. Image cards: Blue-tinted backgrounds with gold borders
4. Expertise tags: Blue backgrounds with gold accents
5. Contact overlay: Blue gradient with enhanced gold glow
6. CTA section: Blue background with gold accents
7. Footer: Blue gradient background
8. All hover states: Blue + gold glow effects

CUSTOMIZATION OPTIONS:

To adjust blue intensity:
- Lighter: Use rgba(26, 38, 66, 0.4) instead of 0.6
- Darker: Use rgba(10, 22, 40, 0.9) instead of 0.8

To adjust gold accent visibility:
- More prominent: Increase rgba(212, 175, 55, X) alpha values
- Subtler: Decrease rgba(212, 175, 55, X) alpha values

BACKGROUND IMAGE:
- The hero section maintains support for custom background images
- The blue overlay provides excellent contrast with images
- Follow the original instructions in lines 24-27 for image paths

RESPONSIVE FIXES APPLIED:
1. Added overflow-x: hidden and width: 100% to all sections
2. Made all containers responsive with min() functions and clamp()
3. Enhanced responsive typography with better clamp() values
4. Fixed button and icon sizing to be fluid and responsive
5. Added box-sizing: border-box to prevent overflow issues
6. Made images and cards responsive with proper max-width constraints
7. Enhanced mobile optimizations with better padding and spacing
8. Fixed CTA section responsiveness with proper container constraints
9. Improved footer responsiveness with fluid typography and spacing
10. Added proper word-wrapping for long text elements
*/