/* ============================================================
   Mediaportal Frontend Styles
   Täcker: resursbank_media, resursbank_sprakval,
           mediaportal_category_files, mediaportal_resource_link
   ============================================================ */

/* ---- Reset / scope ---- */
.resursbank-media *,
.resursbank-media *::before,
.resursbank-media *::after,
.mediaportal-category-files *,
.mediaportal-category-files *::before,
.mediaportal-category-files *::after {
    box-sizing: border-box;
}

/* ============================================================
   CSS-variabler (delad palett)
   ============================================================ */
:root {
    --mp-primary:     #16697a;
    --mp-primary-dk:  #125562;
    --mp-blue:        #2271b1;
    --mp-blue-dk:     #135e96;
    --mp-border:      #ddd;
    --mp-bg:          #f9f9f9;
    --mp-text:        #1d2327;
    --mp-muted:       #666;
    --mp-radius:      4px;
    --mp-transition:  .2s ease;
}

/* ============================================================
   Resursbank Media – Filvisning & Bildgalleri
   ============================================================ */

.resursbank-media { margin: 20px 0; }

.rbm-section { margin-bottom: 40px; }

.rbm-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
}

.rbm-filters {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    padding: 20px;
    background: #f5f5f5;
    border-radius: var(--mp-radius);
}

.rbm-filter { flex: 1; }

.rbm-filter-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    color: #333;
}

.rbm-filter-select {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    font-size: 16px;
    background: #fff;
    cursor: pointer;
    transition: border-color var(--mp-transition);
}

.rbm-filter-select:focus {
    outline: none;
    border-color: var(--mp-primary);
    box-shadow: 0 0 0 3px rgba(22,105,122,.1);
}

/* Format badges */
.rbm-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.rbm-badge-pdf                        { background: #f5c6cb; color: #721c24; }
.rbm-badge-powerpoint,
.rbm-badge-ppt, .rbm-badge-pptx       { background: #ffd7a8; color: #856404; }
.rbm-badge-word,
.rbm-badge-doc, .rbm-badge-docx       { background: #b3d9f2; color: #004085; }
.rbm-badge-excel,
.rbm-badge-xls, .rbm-badge-xlsx       { background: #c3e6cb; color: #155724; }
.rbm-badge-zip, .rbm-badge-rar        { background: #d6d8db; color: #383d41; }
.rbm-badge-jpg, .rbm-badge-jpeg,
.rbm-badge-png, .rbm-badge-svg        { background: #e2d5f0; color: #4a1a6b; }
.rbm-badge-video,
.rbm-badge-mp4, .rbm-badge-mov        { background: #fef9c3; color: #854d0e; }

/* rbm-table är en div-container, inte en HTML-tabell */
.rbm-table {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.rbm-row {
    display: grid;
    grid-template-columns: 80px 110px 1fr auto;
    gap: .75rem 1rem;
    align-items: center;
    padding: .75rem 1rem;
    background: #fff;
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    transition: border-color var(--mp-transition), box-shadow var(--mp-transition);
}

.rbm-row:hover {
    border-color: var(--mp-primary);
    box-shadow: 0 2px 10px rgba(22,105,122,.1);
}

.rbm-row[hidden],
.rbm-doctype[hidden] { display: none !important; }

.rbm-lang {
    color: var(--mp-muted);
    font-size: .85rem;
    white-space: nowrap;
}

/* Filnamn – tillåt radbrytning, kapa aldrig */
.rbm-name {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0; /* Kritiskt: låter grid-cellen krympa */
}

.rbm-size {
    color: #999;
    font-size: .75rem;
    text-align: right;
    white-space: nowrap;
}

.rbm-filelink {
    font-weight: 500;
    color: var(--mp-text);
    text-decoration: none;
    /* Inget white-space: nowrap – låt namnet brytas */
    word-break: break-word;
    transition: color var(--mp-transition);
}
.rbm-filelink:hover { color: var(--mp-primary); text-decoration: underline; }

.rbm-desc { font-size: .75rem; color: var(--mp-muted); }

/* Ladda ner-länk i galleriet (textlänk, ingen bakgrundsfärg) */
.rbm-figure .rbm-download {
    font-size: .8rem;
    color: var(--mp-primary);
    text-decoration: none;
    font-weight: 500;
    background: none;
    padding: 0;
    border-radius: 0;
}
.rbm-figure .rbm-download:hover {
    color: var(--mp-primary-dk);
    text-decoration: underline;
    background: none;
}

/* Bildgalleri */
.rbm-grid { display: grid; gap: 20px; margin-top: 30px; }

.rbm-cols-2 { grid-template-columns: repeat(2,1fr); }
.rbm-cols-3 { grid-template-columns: repeat(3,1fr); }
.rbm-cols-4 { grid-template-columns: repeat(4,1fr); }
.rbm-cols-5 { grid-template-columns: repeat(5,1fr); }
.rbm-cols-6 { grid-template-columns: repeat(6,1fr); }

.rbm-figure {
    margin: 0;
    border-radius: var(--mp-radius);
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
}

/* Länken wrapprar bilden */
.rbm-fulllink {
    display: block;
    overflow: hidden;
}

.rbm-fulllink img,
.rbm-figure img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .3s ease;
}

.rbm-figure:hover .rbm-fulllink img { transform: scale(1.04); }

/* Nedladdnings-rad under bilden */
.rbm-figure figcaption {
    display: flex;
    justify-content: center;
    padding: .45rem;
    background: var(--mp-bg);
    border-top: 1px solid var(--mp-border);
}

.rbm-empty {
    text-align: center;
    padding: 40px;
    color: #999;
    font-size: 16px;
}

/* ============================================================
   Språkväljare – [resursbank_sprakval]
   ============================================================ */

.rb-sprakval { margin: 20px 0; }

.rb-sprakval-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
}

.rb-sprakval-select {
    width: 100%;
    max-width: 300px;
    padding: 10px 15px;
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    font-size: 16px;
    background: #fff;
    cursor: pointer;
}

.rb-sprakval-select:focus {
    outline: none;
    border-color: var(--mp-primary);
    box-shadow: 0 0 0 3px rgba(22,105,122,.1);
}

/* ============================================================
   Category Files Grid – [mediaportal_category_files]
   ============================================================ */

/* Elementor-override */
.elementor-widget-shortcode .mediaportal-category-files,
.elementor-shortcode .mediaportal-category-files {
    width: 100% !important;
    max-width: none !important;
}

.mediaportal-category-files {
    margin: 30px 0;
    border: 1px solid var(--mp-border);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    width: 100%;
}

/* Ta bort alla tabell-borders */
.mcf-table,
.mcf-table table,
.mcf-table tbody,
.mcf-table tr,
.mcf-table thead { border: none !important; }

.mcf-filters {
    padding: 20px;
    background: var(--mp-bg);
    border-bottom: 1px solid var(--mp-border);
}

.mcf-filter-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--mp-muted);
    letter-spacing: .5px;
}

.mcf-filter-select {
    width: 100% !important;
    min-width: 200px;
    padding: 5px 40px 5px 15px;
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    font-size: 16px;
    background: #fff;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color var(--mp-transition);
}

.mcf-filter-select:focus {
    outline: none;
    border-color: var(--mp-primary);
    box-shadow: 0 0 0 3px rgba(22,105,122,.1);
}

.mcf-no-selection {
    text-align: center;
    padding: 60px 20px;
    color: var(--mp-muted);
    font-size: 16px;
    line-height: 1.6;
}

.mcf-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    table-layout: fixed;
}

.mcf-table td:nth-child(1) { width: 200px; white-space: nowrap; }
.mcf-filename-col { width: 100%; }
.mcf-table td:nth-child(3) { width: 80px; text-align: right; white-space: nowrap; }
.mcf-table td:nth-child(4) { width: 140px; text-align: right; white-space: nowrap; padding-right: 20px; }

.mcf-row {
    position: relative;
    transition: background var(--mp-transition);
}

.mcf-row:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: #eee;
}

.mcf-row[hidden] { display: none !important; }
.mcf-row:hover { background: var(--mp-bg); }

.mcf-row td {
    padding: 20px;
    vertical-align: middle;
    border: none;
}

.mcf-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin-right: 12px;
    min-width: 40px;
    text-align: center;
    vertical-align: middle;
}

.mcf-badge-pdf { background: #f5c6cb; color: #721c24; }
.mcf-badge-powerpoint { background: #ffd7a8; color: #856404; }
.mcf-badge-word { background: #b3d9f2; color: #004085; }
.mcf-badge-excel { background: #c3e6cb; color: #155724; }
.mcf-badge-zip { background: #d6d8db; color: #383d41; }
.mcf-badge-jpg,
.mcf-badge-png,
.mcf-badge-svg { background: #e2d5f0; color: #4a1a6b; }

.mcf-lang {
    color: var(--mp-muted);
    font-size: 14px;
    margin-right: 15px;
    display: inline-block;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.mcf-type {
    color: #333;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.mcf-name {
    font-size: 14px;
    color: #999;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcf-size { color: #999; font-size: 13px; white-space: nowrap; }

.mcf-download {
    display: inline-block;
    padding: 10px 20px;
    background: var(--mp-primary);
    color: #fff !important;
    text-decoration: none;
    border-radius: var(--mp-radius);
    font-size: 14px;
    font-weight: 500;
    transition: all var(--mp-transition);
    white-space: nowrap;
}

.mcf-download:hover {
    background: var(--mp-primary-dk);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(22,105,122,.3);
}

/* ============================================================
   Shortcodes-Links – Resurs/Produkt-knappar
   ============================================================ */

/* Kategoriknappar */
.mediaportal-category-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--mp-primary);
    color: #ffffff !important;
    text-decoration: none;
    border-radius: var(--mp-radius);
    font-weight: 400;
    font-size: 16px;
    transition: all .3s ease;
    cursor: pointer;
    border: none;
    line-height: 1.5;
}

.mediaportal-category-btn:hover {
    background: var(--mp-primary-dk);
    color: #ffffff !important;
    text-decoration: none;
}

.mediaportal-btn-icon,
.mediaportal-btn-text {
    line-height: 1;
    color: #ffffff !important;
}

.mediaportal-btn-icon { font-size: 1.2em; }

.mediaportal-btn-disabled {
    background: #ccc;
    color: #666;
    cursor: not-allowed;
}

.mediaportal-btn-disabled:hover { background: #ccc; }

/* Resurs/Produkt-länk */
.mediaportal-resource-link,
.mediaportal-product-link {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    text-decoration: none;
    color: inherit;
    transition: opacity var(--mp-transition);
}

.mediaportal-resource-link:hover,
.mediaportal-product-link:hover { opacity: .8; }

.mediaportal-link-icon {
    font-size: 1.2em;
    line-height: 1;
}

/* Knapp-stil */
.mediaportal-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75em 1.5em;
    border-radius: var(--mp-radius);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--mp-transition);
}

.mediaportal-button-primary {
    background: var(--mp-blue);
    color: #ffffff;
    border: 2px solid var(--mp-blue);
}

.mediaportal-button-primary:hover {
    background: var(--mp-blue-dk);
    border-color: var(--mp-blue-dk);
    color: #ffffff;
    opacity: 1;
}

.mediaportal-button-secondary {
    background: #ffffff;
    color: var(--mp-blue);
    border: 2px solid var(--mp-blue);
}

.mediaportal-button-secondary:hover {
    background: var(--mp-blue);
    color: #ffffff;
    opacity: 1;
}

/* Produktlista */
.mediaportal-product-links { margin: 1em 0; }

.mediaportal-links-title {
    display: block;
    font-weight: 600;
    margin-bottom: .5em;
}

.mediaportal-products-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mediaportal-products-list li { margin: .5em 0; }

.mediaportal-no-resource,
.mediaportal-no-product {
    color: var(--mp-muted);
    font-style: italic;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
    .rbm-filters { flex-direction: column; }

    /* Filrader – stapla kolumnerna på mobil */
    .rbm-row {
        grid-template-columns: auto auto;
        grid-template-rows: auto auto auto;
    }
    .rbm-row > .rbm-badge  { grid-column: 1; }
    .rbm-row > .rbm-lang   { grid-column: 2; text-align: right; }
    .rbm-row > .rbm-name   { grid-column: 1 / -1; }
    .rbm-row > .rbm-size   { grid-column: 1 / -1; }

    .rbm-cols-2,
    .rbm-cols-3,
    .rbm-cols-4 { grid-template-columns: repeat(2, 1fr); }

    .mcf-table { table-layout: auto; }
    .mcf-table td:nth-child(1) { width: auto; white-space: normal; }
    .mcf-filename-col { width: auto; }
    .mcf-table td:nth-child(3) { width: 70px; }
    .mcf-table td:nth-child(4) { width: 100px; }
    .mcf-row td { padding: 15px 10px; }
    .mcf-badge { font-size: 10px; padding: 3px 8px; }
    .mcf-type { font-size: 14px; }
    .mcf-name { font-size: 12px; }
    .mcf-download { padding: 8px 16px; font-size: 13px; }
}