/* ==========================================================================
   Shared Links / Files / Documentation
   One visual component for every CMS-loaded link and file.
   ========================================================================== */

.inner-resources-grid{
    align-items:start;
}

.resource-group{
    min-width:0;
}

.resource-group-title{
    margin:0 0 12px;
    color:var(--blue);
    font-size:14px;
    font-weight:500;
    letter-spacing:.02em;
}

.resource-list{
    display:grid;
    gap:10px;
    margin:0;
    border:0;
}

.resource-card{
    position:relative;
    display:grid;
    grid-template-columns:48px minmax(0,1fr) 38px;
    min-width:0;
    min-height:74px;
    align-items:center;
    gap:14px;
    padding:11px 13px;
    overflow:hidden;
    border:1px solid #e1e8ee;
    border-radius:10px;
    background:rgba(255,255,255,.92);
    color:#1d2c38;
    box-shadow:0 7px 22px rgba(35,65,85,.045);
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease,
        color .25s ease;
}

.resource-card::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:3px;
    background:linear-gradient(180deg,var(--cyan),var(--blue));
    opacity:0;
    transform:scaleY(.3);
    transition:opacity .25s ease,transform .25s ease;
}

.resource-card:hover,
.resource-card:focus-visible{
    border-color:rgba(3,186,240,.42);
    background:#fff;
    color:var(--blue);
    box-shadow:0 13px 30px rgba(35,65,85,.09);
    transform:translateY(-2px);
}

.resource-card:hover::before,
.resource-card:focus-visible::before{
    opacity:1;
    transform:scaleY(1);
}

.resource-leading-icon{
    display:grid;
    width:46px;
    height:46px;
    place-items:center;
    border:1px solid #d8e5ee;
    border-radius:50%;
    background:#fbfdff;
    color:var(--blue);
}

.resource-link-icon .resource-leading-svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.45;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.resource-file-icon{
    border-color:transparent;
    border-radius:8px;
    background:transparent;
}

.resource-file-icon .file-format-icon,
.resource-file-icon .product-file-format-icon{
    display:block;
    width:50px;
    height:60px;
    object-fit:contain;
}

.resource-copy{
    display:grid;
    min-width:0;
    gap:4px;
}

.resource-title{
    display:block;
    min-width:0;
    overflow:hidden;
    color:inherit;
    font-size:16px;
    font-weight:500;
    line-height:1.25;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.resource-meta{
    display:block;
    overflow:hidden;
    color:#7c7f85;
    font-size:13px;
    line-height:1.3;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.resource-action{
    display:grid;
    width:34px;
    height:34px;
    place-items:center;
    justify-self:end;
    border:1px solid #d8e5ee;
    border-radius:50%;
    color:var(--blue);
    background:#fff;
    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .3s cubic-bezier(.2,.7,.2,1);
}

.resource-action .ui-target-icon{
    width:17px;
    height:17px;
}

.resource-action-svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.55;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.resource-card:hover .resource-action,
.resource-card:focus-visible .resource-action{
    border-color:var(--cyan);
    background:var(--cyan);
    color:#fff;
    transform:scale(1.06);
}

.resource-link-card:hover .resource-action .ui-target-icon,
.resource-link-card:focus-visible .resource-action .ui-target-icon{
    transform:rotate(90deg) scale(1.08);
}

.resource-file-card:hover .resource-action-svg,
.resource-file-card:focus-visible .resource-action-svg{
    animation:resource-download-pulse .5s ease;
}

@keyframes resource-download-pulse{
    0%,100%{transform:translateY(0)}
    45%{transform:translateY(2px)}
}

/* Product Documentation keeps its sticky shell, but cards are shared. */
.product-documentation{
    padding:18px;
    border:0;
    border-radius:12px;
    background:#f1f4f8;
    box-shadow:0 8px 28px rgba(36,64,84,.04);
}

.product-documentation h2{
    margin:0 0 14px;
}

.product-documentation-list{
    display:grid;
    gap:10px;
}

.product-document-row{
    grid-template-columns:48px minmax(0,1fr) 38px;
    min-height:72px;
    padding:10px 12px;
}

.product-document-icon{
    width:46px;
    height:46px;
    border:0;
}

.product-document-copy strong{
    font-size:15px;
}

.product-document-copy small{
    margin:0;
    font-size:12px;
}

.product-document-download{
    font-size:inherit;
}

/* Existing contexts should never stretch one resource into a fake button. */
.item-links,
.download-list{
    width:100%;
}

.product-item-copy .item-links{
    margin-top:28px;
}

@media(max-width:980px){
    .inner-resources-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:620px){
    .resource-card{
        grid-template-columns:42px minmax(0,1fr) 34px;
        min-height:66px;
        gap:10px;
        padding:9px 10px;
        border-radius:8px;
    }

    .resource-leading-icon{
        width:40px;
        height:40px;
    }

    .resource-file-icon .file-format-icon,
    .resource-file-icon .product-file-format-icon{
        width:42px;
        height:50px;
    }

    .resource-title{
        font-size:15px;
    }

    .resource-meta{
        font-size:12px;
    }

    .resource-action{
        width:31px;
        height:31px;
    }
}