/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

    This file contains rules for the
    CARDS
    that implement the UU design system specifically for Sitevision

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.card {
    --bs-card-border-radius: 0;
    --bs-card-inner-border-radius: 0;
    border-radius: var(--bs-card-border-radius);
}


/* Space between paragraphs and cards */

.sv-text-portlet:not(:has(.card)):has(.sv-text-portlet-content p:last-child)+.sv-text-portlet:has(.card) {
    margin-top: var(--space-extra-large);
}

/* Set margin bottom to 0 for linked cards (metadata) so the module has height zero when it does
   not display any content. If a content is displayed the margin will be set by module itself */
.sv-se-uu-uit-webb-webapp-linked-cards-metadata {
    margin-bottom: 0 !important;
}

/********************************

SV translation of .card-text:last-child

********************************/

.card-body .sv-text-portlet-content> :last-child,
.card-body> :last-child {
    margin-bottom: 0;
}


/********************************

 Space between columns in cards in mobile
 The card class should be applied to either a row or a layout and the html structure differ between the two

********************************/

@media only screen and (max-width: 767px) {
    .sv-row .card .sv-decoration-content>.sv-layout:not(:last-child),
    .card .sv-row>.sv-layout:not(:last-child) {
        margin-bottom: var(--space-medium);
    }
}


/********************************

  Font size in cards

********************************/

.uu-block-link.card-call-to-action .card-title,
.uu-block-link.card-choice .card-title,
.uu-block-link .uu-subheading,
.card-header h2,
.card-header h3 {
    font-size: 1.3rem;
    font-weight: normal;
}


/********************************

  This class should only be used in modules and cms messages in the Sitevision editing mode
  Do not use this class in any modules used by website visitors!

********************************/

.card-editing-info {
    background: #17cc7826;
    border: 1px solid #17cc78;
    border-radius: 0.25rem;
    padding: 1em;
}

/* Adjust some margins in the editing info card */
.card-editing-info .sv-text-portlet-content *:first-child {
    margin-top: 0 !important;
}

.card-editing-info h2:not(:first-child), .card-editing-info .h2:not(:first-child) {
    margin-top: var(--space-medium);
}

.card-editing-info .sv-text-portlet-content *:last-child,
.card-editing-info > p:last-child,
.card-editing-info > ul:last-child {
    margin-bottom: 0;
}

/* The editing info card should not be visible in the published website */
html:not(.sv-edit-mode) .card-editing-info {
    display: none;
}

/********************************

  The card-remove-*-margin classes are used inside "Inforuta" decorations to neutralise the
  margin added by the card-body class.

********************************/

.card-remove-horizontal-margin {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
}

.card-remove-top-margin {
    margin-top: -1.25rem;
}


/********************************

  The card-move-margin class is used inside "Inforuta" decorations to make it possible to
  remove the image without losing the margin above the text content.

********************************/

.card-move-margin div.sv-image-portlet {
    margin-bottom: 0;
}

.card-move-margin .sv-text-portlet:not(:first-child) {
    margin-top: 1.25rem;
}

/********************************

  Fix margin after image in cards with no header

********************************/

.card .sv-image-portlet+.card-body {
    margin-top: -1.5rem;
}


/********************************

 Override the Sitevision width and height of YouTube videos in cards

********************************/

.card .sv-youtube-portlet .sv-video-wrapper {
    width: 100%;
}

.card .sv-youtube-portlet iframe {
    width: 100%;
    height: 100%;
}


/********************************

  Full width images and videos in cards

********************************/


/* Image and media that isn't the first child in card */

.card-move-margin .sv-image-portlet:not(:first-child),
.card-move-margin .sv-embeddedmedia-portlet:not(:first-child) {
    margin-top: 1.25rem;
}


/* Full width image or media in card are also full width in mobile */

.is-float-none-img-mobile .card-remove-horizontal-margin.sv-image-portlet {
    margin-left: -1.25rem !important;
    margin-right: -1.25rem !important;
}


/* Full width image or media as first child in card */

.card-move-margin .sv-decoration-content .card-remove-horizontal-margin.sv-image-portlet:first-child,
.card-move-margin .sv-decoration-content .card-remove-horizontal-margin.sv-embeddedmedia-portlet:first-child {
    margin-top: var(--space-medium-negative);
}


/* Full width image or media as last child in card */

.card-move-margin .sv-decoration-content .card-remove-horizontal-margin.sv-image-portlet:last-child,
.card-move-margin .sv-decoration-content .card-remove-horizontal-margin.sv-embeddedmedia-portlet:last-child {
    margin-bottom: var(--space-medium-negative);
}


/* Full width image or media as first child after header in card */

.card-move-margin .sv-text-portlet:is(:first-child) + .sv-image-portlet.card-remove-horizontal-margin,
.card-move-margin .sv-text-portlet:is(:first-child) + .sv-embeddedmedia-portlet.card-remove-horizontal-margin {
    margin-top: 0;
}