/* ==========================================================================
   OPRANIC - GUIDES HUB + SINGLE POST TYPOGRAPHY
   --------------------------------------------------------------------------
   Laddas via opranic_conditional_styles() på:
     - Guides Hub page (26560 + WPML-översättningar)
     - is_singular('post') utom in_category('references')

   Innehåll:
     A. GUIDES HUB
        1. Hero-sektion (.opr-guides-hero + sub-element)
        2. Sektion-wrappers
        3. Kort-grid (.opr-guides-grid)
        4. Kort (.opr-guides-card + sub-element)
        5. Pillar-kort (Tier-0 highlights)
     B. SINGLE POST
        6. Brödtext-typografi (.single-post .entry-*)
        7. Blog grid-titlar (.bgttl)
        8. Single-post CLS-fixar (featured image, hero)
        9. Delningsknappar (#share)
       10. Blog-grid card styling

   Version: 2026-04-30 (refactor v2.5)
   ========================================================================== */

/* ==========================================================================
   A1. GUIDES HUB - HERO
   ========================================================================== */

.opr-guides-hero {
    position: relative;
    width: 100%;
    height: 480px;
    overflow: hidden;
    border-radius: 2px;
    margin-bottom: 60px;
}
.opr-guides-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
}
.opr-guides-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 8, 5, 0.55);
    clip-path: polygon(0 0, 46% 0, 35% 100%, 0 100%);
    z-index: 1;
}
.opr-guides-hero__text {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    padding: 0 52px;
    max-width: 480px;
}
.opr-guides-hero__overline {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #EE9305;
    margin: 0 0 10px 0;
}
.opr-guides-hero__accent {
    width: 48px;
    height: 3px;
    background: #EE9305;
    margin: 14px 0 16px;
}
.opr-guides-hero__sub {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: clamp(14px, 1.2vw, 18px);
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
    line-height: 1.4;
}

@media (max-width: 1024px) {
    .opr-guides-hero { height: 360px; }
    .opr-guides-hero__overlay { clip-path: polygon(0 0, 54% 0, 38% 100%, 0 100%); }
    .opr-guides-hero__text { padding: 0 36px; }
}

@media (max-width: 768px) {
    .opr-guides-hero {
        height: 240px;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
    }
    .opr-guides-hero__overlay { clip-path: polygon(0 0, 58% 0, 40% 100%, 0 100%); }
    .opr-guides-hero__text { padding: 0 20px; max-width: 65%; }
    .opr-guides-hero__overline { font-size: 9px; letter-spacing: 2px; margin-bottom: 6px; }
    .opr-guides-hero__accent { width: 28px; height: 2px; margin: 8px 0 10px; }
    .opr-guides-hero__sub { font-size: 12px; }
}

/* ==========================================================================
   A2. SEKTION
   ========================================================================== */

.opr-guides-section {
    max-width: 1280px;
    margin: 0 auto 80px !important;
    padding: 0 40px;
}
.opr-guides-section-desc {
    font-size: 15px;
    color: #666666;
    margin: 0 0 28px;
    max-width: 720px;
    line-height: 1.55;
}

/* ==========================================================================
   A3. KORT-GRID
   ========================================================================== */

.opr-guides-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}
.opr-guides-grid.opr-guides-grid--two {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ==========================================================================
   A4. KORT
   ========================================================================== */

.opr-guides-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid #EAEAEA;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    height: 100%;
}
.opr-guides-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0,0,0,0.08);
    border-color: #D8D8D8;
}
.opr-guides-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 970/600;
    overflow: hidden;
    background: #F4F4F4;
}
.opr-guides-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.opr-guides-card:hover .opr-guides-card-media img {
    transform: scale(1.03);
}
.opr-guides-card-body {
    padding: 22px 24px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.opr-guides-card-kicker {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #EE9305;
    margin-bottom: 10px;
}
.opr-guides-card-title {
    font-size: 20px;
    line-height: 1.28;
    font-weight: 500;
    color: #222222;
    margin: 0 0 10px;
    letter-spacing: -0.1px;
}
.opr-guides-card-desc {
    font-size: 14px;
    line-height: 1.55;
    color: #555555;
    margin: 0 0 18px;
    flex: 1;
}
.opr-guides-card-arrow {
    font-size: 13px;
    font-weight: 500;
    color: #EE9305;
    letter-spacing: 0.02em;
}
.opr-guides-card-arrow::after {
    content: " \2192";
    transition: transform 0.25s ease;
    display: inline-block;
}
.opr-guides-card:hover .opr-guides-card-arrow::after {
    transform: translateX(4px);
}

/* ==========================================================================
   A5. PILLAR-KORT (Tier-0 highlights)
   ========================================================================== */

.opr-guides-card--pillar {
    background: #262626;
    border-color: #262626;
}
.opr-guides-card--pillar .opr-guides-card-body {
    padding: 28px 26px 30px;
}
.opr-guides-card--pillar .opr-guides-card-title {
    color: #F6F6F6;
}
.opr-guides-card--pillar .opr-guides-card-desc {
    color: #C8C8C8;
}
.opr-guides-card--pillar:hover {
    border-color: #EE9305;
}

/* RESPONSIV - grid-kolumner */

@media (max-width: 960px) {
    .opr-guides-grid,
    .opr-guides-grid.opr-guides-grid--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .opr-guides-section { padding: 0 24px; }
}
@media (max-width: 640px) {
    .opr-guides-grid,
    .opr-guides-grid.opr-guides-grid--two {
        grid-template-columns: 1fr;
    }
    .opr-guides-section { margin-bottom: 56px; }
}

/* GUIDES HERO-RUBRIK */

.opr-guides-hero__title {
    font-size: clamp(20px, 2vw, 32px);
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: none;
    white-space: normal;
}

@media (max-width: 1024px) {
    .opr-guides-hero__title {
        font-size: clamp(18px, 2.6vw, 26px);
        letter-spacing: 0.06em;
    }
}

@media (max-width: 768px) {
    .opr-guides-hero__title {
        font-size: clamp(14px, 4.5vw, 20px);
        letter-spacing: 0.05em;
    }
}

/* ==========================================================================
   B6. SINGLE POST - BRÖDTEXT-TYPOGRAFI
   ========================================================================== */

/* Sidans stora titel överst */
.single-post .entry-title,
.single-post .entry-title a {
    font-size: 24px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
}

/* Page header title */
.single-post .page-header .page-header-title {
    font-size: var(--wpex-text-5xl);
    line-height: 1.12;
    font-weight: 400;
    letter-spacing: -0.2px;
    text-transform: none;
}

/* H2 i artikeln (20px) */
.single-post h2,
.single-post .entry-content h2,
.single-post .entry-content h2.wpb_heading,
.single-post .entry-content .vcex-heading h2,
.single-post .entry-content .vc_custom_heading h2,
.single-post .entry-content .vcex-heading__text,
.single-post .entry-content .theme-heading,
.single-post .entry-content .vc_custom_heading,
.single-post .entry-content .wpb_heading {
    font-size: 20px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    margin: 1.1em 0 0.5em !important;
}

/* H3 i artikeln (18px) */
.single-post h3,
.single-post .entry-content h3,
.single-post .entry-content .vcex-heading h3,
.single-post .entry-content .theme-heading h3 {
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    margin: 1em 0 0.45em !important;
}

/* Brödtext/listor (16px) */
.single-post .entry-content p,
.single-post .entry-content li {
    font-size: 16px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

/* Brödtext line-height fallback */
.single-post .entry-content p {
    line-height: 1.6;
}

/* WPBakery textkolumner ärver brödtext */
.single-post .entry-content .wpb_text_column,
.single-post .entry-content .wpb_text_column .wpb_wrapper {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}

/* Theme-overrides utan dubbla rules */
.single-post .entry-content h2[class*="wpex-"],
.single-post .entry-content h3[class*="wpex-"] {
    font: inherit !important;
    line-height: inherit !important;
}

/* ==========================================================================
   B7. BLOG GRID-TITLAR (.bgttl)
   ========================================================================== */

.bgttl .vcex-blog-entry-title,
.bgttl .vcex-blog-entry-title a,
.bgttl .entry-title,
.bgttl .entry-title a {
    font-size: var(--grid-title-size, 18px) !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    margin: 0.35em 0 0.4em !important;
}

@media (max-width: 1024px) {
    .bgttl .vcex-blog-entry-title,
    .bgttl .vcex-blog-entry-title a {
        font-size: var(--grid-title-size-md, 16px) !important;
    }
}

@media (max-width: 640px) {
    .bgttl .vcex-blog-entry-title,
    .bgttl .vcex-blog-entry-title a {
        font-size: var(--grid-title-size-sm, 14px) !important;
    }
}

/* ==========================================================================
   B8. SINGLE-POST CLS-FIXAR
   ========================================================================== */

/* Single Blog hero image */
.single-post .wpb_single_image.img_r .vc_single_image-wrapper {
    aspect-ratio: 970 / 600;
    display: block;
    overflow: hidden;
}
.single-post .wpb_single_image.img_r .vc_single_image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* Featured image */
.single-post img.vc_single_image-img {
    aspect-ratio: 970 / 600;
    width: 100%;
    height: auto;
}

/* ==========================================================================
   B9. DELNINGSKNAPPAR (#share)
   ========================================================================== */

#share .wpex-social-share__label {
    display: none;
}
#share .wpex-social-share__list {
    display: flex;
    flex-direction: column;
}
#share a {
    padding: 0;
}
#share .ticon {
    background: var(--color-brand-orange);
    color: var(--color-text-white);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    line-height: 35px;
    font-size: 20px;
    margin-top: 15px;
    text-align: center;
    transition: opacity 0.3s;
}
#share .ticon:hover {
    opacity: .7;
}

@media (max-width: 768px) {
    #share .wpex-social-share__list {
        flex-direction: row;
        justify-content: center;
    }
}

/* ==========================================================================
   B10. BLOG-GRID KORT-DESIGN
   --------------------------------------------------------------------------
   Scopad till .vcex-blog-grid för att inte påverka andra .post-element
   (t.ex. WC produktkort som också får .post-class via post_class()).
   ========================================================================== */

.vcex-blog-grid .blog-entry,
.vcex-blog-grid .post {
    background-color: #fff !important;
    padding: 20px !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 10.5px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05),
                0 0 0 1px rgba(0, 0, 0, 0.01) !important;
    margin-bottom: 30px !important;
}

.vcex-blog-grid .blog-entry:not(.wpex-card),
.vcex-blog-grid .post:not(.wpex-card) {
    border: none !important;
}

/* === SLUT på Guides Hub + Single Post Typography ========================= */