/* ============================================
   About page — licence credentials panel
   Used by: resources/views/frontend/pages/about_us.blade.php
   Data:    config/licences.php
   ============================================ */

.licence-panel {
    --licence-accent: #ff7029;
    --licence-navy: #054886;
}

/* ---- Group (individual / corporation / …) ----
   Groups stack full width and are separated by a rule, so adding a group
   or growing one never fights the others for horizontal space. */
.licence-group + .licence-group {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(5, 72, 134, .12);
}

.licence-group-title {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: .875rem;
    font-size: .932rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--licence-accent);
}

.licence-group-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    margin-right: .5rem;
    border-radius: 50%;
    background: #fff;
    color: var(--licence-accent);
    font-size: .875rem;
    box-shadow: 0 .125rem .375rem rgba(5, 72, 134, .12);
}

/* ---- Licence list ----
   auto-fit tracks share the row evenly whatever the licence count, and each
   card is centred in its own track and capped at a card-sized width. So a
   lone licence sits centred rather than stretched, three sit side by side,
   and anything more wraps — nothing to update when a group changes. */
.licence-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    justify-items: center;
    gap: .75rem;
}

.licence-card {
    width: 100%;
    max-width: 12rem;
    padding: .875rem .75rem;
    text-align: center;
    background: #fff;
    border-top: 3px solid var(--licence-accent);
    border-radius: .5rem;
    box-shadow: 0 .125rem .5rem rgba(5, 72, 134, .08);
    transition: transform .25s ease, box-shadow .25s ease;
}

.licence-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1.25rem rgba(5, 72, 134, .16);
}

.licence-card-state {
    display: block;
    margin-bottom: .25rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6c757d;
}

.licence-card-no {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--licence-accent);
    word-break: break-word;
}

/* ---- Variants: accent colour per group ---- */
.licence-group-corporation {
    --licence-accent: var(--licence-navy);
}