/*
 * Mitgeliefertes Basis-Styling (Netzhirsch-Konvention: am Modul/Element per Checkbox
 * "netzhirschAddDefaultStyling" abwaehlbar, Default an).
 *
 * Bewusst niedrige Spezifitaet und komplett auf die Wrapper-Klassen der eigenen
 * Fragmente gescoped - das Projekt-Theme kann alles ohne !important ueberschreiben,
 * und nichts leakt global. Contao 5 vergibt "module-<typ>" bzw. "content-<typ>"; die
 * mod_-Selektoren decken Projekte mit Legacy-Templates ab.
 */

.module-netzhirsch-referencelist,
.module-netzhirsch-referencereader,
.module-netzhirsch-referencefilter,
.content-netzhirsch-reference-teaser,
.mod_netzhirsch_referencelist,
.mod_netzhirsch_referencereader,
.mod_netzhirsch_referencefilter {
    --nh-reference-gap: 1.5rem;
    --nh-reference-radius: .5rem;
    --nh-reference-border: rgba(0, 0, 0, .12);
    --nh-reference-muted: rgba(0, 0, 0, .6);
    --nh-reference-accent: currentColor;
    --nh-reference-surface: rgba(0, 0, 0, .06);
}

/* ---------------------------------------------------------------- Raster */

.reference-list,
.reference-teaser {
    display: grid;
    gap: var(--nh-reference-gap);
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    margin: 0;
    padding: 0;
}

.reference-teaser--slider {
    grid-auto-flow: column;
    grid-auto-columns: minmax(16rem, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.reference-teaser--slider > * {
    scroll-snap-align: start;
}

/* ------------------------------------------------------------------ Item */

.reference-item {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    border: 1px solid var(--nh-reference-border);
    border-radius: var(--nh-reference-radius);
    overflow: hidden;
}

.reference-item--featured {
    border-color: var(--nh-reference-accent);
}

.reference-item__media img {
    display: block;
    width: 100%;
    height: auto;
}

.reference-item__body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem;
}

/*
 * Kundenlogos kommen in jedem denkbaren Seitenverhaeltnis - quer, quadratisch,
 * hoch. Deshalb die Hoehe begrenzen und die Breite folgen lassen, statt eine
 * Box vorzugeben: so sprengt kein breites Logo die Karte, und ein schmales
 * wird nicht verzerrt. Der Abstand kommt aus dem gap von __body.
 */
.reference-item__logo {
    margin: 0;
}

.reference-item__logo img {
    display: block;
    width: auto;
    max-width: 60%;
    max-height: 2rem;
    object-fit: contain;
}

.reference-item__customer,
.reference-item__subtitle {
    margin: 0;
    color: var(--nh-reference-muted);
    font-size: .875em;
}

.reference-item__title {
    margin: 0;
    font-size: 1.125em;
    line-height: 1.3;
}

.reference-item__teaser > :first-child {
    margin-top: 0;
}

.reference-item__teaser > :last-child {
    margin-bottom: 0;
}

.reference-item__categories {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.reference-item__category {
    padding: .125rem .5rem;
    border: 1px solid var(--nh-reference-border);
    border-radius: 999px;
    font-size: .75em;
}

/* -------------------------------------------------------- Kennzahlen */

.reference-item__metrics,
.reference-reader__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nh-reference-gap);
    margin: 0;
}

.reference-item__metric dt,
.reference-reader__metric dt {
    color: var(--nh-reference-muted);
    font-size: .75em;
}

.reference-item__metric dd,
.reference-reader__metric dd {
    margin: 0;
    font-size: 1.25em;
    font-weight: 700;
}

/* ---------------------------------------------------------------- Reader */

.reference-reader {
    display: flex;
    flex-direction: column;
    gap: var(--nh-reference-gap);
}

.reference-reader__header-media img,
.reference-reader__logo img {
    display: block;
    max-width: 100%;
    height: auto;
}

.reference-reader__logo img {
    max-height: 4rem;
    width: auto;
}

.reference-reader__customer,
.reference-reader__subtitle {
    margin: 0;
    color: var(--nh-reference-muted);
}

.reference-reader__title {
    margin: .25rem 0;
}

.reference-reader__taxonomy {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nh-reference-gap);
    margin: 0;
}

.reference-reader__facet dt {
    color: var(--nh-reference-muted);
    font-size: .75em;
}

.reference-reader__facet dd {
    margin: 0;
}

.reference-reader__testimonial {
    margin: 0;
    padding: 1.25rem;
    border-left: 3px solid var(--nh-reference-accent);
    background: rgba(0, 0, 0, .03);
}

.reference-reader__testimonial blockquote {
    margin: 0;
    font-size: 1.125em;
}

.reference-reader__testimonial figcaption {
    margin-top: .75rem;
    color: var(--nh-reference-muted);
    font-size: .875em;
}

.reference-reader__testimonial-role::before {
    content: ", ";
}

.reference-reader__rating {
    margin: .5rem 0 0;
    letter-spacing: .1em;
}

.reference-reader__gallery {
    display: grid;
    gap: var(--nh-reference-gap);
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.reference-reader__gallery img {
    display: block;
    width: 100%;
    height: auto;
}

.reference-reader__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nh-reference-gap);
    align-items: center;
}

/* ---------------------------------------------------------------- Filter */

.reference-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nh-reference-gap);
}

.reference-filter__group-label {
    margin: 0 0 .375rem;
    color: var(--nh-reference-muted);
    font-size: .75em;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.reference-filter__options {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --------------------------------------------------------------- Links
 *
 * Alle Links dieses Bundles tragen eine Klasse. Das ist Absicht: viele Themes -
 * auch das der Contao-Demo - formatieren Links mit "a:not([class])" und nehmen
 * klassenbehaftete Links damit bewusst aus. Ohne Klasse gewinnt diese
 * Theme-Regel bei gleicher Spezifitaet, weil ihr Stylesheet spaeter laedt, und
 * ein geerbter Unterstrich zerlegt jedes Pill-Element.
 *
 * Die Kehrseite muss man mitnehmen: unsere Links erben dann auch keine
 * Theme-Farbe mehr und fielen ohne diese Regel auf Browser-Blau zurueck.
 */
.reference-filter__link,
.reference-filter__reset-link,
.reference-item__link,
.reference-reader__cta,
.reference-reader__back {
    color: inherit;
    text-decoration: none;
}

/* Titel im Listeneintrag: Unterstrich erst beim Hovern. */
.reference-item__link:hover {
    text-decoration: underline;
}

.reference-filter__link {
    display: inline-block;
    padding: .25rem .75rem;
    border: 1px solid var(--nh-reference-border);
    border-radius: 999px;
    font-size: .875em;
    text-decoration: none;
}

.reference-filter__option--active .reference-filter__link {
    border-color: var(--nh-reference-accent);
    font-weight: 700;
}

/*
 * Zuruecksetzen ist eine andere Art von Aktion als eine Facette: es waehlt
 * nichts aus, es raeumt auf. Deshalb dieselbe Pill-Form wie die Optionen -
 * damit es als Bedienelement erkennbar ist und nicht als verirrter Link - aber
 * gedaempfte Schrift, damit es die Auswahl nicht ueberstrahlt. Volle Farbe und
 * Akzentrahmen erst beim Hovern.
 *
 * Bewusst ohne eingefuegtes x-Zeichen: content im ::before wird von manchen
 * Screenreadern mitgelesen, und ein Icon ist Sache des Projekt-Themes.
 */
.reference-filter__reset {
    /* p-Standardabstand raus - der Abstand kommt aus dem gap des Containers. */
    margin: 0;
    /* Auf Hoehe der Pills, nicht auf Hoehe der Gruppen-Labels. */
    align-self: flex-end;
}

.reference-filter__reset-link {
    display: inline-block;
    padding: .25rem .75rem;
    border: 1px solid var(--nh-reference-border);
    border-radius: 999px;
    color: var(--nh-reference-muted);
    font-size: .875em;
}

.reference-filter__reset-link:hover {
    border-color: var(--nh-reference-accent);
    color: inherit;
}

.reference-filter__link:focus-visible,
.reference-filter__reset-link:focus-visible,
.reference-item__link:focus-visible,
.reference-reader__cta:focus-visible,
.reference-reader__back:focus-visible {
    outline: 2px solid var(--nh-reference-accent);
    outline-offset: 2px;
}

/* Der Handlungsaufruf ist die Hauptaktion der Detailseite - klar als Schaltflaeche. */
.reference-reader__cta {
    display: inline-block;
    padding: .5rem 1.25rem;
    border: 1px solid var(--nh-reference-accent);
    border-radius: var(--nh-reference-radius);
    font-weight: 700;
}

.reference-reader__cta:hover {
    background: var(--nh-reference-surface);
}

/* "Zurueck zur Uebersicht" ist sekundaer und darf sich zurueckhalten. */
.reference-reader__back {
    color: var(--nh-reference-muted);
    font-size: .875em;
}

.reference-reader__back:hover {
    color: inherit;
    text-decoration: underline;
}

/* ------------------------------------------------------------ Leerzustand */

.reference-list__empty,
.reference-teaser__empty {
    margin: 0;
    color: var(--nh-reference-muted);
}

/* Ladezustand waehrend eines AJAX-Filterwechsels (siehe frontend.js). */
[data-netzhirsch-reference-list].is-loading,
[data-netzhirsch-reference-filter].is-loading {
    opacity: .55;
    transition: opacity .15s ease-in-out;
}