/*
=============================================================================
    FILE: landing.css
    APP:  tango_auth
-----------------------------------------------------------------------------
    AUTHOR: Peter Daish
    TEAM:   UoS
    DATE:   July 2026
-----------------------------------------------------------------------------
    PURPOSE:
        Defines the layout and styling for the TANGO authentication landing 
        page. It works in tandem with the core 'dashboard.css' to provide 
        page-specific structural rules for the login cards.
-----------------------------------------------------------------------------
    METHOD:
        - Utilizes CSS Grid for the card container to guarantee both cards 
          share the exact same width (1fr 1fr) and height (stretch) regardless 
          of content length.
        - Defines custom list styles for the capability breakdowns, visually 
          differentiating enabled and disabled permissions using color and 
          text-decoration.
=============================================================================
*/

/* Custom layout just for the landing page */
.landing-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 140px); /* Offset for navbar/footer */
    padding: 40px 20px;
}

.landing-header {
    text-align: center;
    margin-bottom: 48px;
}

.landing-cards {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Forces both columns to be exactly equal width */
    align-items: stretch; /* Forces both cards to stretch to the exact same height */
    gap: 48px;
    width: 100%;
    max-width: 1100px;
}

/* Responsive: stack vertically on smaller screens */
@media (max-width: 860px) {
    .landing-cards {
        grid-template-columns: 1fr;
    }
}

/* Reusing .card-tango but enforcing layout for the landing page */
.landing-card {
    display: flex;
    flex-direction: column;
    padding: 32px;
    height: 100%; /* Ensures the card fills the grid cell height */
}

.landing-card .icon-box {
    margin-bottom: 24px;
}

.landing-card .btn-tango, 
.landing-card .btn-tango-coral {
    width: 100%;
    padding: 12px 20px;
    font-size: 14px;
}

/* Capability list styling */
.card-capabilities {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
}

.card-capabilities li {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-capabilities li i {
    font-size: 14px;
}

.card-capabilities li.enabled i {
    color: var(--tango-cyan);
}

.card-capabilities li.disabled {
    opacity: 0.5;
    text-decoration: line-through;
}

.card-capabilities li.disabled i {
    color: var(--text-tertiary);
}