/**
 * Hub Builder Frontend Styles
 *
 * Theme-Compatible - Inherits all typography from theme
 */

/* ============================================
   SCOPED CSS VARIABLES
   ============================================ */
.hub-builder-content {
    --hub-heading-color: inherit;
    --hub-columns: 1;
}

/* ============================================
   LIST LAYOUT
   ============================================ */
.hub-children-list {
    margin: 1.5em 0;
}

.hub-children-list .hub-child-item {
    margin-bottom: 1.5em;
    padding-bottom: 1.5em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.hub-children-list .hub-child-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.hub-children-list .hub-child-title {
    margin: 0 0 0.5em 0;
}

.hub-children-list .hub-child-title a {
    color: var(--hub-heading-color);
    text-decoration: none;
}

.hub-children-list .hub-child-title a:hover {
    text-decoration: underline;
}

.hub-children-list .hub-child-excerpt {
    margin: 0;
}

/* ============================================
   GRID LAYOUT
   ============================================ */
.hub-children-grid {
    display: grid;
    grid-template-columns: repeat(var(--hub-columns), 1fr);
    gap: 1.5em;
    margin: 1.5em 0;
}

.hub-children-grid .hub-child-item {
    padding: 1.25em;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.hub-children-grid .hub-child-title {
    margin: 0 0 0.5em 0;
}

.hub-children-grid .hub-child-title a {
    color: var(--hub-heading-color);
    text-decoration: none;
}

.hub-children-grid .hub-child-title a:hover {
    text-decoration: underline;
}

.hub-children-grid .hub-child-excerpt {
    margin: 0;
}

/* ============================================
   CARDS LAYOUT
   ============================================ */
.hub-children-cards {
    display: grid;
    grid-template-columns: repeat(var(--hub-columns), 1fr);
    gap: 1.5em;
    margin: 1.5em 0;
}

.hub-children-cards .hub-child-item {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

.hub-children-cards .hub-child-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.hub-children-cards .hub-child-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hub-children-cards .hub-child-content {
    padding: 1.25em;
}

.hub-children-cards .hub-child-title {
    margin: 0 0 0.5em 0;
}

.hub-children-cards .hub-child-title a {
    color: var(--hub-heading-color);
    text-decoration: none;
}

.hub-children-cards .hub-child-title a:hover {
    text-decoration: underline;
}

.hub-children-cards .hub-child-excerpt {
    margin: 0 0 1em 0;
}

.hub-children-cards .hub-child-link {
    color: var(--hub-heading-color);
    text-decoration: none;
}

.hub-children-cards .hub-child-link:hover {
    text-decoration: underline;
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */
@media screen and (max-width: 768px) {
    .hub-children-grid,
    .hub-children-cards {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .hub-children-list,
    .hub-children-grid,
    .hub-children-cards {
        display: block;
    }

    .hub-child-item {
        break-inside: avoid;
        margin-bottom: 1em;
    }
}