/* Elegant — refined luxury, thin fonts, generous whitespace, subtle borders.

   Selectors broadened to match every widget's per-widget naming convention. */

.compos-widget [class*="xw-"][class*="heading"],
.compos-widget [class*="xw-"][class*="-title"],
.compos-widget [class*="xw-"][class*="-name"],
.compos-widget h2, .compos-widget h3 {
    font-weight: 300;
    letter-spacing: 0.02em;
}

.compos-widget h1,
.compos-widget [class*="xw-"][class*="hero"][class*="title"] {
    font-weight: 200;
    letter-spacing: 0.04em;
}

.compos-widget .compos-btn,
.compos-widget [class*="-btn"]:not([class*="-btn-"]):not([class*="-btns"]) {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 400;
    border-width: 1px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.compos-widget .compos-btn:hover,
.compos-widget [class*="-btn"]:not([class*="-btn-"]):hover {
    letter-spacing: 0.16em;
}

.compos-widget [class*="-card"]:not([class*="-card-"]):not([class*="-cards"]):not([class*="card-h"]):not([class*="card-text"]):not([class*="card-num"]):not([class*="card-body"]):not([class*="card-meta"]):not([class*="card-cta"]):not([class*="card-stat"]):not([class*="card-head"]):not([class*="card-foot"]):not([class*="card-row"]):not([class*="card-link"]):not([class*="card-icon"]):not([class*="card-input"]):not(.cp-no-pack),
.compos-widget [class*="-panel"]:not([class*="-panel-"]):not([class*="-panels"]):not(.cp-no-pack),
.compos-widget [class*="-tile"]:not([class*="-tile-"]):not([class*="-tiles"]):not(.cp-no-pack),
.compos-widget article[class*="xw-"]:not([class*="-row"]):not([class*="-meta"]):not([class*="-list"]):not([class*="-item"]):not([class*="-stats"]):not(.cp-no-pack) {
    border: 1px solid var(--cp-border) !important;
    transition: border-color 0.4s ease;
}

/* Operator directive 2026-05-05: no hover effect on big cards (no border
   colour change either — operator wants cards completely static). */

.compos-widget img,
.compos-widget [class*="-img"]:not([class*="-img-"]),
.compos-widget [class*="-image"]:not([class*="-image-"]),
.compos-widget [class*="-photo"]:not([class*="-photo-"]) {
    border-radius: var(--cp-radius-sm, 3px);
}

.compos-widget .xw-eyebrow,
.compos-widget [class*="-eyebrow"] {
    font-weight: 400;
    letter-spacing: 0.2em;
    background: transparent !important;
    border: 1px solid var(--cp-accent);
    border-radius: 2px !important;
}

.compos-widget hr,
.compos-widget [class*="-divider"]:not([class*="-divider-"]) {
    border: none !important;
    height: 1px !important;
    background: var(--cp-border) !important;
    max-width: 80px;
    margin-left: 0;
}