section.projects {
    margin-top: 20px;
    margin-bottom: 16px;

    .card {
        flex: 0 0 85px; /* Fixed width for the square look */
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;

        .thumb {
            width: 70px;
            height: 70px;
            background-color: #fff;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background-size: cover;
            background-position: center;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);

            img, svg {
                width: 32px;
                height: 32px;
                color: var(--brand-charcoal);
                opacity: 0.7;
            }
        }
        .name {
            font-size: 0.65rem;
            font-weight: 600;
            color: var(--brand-charcoal);
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
        }
    }

  .container {
    background-color: #b2dfdb; /* Light teal background from image */
    border-radius: 20px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;

    nav.breadcrumbs {
        flex: 1;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 15px;
        color: var(--text-slate);

        a {
            color: var(--brand-charcoal); transition: color 0.2s;
            &:hover { color: var(--primary-teal); }
        }
        .separator { margin: 0 8px; color: var(--border-light); font-weight: 400; }
        .current { color: var(--primary-teal) }
    }


    .rail {
      display: flex;
      justify-content: space-evenly;
      gap: 2px;
      overflow-x: auto;
      padding-bottom: 5px;
      flex: 1;
      scrollbar-width: none; /* Hide scrollbar Firefox */
      &::-webkit-scrollbar { display: none; } /* Hide scrollbar Chrome/Safari */
    }

    /* More Button Styles */
    details {
        position: relative;
        summary {
          list-style: none;
          cursor: pointer;
          &::-webkit-details-marker { display: none; }
        }

        /* Dropdown Positioning */
        .dropdown {
            position: absolute;
            right: 0;
            top: calc(100% + 10px);   /* open downward */
            margin-bottom: 0;         /* remove */
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            padding: 8px;
            min-width: 140px;
            z-index: 10;
            max-width: min(240px, 70vw);
            a {
              display: block;
              padding: 10px;
              text-decoration: none;
              color: var(--brand-charcoal);
              font-size: 0.85rem;
              font-weight: 500;
            }   
        }  
    }
  }
}

section.projects.active {
    .container {
        justify-content: flex-end;
        padding: 0;
        background: transparent;

        .cluster {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px;
            border-radius: 16px;
            background: rgba(255,255,255,0.70);
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.10);

            margin-right: -20px;
            /* position: relative; right: 0;
            top: 0px;
            z-index: 30; */

            .card {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 10px;
                padding: 8px 10px;
                border-radius: 12px;
                color: inherit;
                flex: 0 0 auto;

                &:hover { background: rgba(0,0,0,0.04) }
                .thumb {
                    width: 44px;
                    height: 44px;
                    border-radius: 12px;
                    flex: 0 0 auto;
                    background-size: cover;
                    background-position: center;
                }
                .name {
                    font-size: 0.85rem;
                    font-weight: 600;
                    white-space: nowrap;
                    max-width: 220px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
        details {
            position: relative;
            flex: 0 0 auto;
            summary {
                list-style: none;
                cursor: pointer;
                border-radius: 12px;
                padding: 10px;
                user-select: none;
                &::-webkit-details-marker{ display: none }

                svg {
                    width: 18px;
                    height: 18px;
                    display: block;

                    .h-line {
                        fill: none;
                        stroke: currentColor;
                        stroke-width: 2;
                        stroke-linecap: round;
                        transform-origin: 12px 12px; /* center of viewBox */
                        transition: transform 180ms ease, opacity 160ms ease;
                    }
                }
            }
            &[open] {
                /* Animate to X when open */
                .h-top { transform: translateY(5px) rotate(45deg) }
                .h-mid{ opacity: 0 }
                .h-bot{ transform: translateY(-5px) rotate(-45deg) }
            }

            .dropdown {
                position: absolute;
                right: 0;
                top: calc(100% + 8px);
                min-width: 220px;
                padding: 10px;
                border-radius: 14px;
                background: rgba(255,255,255,0.92);
                backdrop-filter: blur(10px);
                box-shadow: 0 16px 40px rgba(0,0,0,0.14);
                z-index: 50;

                a {
                    display: block;
                    padding: 10px;
                    border-radius: 10px;
                    text-decoration: none;
                    color: inherit;
                    font-size: 0.9rem;
                    &:hover { background: rgba(0,0,0,0.05) }
                }
            }
        }
    }
}

/* Small screens */
@media (max-width: 520px){
  section.projects.active .name{ max-width: 140px }
}