/**
 * LinkBoard – Frontend CSS
 *
 * Uses the WordPress preset CSS variables (--wp--preset--color--*,
 * --wp--preset--gradient--*) that are auto-generated from theme.json.
 * No custom variables needed.
 */

/* ============================================================
   CATEGORY HEADERS
   ============================================================ */
.hd-linkboard__category {
    text-align: center;
    margin: 2rem 0 1rem;
    position: relative;
}

.hd-linkboard__category::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(254, 254, 254, 0.1);
}

.hd-linkboard__category span {
    position: relative;
    padding: 0 1em;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wp--preset--color--bright-teal);
    background: var(--wp--preset--color--dark);
}

/* ============================================================
   PLACEHOLDER (visual separator / section label)
   Flexbox approach — works on any background, no fake line trick.
   ============================================================ */
.hd-linkboard__placeholder {
    display: flex;
    align-items: center;
    gap: 0.75em;
    margin: 1.5rem 0 0.75rem;
    color: rgba(254, 254, 254, 0.3);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.hd-linkboard__placeholder::before,
.hd-linkboard__placeholder::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(254, 254, 254, 0.1);
}

/* Label-only: span takes space between the two lines */
.hd-linkboard__placeholder span {
    white-space: nowrap;
}

/* ============================================================
   RICH CARDS
   ============================================================ */
.hd-linkboard__rich {
    display: block;
    text-decoration: none;
    color: var(--wp--preset--color--white);
    background: linear-gradient(145deg, rgba(13, 59, 94, 0.6), rgba(10, 148, 147, 0.3));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(10, 148, 147, 0.15);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hd-linkboard__rich:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(10, 148, 147, 0.2);
    border-color: rgba(10, 148, 147, 0.3);
    color: var(--wp--preset--color--white);
    text-decoration: none;
}

.hd-linkboard__rich-image {
    width: 100%;
    height: 160px;
    overflow: hidden;
}

.hd-linkboard__rich-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}

.hd-linkboard__rich:hover .hd-linkboard__rich-image img {
    transform: scale(1.05);
}

.hd-linkboard__rich-content {
    padding: 1.25rem 1.5rem;
}

/* Icon box + text side-by-side — same layout as standard cards */
.hd-linkboard__rich-body {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hd-linkboard__rich-text {
    flex: 1;
    min-width: 0;
}

/* The .hd-link-card__icon inside a rich card is slightly smaller */
.hd-linkboard__rich-body .hd-link-card__icon {
    width: 46px;
    height: 46px;
    font-size: 1.3rem;
    border-radius: 10px;
}

.hd-linkboard__rich-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 0.3em;
    line-height: 1.3;
}

.hd-linkboard__rich-sub {
    font-size: 0.85rem;
    color: var(--wp--preset--color--mid-gray);
    margin: 0 0 0.5em;
}

.hd-linkboard__rich-desc {
    font-size: 0.9rem;
    color: rgba(254, 254, 254, 0.7);
    margin: 0;
    line-height: 1.5;
}

/* ============================================================
   HIGHLIGHT STATE
   Adds a visible teal glow border — the one effect the color picker can't do.
   Title color is NOT touched here (use Schriftfarbe for that).
   ============================================================ */
.hd-linkboard__item--highlight {
    border-color: var(--wp--preset--color--bright-teal) !important;
    box-shadow: 0 0 0 1px rgba(32, 219, 167, 0.2),
                0 0 24px rgba(32, 219, 167, 0.18);
}

/* ============================================================
   SPLASH OVERLAY
   ============================================================ */
.hd-linkboard__splash-wrap {
    margin-bottom: 0.75rem;
}

.hd-linkboard__splash-trigger {
    width: 100%;
    cursor: pointer;
    border: none;
    text-align: left;
    font-family: inherit;
}

.hd-linkboard__splash-trigger .hd-link-card__arrow {
    transition: transform 300ms ease;
}

.hd-linkboard__splash-trigger[aria-expanded="true"] .hd-link-card__arrow {
    transform: rotate(180deg);
}

.hd-linkboard__splash-content {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 500ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 300ms ease;
}

.hd-linkboard__splash-content.hd-splash--open {
    max-height: 1000px;
    opacity: 1;
}

.hd-linkboard__splash-inner {
    padding: 1.5rem;
    margin-top: 0.5rem;
    background: rgba(10, 148, 147, 0.06);
    border: 1px solid rgba(10, 148, 147, 0.12);
    border-radius: 20px;
    position: relative;
}

.hd-linkboard__splash-inner .hd-link-card {
    margin-bottom: 0.5rem;
}

.hd-linkboard__splash-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(254, 254, 254, 0.1);
    color: var(--wp--preset--color--mid-gray);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 150ms ease;
}

.hd-linkboard__splash-close:hover {
    background: rgba(254, 254, 254, 0.2);
    color: var(--wp--preset--color--white);
}

/* ============================================================
   CATEGORY GROUP  (colored box wrapping same-category links)
   ============================================================ */
.hd-linkboard__cat-group {
    border: 1px solid rgba(10, 148, 147, 0.3);
    border-radius: 20px;
    padding: 0.875rem 0.875rem 0.125rem;
    margin-bottom: 1rem;
}

.hd-linkboard__cat-label {
    display: flex;
    align-items: center;
    gap: 0.45em;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin-bottom: 0.625rem;
    padding: 0 0.2rem;
    color: var(--wp--preset--color--bright-teal);
}

.hd-linkboard__cat-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
}

/* Links inside a group get a slightly tighter margin */
.hd-linkboard__cat-group .hd-link-card {
    margin-bottom: 0.5rem;
}

.hd-linkboard__cat-group .hd-linkboard__rich {
    margin-bottom: 0.5rem;
}

/* ============================================================
   LINKBOARD CONTAINER
   Transparent wrapper — the gradient + pattern come from
   the template (links.html group block), not from here.
   ============================================================ */
.hd-linkboard {
    max-width: 560px;
    margin: 0 auto;
}

/* ============================================================
   SPACER (extra margin after a link)
   ============================================================ */
.hd-linkboard__spacer {
    margin-bottom: 1.75rem !important;
}

/* ============================================================
   ANIMATIONS DISABLED (via backend toggle)
   ============================================================ */
.hd-linkboard--no-anim,
.hd-linkboard--no-anim * {
    animation: none !important;
    transition: none !important;
}

.hd-linkboard--no-anim .hd-animate {
    opacity: 1 !important;
}