/*****************************************************************************/

.figure-grid {
    display         : flex;
    justify-content : space-around;
    flex-direction  : row;
    flex-wrap       : wrap;
    align-items     : center;
    margin-top      : 1.1em;
    margin-bottom   : 1.1em;
    max-width       : 100%;
}

.figure-grid figure {
    margin: 1.1em;
}
.figure-grid figure img {
    max-width: 100%;
}

/*****************************************************************************/

.float-right {
    display : block;
    float   : right;
    margin  : 0 0 1.1em 1.1em;
}

/*****************************************************************************/

.fotobutton {
    display               : grid;
    height                : 270px;
    width                 : 302px;
    margin                : 20px;
    grid-template-columns : 1fr;
    grid-template-rows    : 190px 80px;
    grid-template-areas:
            "area_fotobutton_img"
            "area_fotobutton_button";
}

.fotobutton figure {
    grid-area    : area_fotobutton_img;
    display      : block;
    position     : relative;
    margin       : 0;
    align-self   : stretch;
    justify-self : stretch;
    height       : 100%;
    width        : 100%;
    overflow     : hidden;
}

.fotobutton figure figcaption {
    position    : absolute;
    bottom      : 0;
    left        : 0;
    width       : 100%;
    padding     : 14px 14px 14px 26px;
    color       : var(--white);
    font-size   : var(--fs-headings);
    font-family : Sitka Banner, serif;
    line-height : 1.08;
    z-index     : 10;
}

.fotobutton figure figcaption.alert {
    text-align : right;
}

.fotobutton figure figcaption.alert::before {
    display    : block;
    content    : ""; /* empty but necessary */
    position   : absolute;
    bottom     : 0;
    right      : 0;
    z-index    : -1;
    background : url("/images/alert_triangle-f1c0773bcec4b984cd124b1dcc874abc.svg") no-repeat bottom right;
    height     : 152px;
    width      : 302px;
}

.fotobutton button.btn-promo {
    grid-area    : area_fotobutton_button;
    align-self   : stretch;
    justify-self : stretch;
    margin       : 0;
}

/*****************************************************************************/

.note {
    font-size  : var(--fs-secondary);
}

fieldset .note {
    margin-bottom : 15px;
}

.note-warning {
    color: red;
}

.note-warning::before {
    content: "⚠️ ";
}

/*****************************************************************************/

section footer {
    font-size  : var(--fs-secondary);
    text-align : right;
}

/******************************************************************************/

.handicap-positive {
    color: #008800;
}

.handicap-negative {
    color: #cc0000;
}

/******************************************************************************/

.comma:not(:last-of-type)::after {
    content: ", ";
}

.comma:nth-last-of-type(2)::before {
    content: none;
}

/******************************************************************************/

button.boatInfo {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
.boatInfo {
    display : grid;
    grid-template-columns: 1fr auto;
    grid-auto-rows: auto;
    padding: 0.4rem .8rem;
    gap: 0.3rem;
    background-color: var(--pale-grey);
    margin-top: .5em;
    margin-bottom: .5em;
}
.boatInfo .boat {
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
}
.boatInfo .boatName {
    font-weight: bold;
}
.boatInfo .sailNumber:not(:empty)::before {
    content: " – ";
}
.boatInfo .boatClass {
    grid-row: 2 / span 1;
    grid-column: 1 / span 1;
    font-size: var(--fs-secondary);
}
.boatInfo .additionalSpec:not(:empty)::before {
    content: "[";
}
.boatInfo .additionalSpec:not(:empty)::after {
    content: "]";
}
.boatInfo .crew {
    grid-row: 3 / span 1;
    grid-column: 1 / -1;
    font-size: var(--fs-secondary);
    font-style: italic;
}
.boatInfo .btn {
    grid-row: 1 / span 2;
    grid-column: 2 / span 1;
    justify-self: right;
    align-self: center;
}

.updated:after {
    content: "❗️";
}

/*******************************************************************************
 * WebSocket status indicator (shared)
 ******************************************************************************/

.ws-status {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
}

/* Status-specific content via CSS pseudo-elements */
.ws-status::before {
    margin-right: 0.3em;
}

.ws-status.connecting {
    background-color: #FFFACD;
    color: #8B8000;
    /* Tooltip text stored in custom property for JS access */
    --tooltip: 'Verbindung wird hergestellt...';
}
.ws-status.connecting::before {
    content: '◌';
}
.ws-status.connecting::after {
    content: 'Verbinde...';
}

.ws-status.connected {
    background-color: #90EE90;
    color: #006400;
    --tooltip: 'Echtzeit-Updates aktiv';
}
.ws-status.connected::before {
    content: '●';
}
.ws-status.connected::after {
    content: 'Live';
}

.ws-status.disconnected {
    background-color: #FFB6C1;
    color: #8B0000;
    --tooltip: 'Verbindung unterbrochen - Versuche erneut...';
}
.ws-status.disconnected::before {
    content: '○';
}
.ws-status.disconnected::after {
    content: 'Offline';
}