/* ==========================================================================
   layout.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page title
   -------------------------------------------------------------------------- */
.page-title {
    font-size: var(--font-size-extra-large);
    font-weight: 700;
    padding: var(--space-large) var(--space-large) 0 var(--space-large);
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Box grid — masonry-like reflow
   -------------------------------------------------------------------------- */
.box-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-large);
    padding: var(--space-large);
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}

.box-curve-path {
    stroke: var(--color-border);
    stroke-width: 0.0625rem;
    fill: none;
}

/* --------------------------------------------------------------------------
   Individual content box
   -------------------------------------------------------------------------- */
.content-box {
    max-width: var(--box-max-width, 60rem);
    min-width: var(--box-grid-min-width);
    width: fit-content;
    box-sizing: border-box;
    background-color: var(--color-background);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--space-large);
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
    position: relative;
    z-index: 1;
}

.content-box__content img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius);
}

.content-box__content p {
    margin-bottom: var(--space-medium);
}

.content-box__content p:last-child {
    margin-bottom: 0;
}

.content-box__content p:has(> a.glightbox) {
    margin-bottom: var(--space-medium);
}

.content-box__content table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-medium);
    margin-bottom: var(--space-medium);
}

.content-box__content th {
    background-color: var(--color-background-hover);
    font-weight: 600;
    padding: var(--space-small) var(--space-medium);
    text-align: left;
    border-bottom: 0.125rem solid var(--color-border);
}

.content-box__content td {
    padding: var(--space-small) var(--space-medium);
    border-bottom: 0.0625rem solid var(--color-border);
}

.content-box__content tr:last-child td {
    border-bottom: none;
}

.content-box__content table {
    overflow-x: auto;
    display: block;
}

/* --------------------------------------------------------------------------
   Text layout
   -------------------------------------------------------------------------- */
.content-box__text {
    line-height: var(--line-height);
    font-size: var(--font-size-medium);
    color: var(--color-text);
}

.content-box__text h2 {
    font-size: var(--font-size-large);
    font-weight: 700;
    margin-bottom: var(--space-medium);
}

.content-box__text h3 {
    font-size: var(--font-size-medium);
    font-weight: 600;
    margin-bottom: var(--space-small);
}

.content-box__text p {
    margin-bottom: var(--space-medium);
}

.content-box__text p:last-child {
    margin-bottom: 0;
}

.content-box__text ul,
.content-box__text ol {
    padding-left: var(--space-large);
    margin-bottom: var(--space-medium);
}

/* --------------------------------------------------------------------------
   Image layout
   -------------------------------------------------------------------------- */
.content-box__figure {
    margin: 0;
    width: 100%;
}

.content-box__image {
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    border-radius: var(--border-radius);
}

.content-box__caption {
    margin-top: var(--space-small);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    text-align: center;
}