/* ===== MacDock Base ===== */

.macdock-dock {
    display: flex;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background-color: rgba(15, 15, 15, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    max-width: 100%;
    margin: 0 auto;
    transition: transform 0.25s ease-out, opacity 0.2s ease-out;
}

/* Inner flex wrapper */
.macdock-dock__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--macdock-icon-gap, 0.75rem);
}

/* Orientation: vertical */
.macdock-dock--orientation-vertical .macdock-dock__inner {
    flex-direction: column;
}

/* In editor, Gutenberg wraps InnerBlocks in block list; force row/column there too */
.macdock-dock__inner .block-editor-block-list__layout {
    display: flex;
    flex-direction: row;
    gap: var(--macdock-icon-gap, 0.75rem);
}
.macdock-dock--orientation-vertical .macdock-dock__inner .block-editor-block-list__layout {
    flex-direction: column;
}

.macdock-dock__inner .block-editor-block-list__layout > * {
    margin: 0 !important;
}

/* Logo */
.macdock-dock__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.macdock-dock__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.macdock-dock__logo-link {
    display: inline-flex;
}

/* Alignment */
.macdock-dock--align-left {
    justify-content: flex-start;
}

.macdock-dock--align-center {
    justify-content: center;
}

.macdock-dock--align-right {
    justify-content: flex-end;
}

/* Background variants */
.macdock-dock--bg-transparent {
    background-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.macdock-dock--bg-solid {
    background-color: #111827;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Sticky behavior */
.macdock-dock--sticky-desktop-top {
    position: sticky;
    top: 0.5rem;
    z-index: 999;
}

.macdock-dock--sticky-desktop-bottom {
    position: sticky;
    bottom: 0.5rem;
    z-index: 999;
}

/* Mobile sticky (rough) */
@media (max-width: 768px) {
    .macdock-dock--sticky-mobile-top {
        position: sticky;
        top: 0.5rem;
        z-index: 999;
    }

    .macdock-dock--sticky-mobile-bottom {
        position: sticky;
        bottom: 0.5rem;
        z-index: 999;
    }
}

/* Auto hide */
.macdock-dock--autohide.macdock-dock--hidden {
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
}

/* ===== Dock Icons ===== */

.macdock-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background-color: rgba(31, 41, 55, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #e5e7eb;
    font-size: 22px;
    font-weight: 500;
    overflow: hidden;
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, background-color 0.18s ease-out;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.macdock-icon__text {
    display: inline-block;
    transform: translateY(1px);
}

/* Base hover */
.macdock-icon:hover {
    background-color: rgba(55, 65, 81, 0.95);
}

/* Animations (dock-wide or per-icon override) */
.macdock-dock--anim-magnify .macdock-icon,
.macdock-icon--anim-magnify {
    /* normal state; hover below */
}

.macdock-dock--anim-magnify .macdock-icon:hover,
.macdock-icon--anim-magnify:hover {
    transform: scale(1.2) translateY(-2px);
}

@keyframes macdock-bounce {
    0% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
    60% { transform: translateY(2px); }
    100% { transform: translateY(0); }
}

.macdock-dock--anim-bounce .macdock-icon:hover,
.macdock-icon--anim-bounce:hover {
    animation: macdock-bounce 0.26s ease-out;
}

.macdock-dock--anim-glow .macdock-icon,
.macdock-icon--anim-glow {
    box-shadow: 0 0 0 rgba(56, 189, 248, 0.0);
}

.macdock-dock--anim-glow .macdock-icon:hover,
.macdock-icon--anim-glow:hover {
    box-shadow: 0 0 18px rgba(96, 165, 250, 0.8);
}

/* ===== Bento Grid ===== */

.macdock-bento-grid {
    display: grid;
    grid-template-columns: repeat(var(--macdock-cols, 4), minmax(0, 1fr));
    grid-auto-rows: minmax(60px, auto);
    gap: var(--macdock-gap, 12px);
    width: 100%;
}

/* Editor: ensure grid/slider layout applied to inner wrapper */
.macdock-bento-grid:not(.macdock-bento-grid--slider) .block-editor-block-list__layout {
    display: grid;
    grid-template-columns: repeat(var(--macdock-cols, 4), minmax(0, 1fr));
    grid-auto-rows: minmax(60px, auto);
    gap: var(--macdock-gap, 12px);
    width: 100%;
}
.macdock-bento-grid--slider .block-editor-block-list__layout {
    display: flex;
    flex-direction: row;
    gap: var(--macdock-gap, 12px);
    overflow-x: auto;
}

/* Slider variant (frontend container style) */
.macdock-bento-grid--slider {
    display: flex;
    overflow-x: auto;
    gap: var(--macdock-gap, 12px);
    padding-bottom: 0.5rem;
}

/* Slider scroll snapping (optional) */
.macdock-bento-grid--slider-snap {
    scroll-snap-type: x mandatory;
}
.macdock-bento-grid--slider-snap .macdock-bento-card {
    scroll-snap-align: start;
}

/* Slider shadow variants */
.macdock-bento-grid--slider-shadow-none .macdock-bento-card {
    box-shadow: none;
}
.macdock-bento-grid--slider-shadow-soft .macdock-bento-card {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}
.macdock-bento-grid--slider-shadow-medium .macdock-bento-card {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}
.macdock-bento-grid--slider-shadow-strong .macdock-bento-card {
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

/* Slider card sizing */
.macdock-bento-grid--slider .macdock-bento-card {
    flex: 0 0 var(--macdock-slider-card-width, 260px);
}

/* Bento Card */
.macdock-bento-card {
    position: relative;
    background-color: rgba(17, 24, 39, 0.9);
    border-radius: 18px;
    padding: 16px;
    color: #e5e7eb;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, background-color 0.18s ease-out;
    grid-column: span(var(--macdock-card-w, 1));
    grid-row: span(var(--macdock-card-h, 1));
    background-size: cover;
    background-position: center;
}

/* Force square option */
.macdock-bento-card--square {
    aspect-ratio: 1 / 1;
}

/* Overlay layer */
.macdock-bento-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--macdock-overlay-color, transparent);
    opacity: var(--macdock-overlay-opacity, 0);
    pointer-events: none;
}

/* Inner content above overlay */
.macdock-bento-card__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

/* Bento hover animation (basic lift) */
.macdock-bento-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

/* Bento link wrapper */
.macdock-bento-card__link-wrapper {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Optional small label tooltip via data-label */
.macdock-bento-card::after {
    content: attr(data-label);
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 11px;
    color: rgba(229, 231, 235, 0.6);
}