/* File: assets/css/ti-ent-styles.css */

/* Wrapper grid: 3 columns for regular items */
.ti-ent-tjenester-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 3rem;
    row-gap: 3rem; /* mer kompakt enn 10rem */
    margin: 24px 0;
}

/* Card layout: standard (blå profil) og featured (hvit profil) */
.ti-ent-tjenester-card {
    background-color: #053f8c; /* blå bakgrunn for standard */
    color: rgba(255,255,255,0.92); /* “mindre hvit” tekst */
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 2px dashed #053f8c;
}

.ti-ent-tjenester-card--featured {
    background-color: #ffffff;  /* hvit bakgrunn for featured */
    grid-column: 1 / -1;
}

/* Featured: 2-kolonne layout */
.ti-ent-tjenester-card--featured .ti-ent-tjenester-card-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2rem;
    row-gap: 1.5rem;
}

/* Standard: fleksibel kolonne-layout */
.ti-ent-tjenester-card-wrapper {
    display: flex;
    flex-direction: column;
    column-gap: 2rem;
    row-gap: 1.5rem;
    height: 100%;
}

/* Bilde i venstre kolonne (featured) fyller og sentreres */
.ti-ent-tjenester-card-left {
    position: relative;
    width: 100%;
    min-height: 360px;
    overflow: hidden;
}
.ti-ent-tjenester-card-left img {
    position: absolute;
    inset: 0;           /* top:0; right:0; bottom:0; left:0 */
    width: 100%;
    height: 100%;
    object-fit: cover;  /* fyll hele flaten */
    object-position: center; /* sentrer motivet */
    display: block;
}

.ti-ent-tjenester-card-right {
    /* featured-tekst mørk */
    color: #111827;
}

/* Header / titler */
.ti-ent-tjenester-card__header {
    margin: 0;
}

/* Standard-kort tittel (hvit) */
.ti-ent-tjenester-card__header h3 {
    margin: 1rem 1rem 0;
    font-size: 2rem;
    line-height: 1.2;
}
.ti-ent-tjenester-card__header h3 a {
    color: white;
    text-decoration: none;
}
.ti-ent-tjenester-card__header h3 a:hover {
    text-decoration: underline;
}

/* Featured tittel (blå) og litt mindre enn 6rem for bedre layout */
.ti-ent-tjenester-card--featured .ti-ent-tjenester-card__header h3 {
    margin: 0;
    font-size: 4rem;
    line-height: 1.2;
}
.ti-ent-tjenester-card--featured .ti-ent-tjenester-card__header h3 a {
    color: #053f8c;
}

/* Content-området skal ta ledig plass i standard-kort */
.ti-ent-tjenester-card__content {
    padding: 0 2rem;
    flex: 1 1 0;
    min-width: 0;
}

/* Typography (generelt) */
.ti-ent-tjenester-title {
    margin: 0 0 4px 0;
    font-size: 1.125rem;
    line-height: 1.3;
}

/* Bildekomponent for standard-kort */
.ti-ent-tjenester-card__image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.ti-ent-tjenester-card__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;        /* fyll containeren */
    object-position: center;  /* sentrer vertikalt og horisontalt */
    display: block;
}

/* Tagline og tekstfarger for profiler */
.ti-ent-tjenester-tagline {
    color: #6b7280;
    font-style: italic;
    font-size: .95rem;
}
.ti-ent-tjenester-short {
    margin: 8px 0;
    color: #374151; /* brukt i featured – overskrives i standard */
}

/* Standard-kort (blå) – tekst litt dempet hvit */
.ti-ent-tjenester-card .ti-ent-tjenester-card__short,
.ti-ent-tjenester-card .ti-ent-tjenester-card__tagline,
.ti-ent-tjenester-card .ti-ent-tjenester-card__bullets li {
    color: rgba(255,255,255,0.9);
}

/* Featured-kort (hvit) – mørk tekst */
.ti-ent-tjenester-card--featured .ti-ent-tjenester-short { color: #374151; }
.ti-ent-tjenester-card--featured .ti-ent-tjenester-tagline { color: #6b7280; }

/* Rich content */
.ti-ent-tjenester-rich {
    margin: 8px 0;
}

/* Bullets: blå kvadrater for begge */
.ti-ent-tjenester-bullets,
.ti-ent-tjenester-card__bullets {
    list-style: none;
    margin: 12px 0;
    padding-left: 0;
}
.ti-ent-tjenester-bullets li,
.ti-ent-tjenester-card__bullets li {
    position: relative;
    padding-left: 28px;      /* plass til firkanten */
    margin: 10px 0;
}
.ti-ent-tjenester-bullets li::before,
.ti-ent-tjenester-card__bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;             /* juster vertikal plassering */
    width: 14px;             /* størrelse på firkanten */
    height: 14px;
    background: #053f8c;     /* blåfarge */
}

/* Buttons / links */
/* Standard-kort: hvit bakgrunn / blå tekst */
.ti-ent-tjenester-actions {
    margin-top: 12px;
}
.ti-ent-tjenester-card .ti-ent-tjenester-read-more {
    display: inline-block;
    padding: 8px 12px;
    background: #ffffff;
    color: #053f8c;
    border: 1px solid #053f8c;
    text-decoration: none;
    font-size: .95rem;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}
.ti-ent-tjenester-card .ti-ent-tjenester-read-more:hover,
.ti-ent-tjenester-card .ti-ent-tjenester-read-more:focus {
    background: #f0f4ff;
}

/* Featured-kort: blå bakgrunn / hvit tekst */
.ti-ent-tjenester-card--featured .ti-ent-tjenester-read-more {
    display: inline-block;
    padding: 8px 12px;
    background: #053f8c;
    color: #fff;
    border: 1px solid #053f8c;
    text-decoration: none;
    font-size: .95rem;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}
.ti-ent-tjenester-card--featured .ti-ent-tjenester-read-more:hover,
.ti-ent-tjenester-card--featured .ti-ent-tjenester-read-more:focus {
    background: #042d63;
}

/* Images (generell komponent) */
.ti-ent-tjenester-image {
    width: 100%;
    overflow: hidden;
    object-fit: cover;
    object-position: center;
}
.ti-ent-tjenester-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Related projects: seksjonstitler for profiler */
.ti-ent-tjenester-card--featured .ti-ent-tjenester-related-projects-title {
    grid-column: 1 / -1;
    margin: 2rem 2rem 0;
}
.ti-ent-tjenester-related-projects-title {
    grid-column: 1 / -1;
    margin: 2rem 2rem 0;
}
.ti-ent-tjenester-related-projects-title h3 {
    color: white;
    font-size: 2rem;
    margin: 0;
}
.ti-ent-tjenester-card--featured .ti-ent-tjenester-related-projects-title h3 {
    color: #053f8c;
    font-size: 2.7rem;
}

/* “Se flere prosjekter”-knapper: standard vs featured */
.ti-ent-tjenester-more-projects {
    margin: 0 2rem 2rem;
}
.fl-page .fl-builder-content .ti-ent-tjenester-more-projects button {
    background-color: #ffffff;
    color: #053f8c;
    border: 1px solid #053f8c;
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.fl-page .fl-builder-content .ti-ent-tjenester-more-projects button:hover {
    background-color: #f0f4ff;
    color: #053f8c !important;
}
.fl-page .fl-builder-content .ti-ent-tjenester-more-projects a {
    color: #053f8c;
}
.fl-page .fl-builder-content .ti-ent-tjenester-more-projects a:hover {
    color: #053f8c;
}
.ti-ent-tjenester-card--featured.ti-ent-tjenester-more-projects a {
    color: white;
}
.fl-page .fl-builder-content .ti-ent-tjenester-card--featured .ti-ent-tjenester-more-projects button {
    background-color: #053f8c;
    color: white;
    border: 1px solid #053f8c;
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.fl-page .fl-builder-content .ti-ent-tjenester-card--featured .ti-ent-tjenester-more-projects button:hover {
    background-color: #042d63;
    color: white;
}

/* Related projects grid: 1 kolonne standard, 3 kolonner featured */
.ti-ent-tjenester-related-projects-wrapper {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    row-gap: 1.5rem;
    column-gap: 1.5rem;
    padding: 2rem;
}
.ti-ent-tjenester-card--featured .ti-ent-tjenester-related-projects-wrapper {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 0 2rem;
}

/* Project item with 3 layers: image, title (top), corner (bottom-right) */
.ti-ent-related-project {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #e5e7eb;
    box-shadow: 0 4px 6px rgba(0,0,0,.5);
}
.ti-ent-related-project img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Title layer at top */
.ti-ent-related-project-overlay {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 12px 14px;
    z-index: 2;
    background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0));
    color: white;
}
.ti-ent-related-project-overlay > div {
    font-size: 80%;
    background-color: rgba(0,0,0,.5);
    padding: 0.5rem 1rem;
}
.fl-builder-content .ti-ent-related-project-overlay a {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 2px 6px rgba(0,0,0,.35);
    font-size: clamp(14px, 1.8vw, 18px);
    margin-bottom: 2rem;
}

/* Corner with “Les mer”: hvit i standard, blå i featured */
.ti-ent-related-project-corner {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(40%, 140px);
    height: min(40%, 140px);
    background: white; /* standard */
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
    z-index: 3;
    display: grid;
    place-items: end;
    padding: 8px 10px;
}
.ti-ent-tjenester-card--featured .ti-ent-related-project-corner {
    background: #053f8c;
}
.ti-ent-tjenester-card--featured .ti-ent-related-project-corner a {
    color: #fff;
    font-size: 1.1rem;
}
.ti-ent-related-project-corner a {
    color: #053f8c;
    text-decoration: none;
    font-weight: 700;
    font-size: clamp(12px, 2.2vw, 14px);
    line-height: 1;
    white-space: nowrap;
    transform: translate(-6%, -6%);
}
.ti-ent-tjenester-card--featured .ti-ent-related-project-corner a:hover {
    color: white;
}
.ti-ent-related-project-corner a:hover {
    color: #053f8c;
}

/* Hover tweaks */
.ti-ent-related-project:hover .ti-ent-related-project-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0));
}
.ti-ent-related-project:hover .ti-ent-related-project-corner {
    filter: brightness(1.05);
}

/* Pagination */
.ti-ent-tjenester-pagination {
    margin-top: 24px;
    text-align: center;
}
.ti-ent-tjenester-pagination .page-numbers {
    display: inline-flex;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Single template */
.ti-ent-tjenester-single {
    margin: 24px 0;
}
.ti-ent-tjenester-single__header {
    margin-bottom: 16px;
}

.fl-page .fl-builder-content .ti-ent-tjenester-card__title {
    color: #fff;
    text-decoration: none;
}

/* Standardkort: hvite, mindre firkanter som bullets */
.ti-ent-tjenester-card__bullets {
    list-style: none;
    margin: 12px 0;
    padding-left: 0;
}
.ti-ent-tjenester-card__bullets li {
    position: relative;
    padding-left: 24px; /* litt smalere enn featured */
    margin: 8px 0;
    color: rgba(255,255,255,0.9); /* standardkort har lys tekst */
}
.ti-ent-tjenester-card__bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 10px;   /* mindre enn 14px */
    height: 10px;  /* mindre enn 14px */
    background: #ffffff; /* hvit firkant for standardkort */
    border-radius: 2px;  /* kan fjernes om du vil ha helt skarp */
}

/* Featured: behold blå firkanter via eksisterende .ti-ent-tjenester-bullets */
.ti-ent-tjenester-card--featured .ti-ent-tjenester-bullets li::before {
    background: #053f8c; /* sikrer blå i featured */
}
/* Responsive adjustments */
@media (max-width: 1024px) {
    .ti-ent-tjenester-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ti-ent-tjenester-card--featured {
        grid-column: 1 / -1;
    }
    .ti-ent-tjenester-related-projects-wrapper {
        grid-template-columns: repeat(2, 1fr);
        padding: 1.5rem;
    }
    .ti-ent-tjenester-card--featured .ti-ent-tjenester-related-projects-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .ti-ent-tjenester-grid {
        grid-template-columns: 1fr;
    }
    .ti-ent-tjenester-card,
    .ti-ent-tjenester-card--featured {
        grid-column: 1 / -1;
    }
    .ti-ent-tjenester-related-projects-wrapper,
    .ti-ent-tjenester-card--featured .ti-ent-tjenester-related-projects-wrapper {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
    /* Featured: 2-kolonne layout */
    .ti-ent-tjenester-card--featured .ti-ent-tjenester-card-wrapper {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        column-gap: 2rem;
        row-gap: 1.5rem;
        margin: 0 2rem;
    }
    /* Standard: fleksibel kolonne-layout */
    .ti-ent-tjenester-card-wrapper {
        display: flex;
        flex-direction: column;
        column-gap: 2rem;
        row-gap: 1.5rem;
        height: 100%;
        margin: 0 2rem;
    }
}