/* =========================================
   LUTL CORE STYLES (A)
   Gallery, session report, charts, text blocks
   ========================================== */

/* -----------------------------------------
   ANOMALY / IMAGE GALLERY GRID
   - Wraps all gallery items in a flexible row
   - Items wrap onto new lines as needed
   - Gap controls spacing between items
   ----------------------------------------- */
.lutl-gallery-a {
    display: flex;
    flex-wrap: wrap;
    gap: 12px; /* Space between thumbnails/cards */
}

/* -----------------------------------------
   SINGLE GALLERY ITEM
   - Each anomaly/thumbnail card
   - Fixed width so the gallery is neat
   - Font size controls caption text size
   ----------------------------------------- */
.lutl-gallery-item-a {
    width: 125px;        /* Thumbnail/card width */
    text-align: center;  /* Center caption and image */
    font-size: 0.85rem;  /* Slightly smaller text under image */
}

/* -----------------------------------------
   GALLERY ITEM TITLE LINK
   - The clickable anomaly title under each thumb
   - Bold and spaced from the image
   ----------------------------------------- */
.lutl-gallery-title-a {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;      /* Semi-bold for emphasis */
    text-decoration: none; /* Remove underline by default */
}

/* -----------------------------------------
   GALLERY ITEM TITLE HOVER STATE
   - Adds underline when hovered
   - Simple visual cue it's a link
   ----------------------------------------- */
.lutl-gallery-title-a:hover {
    text-decoration: underline;
}

/* -----------------------------------------
   THUMBNAIL PLACEHOLDER
   - Used when there is no actual image
   - Creates a 125x125 box with a border
   - Centers the placeholder text
   ----------------------------------------- */
.lutl-thumb-placeholder-a {
    width: 125px;
    height: 125px;
    display: flex;
    align-items: center;    /* Vertical centering */
    justify-content: center;/* Horizontal centering */
    border: 1px solid #ccc; /* Light grey border box */
    font-size: 11px;        /* Small placeholder text */
}

/* -----------------------------------------
   SESSION REPORT WRAPPER
   - General container for a session report block
   - Top margin separates report from content above
   ----------------------------------------- */
.lutl-session-report-a {
    margin-top: 1em; /* Space above the report */
}

/* -----------------------------------------
   SESSION HEADER TEXT
   - Applies to paragraph tags within report header
   - Tightens spacing so header is compact
   ----------------------------------------- */
.lutl-session-header-a p {
    margin: 0 0 4px; /* No top margin, 4px bottom margin */
}

/* -----------------------------------------
   CHART BLOCK WRAPPER
   - Container around each chart (e.g. bar chart, radar)
   - Vertical spacing before and after charts
   ----------------------------------------- */
.lutl-chart-block-a {
    margin: 20px 0; /* Space above and below each chart block */
}

/* -----------------------------------------
   CHART CANVAS SIZING
   - Makes charts responsive
   - Caps the height so they don’t grow too tall
   ----------------------------------------- */
.lutl-chart-block-a canvas {
    max-width: 100%;   /* Chart scales to container width */
    max-height: 320px; /* Prevents overly tall charts */
}

/* -----------------------------------------
   CHART EXPLANATION TEXT
   - Small explanatory paragraph under a chart
   - Slightly smaller and softer colour
   ----------------------------------------- */
.lutl-chart-explain-a {
    font-size: 0.9rem; /* Slightly smaller than normal text */
    color: #555;       /* Medium grey for secondary info */
}

/* -----------------------------------------
   DISCLAIMER TEXT
   - For non-diagnostic / educational disclaimers
   - Smaller and lighter to visually separate from main content
   ----------------------------------------- */
.lutl-disclaimer-a {
    font-size: 0.85rem; /* Smaller than body text */
    color: #666;        /* Softer grey tone */
}