/**
 * Projects / Portfolio Frontend Styles
 * Strict Brand Colors:
 * Primary Gold: #F9AD1B
 * Deep Forest Green: #344C36
 */

:root {
    --tm-brand-gold: #F9AD1B;
    --tm-brand-green: #344C36;
    --tm-brand-green-hover: #263828;
    --tm-brand-green-light: #EAEFEA;
    --tm-text-dark: #18181B;
    --tm-text-muted: #6B7280;
    --tm-card-bg: #FFFFFF;
    --tm-card-border: #E5E7EB;
    --tm-font-primary: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --tm-font-text: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.tm-projects-wrapper {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    font-family: var(--tm-font-text);
}

/* Global Font Assignments for Projects */
.tm-projects-heading,
.tm-projects-page-heading,
.tm-project-card-title,
.tm-projects-subtitle,
.tm-tag-pill,
.tm-view-all-projects-btn,
.tm-sp-title,
.tm-sp-visit-btn,
.tm-sp-nav-heading,
.tm-sp-cta-title,
.tm-sp-cta-btn,
.tm-sp-cta-sub,
.tm-sp-meta-value {
    font-family: var(--tm-font-primary) !important;
}

.tm-projects-page-intro,
.tm-sp-summary,
.tm-sp-breadcrumbs,
.tm-sp-meta-label,
.tm-sp-nav-label,
.tm-sp-nav-meta,
.tm-sp-editor-content p,
.tm-sp-meta-link {
    font-family: var(--tm-font-text) !important;
}

.tm-projects-wrapper * {
    box-sizing: border-box;
}

/* ==========================================================================
   Home Projects Section (Exact Match to User's Uploaded Screenshot)
   ========================================================================== */

.tm-home-projects-section {
    padding: 60px 0;
    width: 100%;
}

.tm-projects-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 45px;
    flex-wrap: wrap;
    gap: 24px;
}

.tm-projects-subtitle {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    color: var(--tm-brand-green);
    margin-bottom: 10px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.tm-dash-accent {
    color: var(--tm-brand-gold);
    font-weight: 900;
    font-size: 18px;
    margin-right: 4px;
}

.tm-projects-main-heading {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 800;
    color: var(--tm-text-dark);
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.tm-color-highlight {
    color: var(--tm-brand-gold);
}

/* Capsule Button on Top Right (Exact Design Match) */
.tm-projects-capsule-btn {
    display: inline-flex;
    align-items: center;
    background-color: var(--tm-brand-green);
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 9999px;
    padding: 6px 6px 6px 26px;
    font-size: 15px;
    font-weight: 700;
    gap: 16px;
    box-shadow: 0 4px 15px rgba(52, 76, 54, 0.2);
    transition: all 0.3s ease;
}

.tm-projects-capsule-btn:hover {
    background-color: var(--tm-brand-green-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(52, 76, 54, 0.3);
}

.tm-capsule-arrow {
    width: 38px;
    height: 38px;
    background-color: var(--tm-brand-gold);
    color: var(--tm-brand-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.tm-projects-capsule-btn:hover .tm-capsule-arrow {
    transform: translateX(4px);
}

/* 3 Columns Projects Grid */
.tm-projects-grid {
    display: grid;
    gap: 30px;
}

.tm-projects-grid.tm-grid-3cols {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
    .tm-projects-grid.tm-grid-3cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {
    .tm-projects-grid.tm-grid-3cols {
        grid-template-columns: 1fr;
    }
}

/* Individual Project Card */
.tm-project-card {
    background: var(--tm-card-bg);
    border: 1px solid var(--tm-card-border);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.tm-project-card:hover {
    border-color: var(--tm-brand-gold);
    transform: translateY(-8px);
    box-shadow: 0 16px 36px rgba(52, 76, 54, 0.08);
}

/* Mockup Media Area */
.tm-project-card-media {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #F3F4F6;
    position: relative;
    text-decoration: none;
}

.tm-project-thumb-img,
.tm-mockup-placeholder-svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.tm-project-card:hover .tm-project-thumb-img,
.tm-project-card:hover .tm-mockup-placeholder-svg {
    transform: scale(1.04);
}

/* Card Body */
.tm-project-card-body {
    padding: 24px 24px 28px 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Yellow Badge Pills (Matches Screenshot) */
.tm-project-tag-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.tm-tag-pill {
    background-color: var(--tm-brand-gold);
    color: #18181B;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 9999px;
    padding: 4px 14px;
    display: inline-block;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

/* Bottom Row (Title + Circular Arrow Button) */
.tm-project-bottom-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
}

.tm-project-card-title {
    font-size: 19px;
    font-weight: 700;
    margin: 0;
    line-height: 1.35;
    flex-grow: 1;
}

.tm-project-card-title a {
    color: var(--tm-text-dark) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.tm-project-card:hover .tm-project-card-title a {
    color: var(--tm-brand-green) !important;
}

/* Circular Arrow Button (Matches Screenshot) */
.tm-project-circle-btn {
    width: 44px;
    height: 44px;
    background-color: var(--tm-brand-green);
    color: #ffffff !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(52, 76, 54, 0.2);
    transition: all 0.3s ease;
}

.tm-circle-arrow-icon {
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    transition: transform 0.3s ease;
}

.tm-project-card:hover .tm-project-circle-btn {
    background-color: var(--tm-brand-gold);
    color: var(--tm-brand-green) !important;
    transform: scale(1.08);
}

.tm-project-card:hover .tm-circle-arrow-icon {
    transform: translateX(3px);
}

/* ==========================================================================
   Full Projects Archive / Page ([all_projects])
   ========================================================================== */

.tm-all-projects-page {
    padding: 60px 0 100px 0;
    width: 100%;
}

.tm-projects-page-hero {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
}

.tm-projects-page-heading {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 800;
    color: var(--tm-text-dark);
    margin: 14px 0 16px 0;
    line-height: 1.15;
}

.tm-projects-page-intro {
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--tm-text-muted);
    margin: 0;
}

/* ==========================================================================
   Redesigned Single Project Page Styles (Matches Screenshot)
   ========================================================================== */

.tm-single-project-main {
    width: 100%;
    padding: clamp(120px, 12vw, 160px) 0 80px 0 !important;
    box-sizing: border-box;
}

/* Fallback if active theme uses its own container */
.single-tm_project .site-main:not(.tm-single-project-main) .tm-sp-container,
.single-tm_project #content:not(.tm-single-project-main) .tm-sp-container,
.single-tm_project article .tm-sp-container {
    padding-top: clamp(120px, 12vw, 160px) !important;
}

.tm-sp-container {
    width: 100%;
    box-sizing: border-box;
}

.tm-sp-wrapper {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    font-family: var(--tm-font-text);
}

/* ==========================================================================
   2-Column Showcase Grid (Mockup Left, Info Right)
   ========================================================================== */
.tm-sp-main-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: start;
    margin-bottom: 50px;
}

/* Left Column: Full-Height Website Mockup */
.tm-sp-mockup-col {
    width: 100%;
}

.tm-sp-mockup-frame {
    width: 100%;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid #E5E7EB;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tm-sp-mockup-frame:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.tm-sp-mockup-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.tm-sp-mockup-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Right Column: Information & Details */
.tm-sp-info-col {
    display: flex;
    flex-direction: column;
    padding-top: 8px;
}

/* Breadcrumbs */
.tm-sp-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    color: #6B7280;
    margin-bottom: 6px;
    line-height: 1.4;
}

.tm-sp-breadcrumbs a {
    color: #6B7280 !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.tm-sp-breadcrumbs a:hover {
    color: var(--tm-brand-green, #344C36) !important;
}

.tm-sp-bc-sep {
    color: #9CA3AF;
    font-size: 15px;
    user-select: none;
}

.tm-sp-bc-current {
    color: var(--tm-brand-green, #344C36) !important;
    font-weight: 700;
}

/* Gold Accent Dash */
.tm-sp-gold-dash {
    width: 38px;
    height: 3.5px;
    background-color: var(--tm-brand-gold, #F9AD1B);
    border-radius: 2px;
    margin: 18px 0 20px 0;
}

/* Project Title (H1) */
.tm-sp-title {
    font-size: clamp(32px, 3.8vw, 44px);
    font-weight: 800;
    color: #111827;
    margin: 0 0 16px 0;
    line-height: 1.18;
    letter-spacing: -0.02em;
}

/* Project Summary */
.tm-sp-summary {
    font-size: 15.5px;
    line-height: 1.7;
    color: #4B5563;
    margin: 0 0 28px 0;
}

/* Meta Card (Soft Gray/Cream Background with Gold Badges) */
.tm-sp-meta-card {
    background-color: #F9FAF9;
    border: 1px solid #ECEEEC;
    border-radius: 16px;
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
}

.tm-sp-meta-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tm-sp-meta-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: #FEF6E7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tm-brand-gold, #F9AD1B);
    flex-shrink: 0;
}

.tm-sp-meta-icon svg {
    display: block;
}

.tm-sp-meta-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tm-sp-meta-label {
    font-size: 13px;
    color: #6B7280;
    font-weight: 500;
    line-height: 1.3;
}

.tm-sp-meta-value {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    line-height: 1.35;
}

.tm-sp-meta-link {
    font-size: 15px;
    font-weight: 700;
    color: var(--tm-brand-green, #344C36) !important;
    text-decoration: underline !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: opacity 0.2s ease;
}

.tm-sp-meta-link:hover {
    opacity: 0.85;
}

.tm-sp-link-arrow {
    font-size: 14px;
    text-decoration: none !important;
}

/* Primary Action Button: "Visit Live Website ↗" */
.tm-sp-visit-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background-color: var(--tm-brand-gold, #F9AD1B) !important;
    color: #18181B !important;
    border: none !important;
    outline: none !important;
    border-radius: 12px !important;
    padding: 16px 24px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    text-align: center !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(249, 173, 27, 0.3) !important;
    transition: all 0.25s ease !important;
    line-height: 1.2 !important;
}

.tm-sp-visit-btn:hover {
    background-color: #E89E10 !important;
    color: #18181B !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(249, 173, 27, 0.42) !important;
}

.tm-sp-visit-arrow {
    font-size: 18px;
    font-weight: 900;
    transition: transform 0.2s ease;
}

.tm-sp-visit-btn:hover .tm-sp-visit-arrow {
    transform: translate(2px, -2px);
}

/* ==========================================================================
   Optional Editor Content Area
   ========================================================================== */
.tm-sp-editor-content {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    padding: 40px 45px;
    margin: 40px 0;
    font-size: 16px;
    line-height: 1.8;
    color: #374151;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.tm-sp-editor-content h2,
.tm-sp-editor-content h3 {
    color: #111827;
    font-weight: 800;
    margin: 28px 0 12px 0;
}

.tm-sp-editor-content h2:first-child,
.tm-sp-editor-content h3:first-child {
    margin-top: 0;
}

.tm-sp-editor-content p {
    margin: 0 0 18px 0;
}

/* ==========================================================================
   Previous / Next Project Navigation Bar
   ========================================================================== */
.tm-sp-nav-row {
    border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
    padding: 24px 0;
    margin-top: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.tm-sp-nav-col {
    flex: 1;
    max-width: 44%;
}

.tm-sp-nav-card {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none !important;
    transition: transform 0.2s ease;
}

.tm-sp-nav-card:hover {
    transform: translateY(-2px);
}

.tm-sp-nav-card-next {
    justify-content: flex-end;
}

.tm-sp-nav-thumb {
    width: 76px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #1F2937;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.tm-sp-nav-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tm-sp-mini-thumb {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tm-thumb-ecommerce {
    background: linear-gradient(135deg, #1E293B, #0F172A);
}

.tm-thumb-agency {
    background: linear-gradient(135deg, #1E1B4B, #312E81);
}

.tm-mini-icon {
    font-size: 20px;
}

.tm-sp-nav-details {
    display: flex;
    flex-direction: column;
}

.tm-text-right {
    text-align: right;
}

.tm-sp-nav-label {
    font-size: 13px;
    font-weight: 600;
    color: #6B7280;
    display: block;
    margin-bottom: 3px;
}

.tm-sp-nav-heading {
    font-size: 15.5px;
    font-weight: 700;
    color: #111827 !important;
    margin: 0 0 2px 0;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.tm-sp-nav-card:hover .tm-sp-nav-heading {
    color: var(--tm-brand-green, #344C36) !important;
}

.tm-sp-nav-meta {
    font-size: 12.5px;
    color: #9CA3AF;
    display: block;
}

/* Center Archive 4-Square Grid Icon */
.tm-sp-nav-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tm-sp-grid-archive-btn {
    width: 44px;
    height: 44px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4B5563 !important;
    background-color: #ffffff;
    text-decoration: none !important;
    transition: all 0.25s ease;
}

.tm-sp-grid-archive-btn:hover {
    background-color: #F9FAF9;
    border-color: var(--tm-brand-green, #344C36);
    color: var(--tm-brand-green, #344C36) !important;
    transform: scale(1.06);
}

/* ==========================================================================
   Bottom Call-To-Action Banner (#344C36 Deep Green + #F9AD1B Gold)
   ========================================================================== */
.tm-sp-cta-banner {
    background-color: var(--tm-brand-green, #344C36) !important;
    border-radius: 20px;
    padding: 56px 40px;
    margin-top: 55px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 45px rgba(52, 76, 54, 0.25);
    background-image: 
        radial-gradient(circle at 10% 15%, rgba(249, 173, 27, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 90% 85%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
}

.tm-sp-cta-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tm-sp-cta-sub {
    color: var(--tm-brand-gold, #F9AD1B);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: block;
}

.tm-sp-cta-title {
    color: #FFFFFF !important;
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 800;
    margin: 0 0 28px 0;
    line-height: 1.25;
}

.tm-sp-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background-color: var(--tm-brand-gold, #F9AD1B) !important;
    color: #18181B !important;
    border: none !important;
    outline: none !important;
    border-radius: 9999px !important;
    padding: 13px 36px !important;
    font-size: 15.5px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 20px rgba(249, 173, 27, 0.35) !important;
    transition: all 0.25s ease !important;
    line-height: 1.2 !important;
}

.tm-sp-cta-btn:hover {
    background-color: #E89E10 !important;
    color: #18181B !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 26px rgba(249, 173, 27, 0.48) !important;
}

.tm-sp-cta-btn-arrow {
    font-size: 17px;
    font-weight: 900;
    transition: transform 0.2s ease;
}

.tm-sp-cta-btn:hover .tm-sp-cta-btn-arrow {
    transform: translate(2px, -2px);
}

/* Watermark Monogram on Bottom Right */
.tm-sp-cta-brand-watermark {
    position: absolute;
    right: 30px;
    bottom: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 1;
    opacity: 0.85;
}

.tm-sp-cta-brand-watermark svg {
    width: 130px;
    height: 75px;
    display: block;
}

.tm-sp-watermark-text {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.14);
    letter-spacing: 0.05em;
    margin-top: -8px;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media (max-width: 992px) {
    .tm-sp-main-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .tm-sp-info-col {
        padding-top: 0;
    }
}

@media (max-width: 768px) {
    .tm-sp-wrapper {
        padding: 0 16px;
    }

    .tm-sp-meta-card {
        padding: 20px 18px;
    }

    .tm-sp-nav-row {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .tm-sp-nav-col {
        max-width: 100%;
    }

    .tm-sp-nav-center {
        order: 2;
        align-self: center;
    }

    .tm-sp-nav-next {
        order: 3;
    }

    .tm-sp-nav-card-next {
        flex-direction: row-reverse;
        justify-content: flex-end;
    }

    .tm-text-right {
        text-align: left;
    }

    .tm-sp-cta-banner {
        padding: 40px 20px;
    }

    .tm-sp-cta-brand-watermark {
        display: none;
    }
}