/* ==========================================================================
   Hestra redesign – sektioner i sidbyggaren (template-sidbyggare.php)
   Mått från XD-skissen (1920 px): innehåll 161–1751 px, kolumner 612/449/449, 40 px mellanrum.
   Färger och typsnitt kommer från variablerna i redesign.css.
   ========================================================================== */

.hestra-redesign .rd-page {
    --rd-gap:      40px;
    --rd-space:    clamp(48px, 5.2vw, 100px);   /* luft ovanför/under en sektion (skissen: 99 under korten) */
    --rd-space-line: clamp(40px, 5.1vw, 98px);  /* från linjen ovanför till sektionens innehåll (skissen: 97–98) */
    --rd-radius:   4px;
    --rd-line:     #dfd8d3;
    --rd-max:      1590px;                       /* innehållets maxbredd enligt skissen */

    background: var(--hr-beige);
    color: var(--hr-text);
    font-family: var(--hr-font-sans);
}

.hestra-redesign .rd-section {
    padding: var(--rd-space) 0 var(--rd-space-below, var(--rd-space));
}

.hestra-redesign .rd-section + .rd-section {
    padding-top: 0;   /* luften mellan två sektioner ska inte dubblas */
}

/* Avstånd enligt skissen (startsidan, 1920 px): header → första rubriken 126,
   intro → nästa 141, bild/film i fullbredd → nästa 128 */
.hestra-redesign .rd-page > .rd-section:first-child:not(.rd-section--job) {
    padding-top: clamp(56px, 6.6vw, 126px);
}

.hestra-redesign .rd-section--intro {
    --rd-space-below: clamp(56px, 7.3vw, 141px);
}

.hestra-redesign .rd-section--media {
    --rd-space-below: clamp(56px, 6.7vw, 128px);
}

/* "Luft under" i admin (skissen: 63 under bildkollaget, ca 180 under karusellen, ca 230 under citatet) */
.hestra-redesign .rd-section--space-mindre { --rd-space-below: clamp(32px, 3.3vw, 64px); }
.hestra-redesign .rd-section--space-mer    { --rd-space-below: clamp(64px, 9.4vw, 180px); }
.hestra-redesign .rd-section--space-mest   { --rd-space-below: clamp(80px, 12.1vw, 232px); }

/* 1590 px innehåll = 612 + 449 + 449 + 2 × 40 */
.hestra-redesign .rd-container {
    max-width: calc(var(--rd-max) + 2 * var(--hr-gutter));
    margin: 0 auto;
    padding: 0 var(--hr-gutter);
}

/* Linje ovanför (val i admin) */
.hestra-redesign .rd-section--divider > .rd-container::before {
    content: "";
    display: block;
    grid-column: 1 / -1;
    grid-row: 1;   /* alltid överst, även när kolumnerna är spegelvända */
    margin-bottom: var(--rd-space-line);
    border-top: 1px solid var(--rd-line);
}


/* --- Typografi --------------------------------------------------------- */

.hestra-redesign .rd-page h1,
.hestra-redesign .rd-page h2,
.hestra-redesign .rd-page h3 {
    margin: 0;
    color: inherit;
    font-family: var(--hr-font-serif);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.hestra-redesign .rd-page p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}


/* --- Intro ------------------------------------------------------------- */
/* Rubrik och ingress i två kolumner om 612 px (1264 px totalt, centrerat) */

/* Stor luft under headern när introt ligger först på sidan */
.hestra-redesign .rd-section--intro:first-child {
    padding-top: clamp(64px, 9.6vw, 184px);
}

/* Spegelvänd ("Ingen kan butiksinredning som vi"): samma kolumner som Bild + text + bild,
   text 14 px i första kolumnen, rubriken över de två andra (449 + 40 + 449 = 938 px) */
.hestra-redesign .rd-section--intro.rd-section--reverse .rd-intro {
    grid-template-columns: 612fr 449fr 449fr;
    max-width: none;
}

.hestra-redesign .rd-section--intro.rd-section--reverse .rd-intro__title {
    grid-column: 2 / 4;
    grid-row: 1;
}

.hestra-redesign .rd-page .rd-section--intro.rd-section--reverse .rd-intro__text {
    grid-column: 1;
    grid-row: 1;
    max-width: 469px;
    margin-top: 10px;
    color: var(--hr-black);
    font-size: 14px;
    line-height: 18px;
}

.hestra-redesign .rd-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--rd-gap);
    max-width: calc(var(--rd-max) * .795);   /* 1264 av 1590 */
    margin: 0 auto;
}

/* Stora röda rubriker (skissens H1: Abril 60/67, #830E1D) */
.hestra-redesign .rd-page .rd-heading-xl {
    color: var(--hr-red);
    font-size: clamp(36px, 3.125vw, 60px);
    line-height: 1.117;
}

.hestra-redesign .rd-page .rd-heading--center {
    max-width: calc(var(--rd-max) * .795);
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.hestra-redesign .rd-page .rd-section__title {
    margin-bottom: clamp(32px, 3vw, 58px);
}

/* Introt som följer filtret i "Referenser" tonas ut/in när branschen byts */
.hestra-redesign .rd-section--intro .rd-intro {
    transition: opacity .2s var(--hr-ease);
}

.hestra-redesign .rd-section--intro.is-swapping .rd-intro {
    opacity: 0;
}

.hestra-redesign .rd-page .rd-intro__text {
    white-space: pre-line;   /* radbrytningar i branschbeskrivningen */
    margin-top: 10px;
    font-size: 17px;
    line-height: 22px;
}


/* --- Rutnät för Bild + text + bild och Bildkollage --------------------- */

.hestra-redesign .rd-grid {
    display: grid;
    grid-template-columns: 612fr 449fr 449fr;
    column-gap: var(--rd-gap);
    align-items: start;
}

.hestra-redesign .rd-grid__large { grid-column: 1; }
.hestra-redesign .rd-grid__text  { grid-column: 2; }
.hestra-redesign .rd-grid__small { grid-column: 3; }

/* Spegelvänd: stor bild till höger */
.hestra-redesign .rd-section--reverse .rd-grid {
    grid-template-columns: 449fr 449fr 612fr;
}

/* Rad 2: rad 1 är reserverad för linjen ovanför (tom och 0 px hög utan linje) */
.hestra-redesign .rd-section--reverse .rd-grid__large { grid-column: 3; grid-row: 2; }
.hestra-redesign .rd-section--reverse .rd-grid__text  { grid-column: 2; grid-row: 2; }
.hestra-redesign .rd-section--reverse .rd-grid__small { grid-column: 1; grid-row: 2; }


/* --- Bilder och bildtexter --------------------------------------------- */

.hestra-redesign .rd-figure {
    margin: 0;
}

.hestra-redesign .rd-figure__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--rd-radius);
}

.hestra-redesign .rd-figure__img--large { aspect-ratio: 612 / 782; }
.hestra-redesign .rd-figure__img--small { aspect-ratio: 449 / 491; }

.hestra-redesign .rd-caption {
    display: grid;
    grid-template-columns: 123px minmax(0, 449px);
    gap: var(--rd-gap);
    margin-top: 30px;
    font-size: 14px;
    line-height: 18px;
}

.hestra-redesign .rd-caption__title {
    font-family: var(--hr-font-serif);
    font-size: 17px;
    font-style: italic;
    line-height: 22px;
}

.hestra-redesign .rd-caption__text {
    color: var(--hr-black);
}


/* --- Textkolumn -------------------------------------------------------- */

.hestra-redesign .rd-page .rd-text__kicker {
    margin-bottom: 12px;
    font-family: var(--hr-font-serif);
    font-size: 17px;
    font-weight: 400;
    line-height: 22px;
}

.hestra-redesign .rd-page .rd-text__title {
    margin-bottom: 24px;
    font-size: 26px;
    line-height: 29px;
}

.hestra-redesign .rd-text__body,
.hestra-redesign .rd-text__signature {
    color: var(--hr-black);
    font-size: 14px;
    line-height: 18px;
}

.hestra-redesign .rd-text__body p,
.hestra-redesign .rd-text__body ul,
.hestra-redesign .rd-text__body ol {
    margin: 0 0 18px;
}

.hestra-redesign .rd-text__body a {
    color: var(--hr-red);
}

.hestra-redesign .rd-text__signature {
    margin-top: 18px;
}


/* --- Länk i bildtexter m.m. (skissen: Helvetica Bold 14/17, röd, understruken) */

/* Hover enligt skissens prototyp: linjen dras ihop åt höger och försvinner,
   och växer tillbaka från höger när muspekaren lämnar länken. Texten är oförändrad. */
.hestra-redesign .rd-link {
    position: relative;
    display: block;
    width: fit-content;
    margin-top: 12px;
    padding-bottom: 5px;
    color: var(--hr-red);
    font-size: 14px;
    font-weight: 700;
    line-height: 17px;
    text-decoration: none;
}

.hestra-redesign .rd-link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: currentColor;
    transform-origin: right center;
    transition: transform .2s cubic-bezier(.2, .7, .2, 1);
}

.hestra-redesign .rd-link:hover::after {
    transform: scaleX(0);
    transition-duration: .12s;
}

.hestra-redesign .rd-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .hestra-redesign .rd-link::after {
        transition: none;
    }
}


/* --- Bild + citat + bild (612 + 449 + 449, citat i Abril 40/45) ------- */

.hestra-redesign .rd-quote {
    margin: 0;
    padding: 0;
    border: 0;
    quotes: none;
}

.hestra-redesign .rd-page .rd-quote p {
    margin: 0;
    color: var(--hr-text);
    font-family: var(--hr-font-serif);
    font-size: clamp(26px, 2.08vw, 40px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.125;
}


/* --- Liten bild + text + stor bild (286 + 286 + 938, startsidan längst ner) ---
   Allt bottenjusteras: den stora bilden har bildtexten ovanför och sticker upp,
   textkolumnen är lika hög som den lilla bilden (rubriken i höjd med bildens överkant,
   länken i höjd med underkanten) och växer uppåt om texten är längre. */

.hestra-redesign .rd-feature {
    display: grid;
    grid-template-columns: 286fr 286fr 938fr;
    column-gap: var(--rd-gap);
    align-items: end;
}

/* Rad 1 är reserverad för linjen ovanför */
.hestra-redesign .rd-feature__small { grid-column: 1; grid-row: 2; }
.hestra-redesign .rd-feature__text  { grid-column: 2; grid-row: 2; }
.hestra-redesign .rd-feature__large { grid-column: 3; grid-row: 2; }

.hestra-redesign .rd-section--reverse .rd-feature {
    grid-template-columns: 938fr 286fr 286fr;
}

.hestra-redesign .rd-section--reverse .rd-feature__large { grid-column: 1; }
.hestra-redesign .rd-section--reverse .rd-feature__small { grid-column: 3; }

.hestra-redesign .rd-feature__small .rd-figure__img { aspect-ratio: 286 / 349; }
.hestra-redesign .rd-feature__large .rd-figure__img { aspect-ratio: 938 / 491; }

.hestra-redesign .rd-feature__large .rd-caption {
    margin: 0 0 20px;
}

/* Länken i bildtexten högerställd i linje med bildens kant, i höjd med första textraden */
.hestra-redesign .rd-caption--link-aside {
    grid-template-columns: 123px minmax(0, 449px) 1fr;
}

.hestra-redesign .rd-caption--link-aside .rd-caption__link {
    justify-self: end;
    align-self: start;
    margin-top: 7px;
}

.hestra-redesign .rd-feature__text {
    display: flex;
    flex-direction: column;
    aspect-ratio: 286 / 349;   /* som den lilla bilden – minsta höjd, växer med texten */
}

.hestra-redesign .rd-page .rd-feature__text .rd-text__kicker {
    margin-bottom: 8px;
}

.hestra-redesign .rd-feature__text .rd-text__body > :last-child {
    margin-bottom: 0;
}

.hestra-redesign .rd-feature__link {
    margin-top: auto;
}

/* Utan liten bild finns inget att följa i höjd */
.hestra-redesign .rd-feature:not(:has(.rd-feature__small)) .rd-feature__text {
    aspect-ratio: auto;
}

/* Minst en rad luft mellan texten och länken när texten fyller kolumnen */
.hestra-redesign .rd-feature__text .rd-text__body:not(:last-child) {
    margin-bottom: 18px;
}


/* --- Bild/film i fullbredd (1920 × 622) ------------------------------- */

.hestra-redesign .rd-media {
    position: relative;
    height: clamp(260px, 32.4vw, 622px);
    overflow: hidden;
    background: var(--hr-sand);
}

.hestra-redesign .rd-media__img,
.hestra-redesign .rd-media__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Filmen ligger över bilden och fyller hela ytan (beskärs som bilden) */
.hestra-redesign .rd-media__video {
    position: absolute;
    inset: 0;
    pointer-events: none;
}


/* --- Rubrik + kort (kvadratiska kort 286 × 286, #DFD8D3) --------------- */

.hestra-redesign .rd-cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: 1fr;   /* alla rader lika höga som den högsta */
    gap: var(--rd-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hestra-redesign .rd-card {
    position: relative;
    aspect-ratio: 1;   /* kvadrat som minst – växer om texten kräver det */
    place-self: stretch;   /* med aspect-ratio sträcks kortet annars inte till radens höjd */
    margin: 0;
    padding: clamp(24px, 2.4vw, 46px) 22px 22px;
    background: var(--hr-sand);
    border-radius: var(--rd-radius);
}

.hestra-redesign .rd-page .rd-card__title {
    margin-bottom: 11px;
    font-size: clamp(21px, 1.36vw, 26px);
    line-height: 1.115;
    hyphens: auto;
    overflow-wrap: break-word;
}

.hestra-redesign .rd-card__title a {
    color: inherit;
    text-decoration: none;
}

/* Hela kortet klickbart när det har en länk */
.hestra-redesign .rd-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--rd-radius);
}

.hestra-redesign .rd-card--link {
    transition: background-color .2s var(--hr-ease);
}

.hestra-redesign .rd-card--link:hover,
.hestra-redesign .rd-card--link:focus-within {
    background: #d5ccc6;
}

.hestra-redesign .rd-page .rd-card__text {
    font-size: clamp(15px, .885vw, 17px);
    line-height: 1.3;
    hyphens: auto;
}

@media (max-width: 1199px) {
    .hestra-redesign .rd-cards,
    .hestra-redesign .rd-jobs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* När korten bryts på flera rader: höjden följer texten i stället för kvadrat (inget dött utrymme) */
    .hestra-redesign .rd-card {
        aspect-ratio: auto;
        min-height: 160px;
        padding: 24px 22px 26px;
    }
}


/* --- Textpunkter (två kolumner, 612 px breda, högra börjar vid 976 px) -- */

.hestra-redesign .rd-section--points .rd-section__title {
    margin-bottom: clamp(40px, 4.6vw, 89px);
}

.hestra-redesign .rd-points {
    display: grid;
    grid-template-columns: 612fr 203fr 612fr 163fr;
    row-gap: var(--rd-gap);
    margin: 0;
}

.hestra-redesign .rd-point {
    display: grid;
    grid-template-columns: 123px minmax(0, 449px);
    gap: var(--rd-gap);
    grid-column: 1;
}

.hestra-redesign .rd-point:nth-child(even) {
    grid-column: 3;
}

.hestra-redesign .rd-point__title {
    font-family: var(--hr-font-serif);
    font-size: 17px;
    font-style: italic;
    line-height: 22px;
}

.hestra-redesign .rd-point__text {
    margin: 0;
    color: var(--hr-black);
    font-size: 14px;
    line-height: 18px;
}


/* --- Bildkarusell med Swiper (stående bilder 286 × 349, 40 px mellanrum) ---
   Bredder och mellanrum sätts av Swiper (se sections.js). */

.hestra-redesign .rd-carousel {
    position: relative;
    container-type: inline-size;   /* pilarnas höjd räknas från bredden */
}

.hestra-redesign .rd-carousel__track {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hestra-redesign .rd-carousel__item {
    height: auto;
    margin: 0;
}

/* Innan Swiper har startat (eller utan JS): samma bredd som i karusellen */
.hestra-redesign .rd-carousel__swiper:not(.swiper-initialized) .rd-carousel__item {
    width: calc((100% - 4 * var(--rd-gap)) / 5);
    margin-right: var(--rd-gap);
}

.hestra-redesign .rd-carousel__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.hestra-redesign .rd-carousel__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 286 / 349;
    object-fit: cover;
    border-radius: var(--rd-radius);
    transition: opacity .2s var(--hr-ease);
}

.hestra-redesign .rd-carousel__link:hover .rd-carousel__img {
    opacity: .85;
}

.hestra-redesign .rd-carousel__label {
    display: block;
    margin-top: 17px;
    font-family: var(--hr-font-serif);
    font-size: 26px;
    line-height: 29px;
}

/* Pilknappar i marginalen (skissen: 45 × 45 px, #DFD8D3, 3 px hörn, 105 px utanför innehållet) */
.hestra-redesign .rd-carousel__arrow {
    position: absolute;
    /* mitt för bilderna: bildbredd × 349/286 ÷ 2 (bildbredd = (bredd − mellanrum) ÷ antal synliga) */
    top: calc((100cqw - (var(--rd-carousel-n, 5) - 1) * var(--rd-gap)) / var(--rd-carousel-n, 5) * 349 / 286 / 2 - 22.5px);
    width: 45px;
    height: 45px;
    margin: 0;
    padding: 0;
    background: var(--hr-sand);
    border: 0;
    border-radius: 3px;
    color: var(--hr-text);
    cursor: pointer;
    transition: opacity .2s var(--hr-ease), background-color .2s var(--hr-ease);
}

.hestra-redesign .rd-carousel__arrow:not(:disabled):hover,
.hestra-redesign .rd-carousel__arrow:focus-visible {
    background: #d5ccc6;
}

/* 105 px utanför innehållet, men minst ca 16 px från skärmkanten (100vw − 100cqw = sidomarginalerna inkl. rullningslist) */
.hestra-redesign .rd-carousel__arrow--prev { left: calc(-1 * min(105px, (100vw - 100cqw) / 2 - 24px)); }
.hestra-redesign .rd-carousel__arrow--next { right: calc(-1 * min(105px, (100vw - 100cqw) / 2 - 24px)); }

.hestra-redesign .rd-carousel__arrow::before,
.hestra-redesign .rd-carousel__arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 12.5px;   /* pilen (20 px) centrerad i knappen */
}

/* Linje */
.hestra-redesign .rd-carousel__arrow::before {
    width: 20px;
    height: 1px;
    background: currentColor;
}

/* Pilspets */
.hestra-redesign .rd-carousel__arrow::after {
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-bottom: 1px solid currentColor;
    border-left: 1px solid currentColor;
    transform: rotate(45deg);
}

.hestra-redesign .rd-carousel__arrow--next::after {
    left: 24.5px;
    transform: rotate(-135deg);
}

.hestra-redesign .rd-carousel__arrow:disabled,
.hestra-redesign .rd-carousel__arrow.swiper-button-disabled {
    opacity: .4;
    cursor: default;
}


/* Smalare skärmar: marginalen räcker inte för pilarna (45 px + luft till kant och bild),
   så karusellen dras in 61 px på varje sida och pilarna ligger i den luften, mitt för bilderna */
@media (min-width: 990px) and (max-width: 1751px) {
    .hestra-redesign .rd-carousel {
        padding: 0 61px;
    }

    .hestra-redesign .rd-carousel__arrow--prev { left: 0; }
    .hestra-redesign .rd-carousel__arrow--next { right: 0; }
}

/* Fyra bilder åt gången (Swiper, sections.js) – pilarnas höjd räknas på det */
@media (min-width: 990px) and (max-width: 1199px) {
    .hestra-redesign .rd-carousel {
        --rd-carousel-n: 4;
    }
}


/* --- Referenser: filterflikar (Helvetica Bold 14, aktiv med 2 px linje, övriga 30 %) */

.hestra-redesign .rd-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 40px;
    margin-bottom: clamp(32px, 2.4vw, 46px);
}

.hestra-redesign .rd-filter__item {
    position: relative;
    padding-bottom: 5px;
    color: var(--hr-red);
    font-size: 14px;
    font-weight: 700;
    line-height: 17px;
    text-decoration: none;
    opacity: .3;
    transition: opacity .15s var(--hr-ease);
}

.hestra-redesign .rd-filter__item:hover,
.hestra-redesign .rd-filter__item:focus-visible {
    opacity: .7;
}

.hestra-redesign .rd-filter__item.is-active {
    opacity: 1;
}

/* Aktiv flik: samma linje och hover som länkarna (.rd-link) – dras ihop åt höger, växer tillbaka */
.hestra-redesign .rd-filter__item.is-active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: currentColor;
    transform-origin: right center;
    transition: transform .2s cubic-bezier(.2, .7, .2, 1);
}

.hestra-redesign .rd-filter__item.is-active:hover::after {
    transform: scaleX(0);
    transition-duration: .12s;
}

@media (prefers-reduced-motion: reduce) {
    .hestra-redesign .rd-filter__item.is-active::after {
        transition: none;
    }
}


/* --- Referenser: block (uppställning A och B) -------------------------- */

.hestra-redesign .rd-case {
    display: grid;
    grid-template-rows: auto 1fr;   /* höga bilder som spänner två rader ska inte trycka ner bildtexten */
    column-gap: var(--rd-gap);
    align-items: start;
}

.hestra-redesign .rd-case[hidden] {
    display: none;
}

/* Mjuk filtrering (sections.js): ut 0,2 s, in med liten fördröjning per referens */
.hestra-redesign .rd-case {
    transition: opacity .35s var(--hr-ease), transform .35s var(--hr-ease);
    transition-delay: calc(var(--rd-i, 0) * 70ms);
}

.hestra-redesign .rd-cases.is-leaving .rd-case {
    opacity: 0;
    transform: translateY(12px);
    transition-duration: .2s;
    transition-delay: 0s;
}

.hestra-redesign .rd-case.is-entering {
    opacity: 0;
    transform: translateY(12px);
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .hestra-redesign .rd-case {
        transition: none;
    }
}

.hestra-redesign .rd-case + .rd-case {
    margin-top: var(--rd-space);
    padding-top: var(--rd-space);
    border-top: 1px solid var(--rd-line);
}

.hestra-redesign .rd-case .rd-figure__img {
    height: auto;
}

/* A: 286 + 286 + 938 (stående, stående, bred) */
.hestra-redesign .rd-case--a {
    grid-template-columns: 286fr 286fr 938fr;
}

.hestra-redesign .rd-case--a .rd-case__img--1 { grid-column: 1; grid-row: 1; }
.hestra-redesign .rd-case--a .rd-case__img--2 { grid-column: 2; grid-row: 1; }
.hestra-redesign .rd-case--a .rd-case__img--3 { grid-column: 3; grid-row: 1 / 3; }
.hestra-redesign .rd-case--a .rd-case__caption { grid-column: 1 / 3; grid-row: 2; }
.hestra-redesign .rd-case--a .rd-case__img--1 img,
.hestra-redesign .rd-case--a .rd-case__img--2 img { aspect-ratio: 286 / 349; }
.hestra-redesign .rd-case--a .rd-case__img--3 img { aspect-ratio: 938 / 491; }

/* C: som A men bildtexten överst; de stående bilderna bottenjusterade mot den breda */
.hestra-redesign .rd-case--c {
    grid-template-columns: 286fr 286fr 938fr;
    grid-template-rows: 1fr auto;   /* extra höjd hamnar ovanför de stående bilderna */
}

.hestra-redesign .rd-case--c .rd-case__caption { grid-column: 1 / 3; grid-row: 1; align-self: start; }
.hestra-redesign .rd-case--c .rd-case__img--1  { grid-column: 1; grid-row: 2; align-self: end; }
.hestra-redesign .rd-case--c .rd-case__img--2  { grid-column: 2; grid-row: 2; align-self: end; }
.hestra-redesign .rd-case--c .rd-case__img--3  { grid-column: 3; grid-row: 1 / 3; }
.hestra-redesign .rd-case--c .rd-case__img--1 img,
.hestra-redesign .rd-case--c .rd-case__img--2 img { aspect-ratio: 286 / 349; }
.hestra-redesign .rd-case--c .rd-case__img--3 img { aspect-ratio: 938 / 491; }

.hestra-redesign .rd-case--c .rd-caption {
    margin-top: 0;
    margin-bottom: 30px;
}

/* B: 612 + 449 + 449 (stor stående, två mindre) */
.hestra-redesign .rd-case--b {
    grid-template-columns: 612fr 449fr 449fr;
}

.hestra-redesign .rd-case--b .rd-case__img--1 { grid-column: 1; grid-row: 1; }
.hestra-redesign .rd-case--b .rd-case__img--2 { grid-column: 2; grid-row: 1 / 3; }
.hestra-redesign .rd-case--b .rd-case__img--3 { grid-column: 3; grid-row: 1 / 3; }
.hestra-redesign .rd-case--b .rd-case__caption { grid-column: 1; grid-row: 2; }
.hestra-redesign .rd-case--b .rd-case__img--1 img { aspect-ratio: 612 / 782; }
.hestra-redesign .rd-case--b .rd-case__img--2 img,
.hestra-redesign .rd-case--b .rd-case__img--3 img { aspect-ratio: 449 / 491; }


/* --- Lediga tjänster: kort (286 × 349, fem per rad) och rund knapp ---- */

.hestra-redesign .rd-jobs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 56px var(--rd-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hestra-redesign .rd-job {
    margin: 0;
}

.hestra-redesign .rd-job__image {
    display: block;
}

.hestra-redesign .rd-job__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 286 / 349;
    object-fit: cover;
}

.hestra-redesign .rd-page .rd-job__title {
    margin: 20px 0 7px;
    font-size: 17px;
    font-style: italic;
    line-height: 22px;
}

.hestra-redesign .rd-job__title a {
    color: inherit;
    text-decoration: none;
}

.hestra-redesign .rd-page .rd-job__text {
    color: var(--hr-black);
    font-size: 14px;
    line-height: 18px;
}

.hestra-redesign .rd-jobs__empty {
    max-width: 612px;
    font-size: 17px;
    line-height: 22px;
}

/* Rund knapp (skissen: cirkel 55 px, 1 px ram, texten börjar inne i cirkeln) */
.hestra-redesign .rd-circle-btn {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    min-height: 55px;
    margin-top: 20px;
    padding-top: 13px;    /* skissen: texten börjar 14 px under ringens överkant, pilen ligger under */
    padding-left: 23px;
    color: var(--hr-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    text-decoration: none;
}

.hestra-redesign .rd-circle-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 55px;
    height: 55px;
    border: 1px solid currentColor;
    border-radius: 50%;
    transition: background-color .2s var(--hr-ease), border-color .2s var(--hr-ease);
}

.hestra-redesign .rd-circle-btn:hover::before,
.hestra-redesign .rd-circle-btn:focus-visible::before {
    background: var(--hr-sand);
    border-color: var(--hr-sand);
}

/* Lottie-animationen (300 × 186, ringen 160 px) skalad så att ringen blir 55 px:
   55/160 ≈ .344 => 103 × 64 px, ringens vänsterkant ligger 5,5 px in i animationen */
.hestra-redesign .rd-circle-btn__anim {
    position: absolute;
    top: 50%;
    left: -5.5px;
    z-index: -1;
    width: 103px;
    height: 64px;
    transform: translateY(-50%);
    pointer-events: none;
}

.hestra-redesign .rd-circle-btn__anim svg {
    display: block;
}

/* När animationen har laddats ersätter den CSS-ringen */
.hestra-redesign .rd-circle-btn.has-anim::before {
    display: none;
}

.hestra-redesign .rd-job {
    position: relative;
    z-index: 0;   /* knappens cirkel ligger bakom texten men inom kortet */
}


/* --- En ledig tjänst (rubrik + avsnitt till vänster 938, bild till höger 612) */

.hestra-redesign .rd-section--job {
    padding-top: clamp(64px, 11.1vw, 214px);
}

.hestra-redesign .rd-job-page {
    display: grid;
    grid-template-columns: 938fr 612fr;
    gap: var(--rd-gap);
    align-items: start;
}

.hestra-redesign .rd-job-page__sections {
    display: grid;
    row-gap: 48px;
    margin: clamp(40px, 4.7vw, 90px) 0 0;
}

.hestra-redesign .rd-job-page__sections .rd-point {
    grid-column: auto;
    grid-template-columns: 123px minmax(0, 449px);
}

.hestra-redesign .rd-job-page__sections .rd-text__body p:last-child {
    margin-bottom: 0;
}


/* --- Fade-in när blocken kommer in i bild (sections.js) ---------------
   Bara när <html> har rd-reveal-ready (sätts i <head>, inte vid "minska rörelse").
   Samma lista med element finns i sections.js. */

.rd-reveal-ready .hestra-redesign :is(
    .rd-intro > *,
    .rd-section__title,
    .rd-media,
    .rd-cards > li,
    .rd-grid > *,
    .rd-feature > *,
    .rd-points > *,
    .rd-carousel,
    .rd-filter,
    .rd-cases,
    .rd-jobs > li,
    .rd-job-page > *
):not(.rd-revealed) {
    opacity: 0;
    transform: translateY(24px);
}

.rd-reveal-ready .hestra-redesign :is(
    .rd-intro > *,
    .rd-section__title,
    .rd-media,
    .rd-cards > li,
    .rd-grid > *,
    .rd-feature > *,
    .rd-points > *,
    .rd-carousel,
    .rd-filter,
    .rd-cases,
    .rd-jobs > li,
    .rd-job-page > *
).rd-revealing {
    opacity: 1;
    transform: none;
    transition:
        opacity .9s cubic-bezier(.2, .7, .2, 1) var(--rd-reveal-delay, 0ms),
        transform .9s cubic-bezier(.2, .7, .2, 1) var(--rd-reveal-delay, 0ms);
}


/* --- Mobil ------------------------------------------------------------- */

@media (max-width: 989px) {

    .hestra-redesign .rd-page {
        --rd-gap: 24px;
    }

    /* Liten bild + text + stor bild: stor bild överst, liten bild och text bredvid varandra */
    .hestra-redesign .rd-feature,
    .hestra-redesign .rd-section--reverse .rd-feature {
        grid-template-columns: 1fr 1fr;
        row-gap: 32px;
        align-items: start;
    }

    .hestra-redesign .rd-feature__large,
    .hestra-redesign .rd-section--reverse .rd-feature__large { grid-column: 1 / -1; grid-row: 2; }
    .hestra-redesign .rd-feature__small,
    .hestra-redesign .rd-section--reverse .rd-feature__small { grid-column: 1; grid-row: 3; }
    .hestra-redesign .rd-feature__text,
    .hestra-redesign .rd-section--reverse .rd-feature__text  { grid-column: 2; grid-row: 3; aspect-ratio: auto; align-self: stretch; }

    .hestra-redesign .rd-feature__large .rd-caption {
        margin-bottom: 16px;
    }

    .hestra-redesign .rd-intro,
    .hestra-redesign .rd-grid,
    .hestra-redesign .rd-section--reverse .rd-grid {
        grid-template-columns: 1fr;
        row-gap: 32px;
    }

    .hestra-redesign .rd-grid__large,
    .hestra-redesign .rd-grid__text,
    .hestra-redesign .rd-grid__small,
    .hestra-redesign .rd-section--reverse .rd-grid__large,
    .hestra-redesign .rd-section--reverse .rd-grid__text,
    .hestra-redesign .rd-section--reverse .rd-grid__small {
        grid-column: 1;
        grid-row: auto;
    }

    .hestra-redesign .rd-page .rd-intro__text {
        margin-top: 0;
    }

    .hestra-redesign .rd-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .hestra-redesign .rd-points {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }

    .hestra-redesign .rd-point,
    .hestra-redesign .rd-point:nth-child(even) {
        grid-column: 1;
    }

    .hestra-redesign .rd-carousel__swiper:not(.swiper-initialized) .rd-carousel__item {
        width: 75%;
        margin-right: 16px;
    }

    /* Karusellen går ut till skärmkanten till höger, så nästa bild syns */
    .hestra-redesign .rd-carousel__swiper {
        margin-right: calc(-1 * var(--hr-gutter));
    }

    .hestra-redesign .rd-carousel__arrow {
        display: none;   /* svep på mobil */
    }

    /* Referenser: två bilder bredvid varandra, den tredje under, bildtext sist */
    .hestra-redesign .rd-case--a,
    .hestra-redesign .rd-case--b,
    .hestra-redesign .rd-case--c {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        row-gap: 16px;
        column-gap: 16px;
    }

    .hestra-redesign .rd-case .rd-case__img { align-self: start; }

    .hestra-redesign .rd-case--c .rd-caption {
        margin: 16px 0 0;
    }

    .hestra-redesign .rd-case .rd-case__img--1 { grid-column: 1; grid-row: 1; }
    .hestra-redesign .rd-case .rd-case__img--2 { grid-column: 2; grid-row: 1; }
    .hestra-redesign .rd-case .rd-case__img--3 { grid-column: 1 / 3; grid-row: 2; }
    .hestra-redesign .rd-case .rd-case__caption { grid-column: 1 / 3; grid-row: 3; }

    .hestra-redesign .rd-case .rd-case__img img { aspect-ratio: 286 / 349; }
    .hestra-redesign .rd-case .rd-case__img--3 img { aspect-ratio: 938 / 491; }

    .hestra-redesign .rd-jobs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 16px;
    }

    .hestra-redesign .rd-job-page {
        grid-template-columns: 1fr;
    }

    .hestra-redesign .rd-job-page__sections .rd-point {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .hestra-redesign .rd-carousel__label {
        font-size: 20px;
        line-height: 24px;
    }

    /* Spegelvänt intro på mobil: en kolumn, rubriken först */
    .hestra-redesign .rd-section--intro.rd-section--reverse .rd-intro {
        grid-template-columns: 1fr;
    }

    .hestra-redesign .rd-page .rd-section--intro.rd-section--reverse .rd-intro__title,
    .hestra-redesign .rd-page .rd-section--intro.rd-section--reverse .rd-intro__text {
        grid-column: 1;
        grid-row: auto;
        margin-top: 0;
    }

    .hestra-redesign .rd-caption {
        grid-template-columns: 1fr;
        gap: 4px;
        margin-top: 16px;
    }

    .hestra-redesign .rd-caption--link-aside {
        grid-template-columns: 1fr;
    }

    .hestra-redesign .rd-caption--link-aside .rd-caption__link {
        justify-self: start;
        margin-top: 8px;
    }
}

@media (max-width: 599px) {

    .hestra-redesign .rd-feature,
    .hestra-redesign .rd-section--reverse .rd-feature {
        grid-template-columns: 1fr;
    }

    .hestra-redesign .rd-feature__text,
    .hestra-redesign .rd-section--reverse .rd-feature__text  { grid-column: 1; grid-row: 3; }
    .hestra-redesign .rd-feature__small,
    .hestra-redesign .rd-section--reverse .rd-feature__small { grid-column: 1; grid-row: 4; }

    /* En kolumn: varje kort följer sin egen text (samma höjd behövs bara sida vid sida) */
    .hestra-redesign .rd-cards {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .hestra-redesign .rd-card {
        min-height: 0;
    }

    .hestra-redesign .rd-point {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* Inga pilar när alla bilder får plats (Swiper sätter klassen) */
.hestra-redesign .rd-carousel__arrow.swiper-button-lock {
    display: none;
}