/* Ribbon card (GenPageBuilder 02.07.00): cofo.edu, School of the Ozarks, the museum and Bobcats.
   Drawn by Views/CardButton/Display/Ribbon.cshtml. Class names start with gpbc- so Bootstrap's
   .card and .media rules cannot reach them. The Keeter Center keeps keeter-button-style.css. */

/* ---------- Site colors: the card reads only these ---------- */
.gpbc-t-cofo {
    --gpbc-c1: #710a2c; --gpbc-c1-fold: #4a0620;
    --gpbc-c2: #00455d; --gpbc-c2-fold: #002c3c;
    --gpbc-c3: #383839; --gpbc-c3-fold: #1e1e1f;
    --gpbc-title-font: "Times New Roman", Times, serif; --gpbc-title-track: .12em; --gpbc-title-weight: 500;
    --gpbc-body-font: Inter, Arial, sans-serif;
    --gpbc-mat: #d6d1cb; --gpbc-muted: #5d5a57;
}
.gpbc-t-sofo {
    --gpbc-c1: #0d223f; --gpbc-c1-fold: #06121f;
    --gpbc-c2: #ac162c; --gpbc-c2-fold: #6e0d1b;
    --gpbc-c3: #383839; --gpbc-c3-fold: #1e1e1f;
    --gpbc-title-font: "Times New Roman", Times, serif; --gpbc-title-track: .1em; --gpbc-title-weight: 500;
    --gpbc-body-font: Inter, Arial, sans-serif;
    --gpbc-mat: #cfd4db; --gpbc-muted: #4f5866;
}
.gpbc-t-museum {
    --gpbc-c1: #407d7e; --gpbc-c1-fold: #275051;
    --gpbc-c2: #576260; --gpbc-c2-fold: #363d3c;
    --gpbc-c3: #383839; --gpbc-c3-fold: #1e1e1f;
    --gpbc-title-font: "Times New Roman", Times, serif; --gpbc-title-track: .1em; --gpbc-title-weight: 500;
    --gpbc-body-font: Arial, sans-serif;
    --gpbc-mat: #d3dad8; --gpbc-muted: #576260;
}

/* ---------- Layout: every card in a row is as tall as the tallest ---------- */
.gen-article-section > .filled-section:has(> .gpbc-holder) { height: 100%; }
.gpbc-holder { height: 100%; padding: 0 8px 24px; box-sizing: border-box; }

/* ---------- The card ---------- */
.gpbc-card, .gpbc-card *, .gpbc-card *::before, .gpbc-card *::after { box-sizing: border-box; }
.gpbc-card {
    --gpbc-c: var(--gpbc-c1); --gpbc-f: var(--gpbc-c1-fold);
    display: flex; flex-direction: column; height: 100%; width: 100%;
    padding: clamp(10px, 5%, 18px);
    border: 1px solid var(--gpbc-mat); background: #fff;
    font-family: var(--gpbc-body-font); color: inherit; text-decoration: none;
    container-type: inline-size;
    transition: border-color .2s ease;
}
.gpbc-card.gpbc-c2 { --gpbc-c: var(--gpbc-c2); --gpbc-f: var(--gpbc-c2-fold); }
.gpbc-card.gpbc-c3 { --gpbc-c: var(--gpbc-c3); --gpbc-f: var(--gpbc-c3-fold); }
a.gpbc-card:hover, a.gpbc-card:focus-visible { border-color: var(--gpbc-c); text-decoration: none; color: inherit; }
a.gpbc-card:focus-visible { outline: 2px solid var(--gpbc-c); outline-offset: 3px; }

.gpbc-media { position: relative; display: block; min-width: 0; padding-bottom: 22px; }
.gpbc-frame { border: 1px solid var(--gpbc-mat); padding: 6px; background: #fff; }
.gpbc-ph { aspect-ratio: 4 / 3; overflow: hidden; }
.gpbc-ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
a.gpbc-card:hover .gpbc-ph img, a.gpbc-card:focus-visible .gpbc-ph img { transform: scale(1.04); }
.gpbc-whole .gpbc-ph { background: #fff; }
.gpbc-whole .gpbc-ph img { object-fit: contain; padding: 8% 10%; }
a.gpbc-card.gpbc-whole:hover .gpbc-ph img { transform: none; }

/* The name sits on a swallowtail ribbon that hangs past the frame; on hover it runs the full width. */
.gpbc-ribbon {
    position: absolute; left: -9px; bottom: 0;
    max-width: calc(100% + 9px); min-width: 58%;
    padding: 10px 30px 10px 18px;
    background: var(--gpbc-c); color: #fff;
    font: var(--gpbc-title-weight) 15px/1.25 var(--gpbc-title-font);
    letter-spacing: var(--gpbc-title-track); text-transform: uppercase;
    word-break: normal; overflow-wrap: normal; hyphens: manual;
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%);
    transition: min-width .3s ease;
}
.gpbc-fold { position: absolute; left: -9px; bottom: -8px; width: 0; height: 0; border-top: 8px solid var(--gpbc-f); border-left: 9px solid transparent; }
a.gpbc-card:hover .gpbc-ribbon, a.gpbc-card:focus-visible .gpbc-ribbon { min-width: calc(100% + 9px); }

.gpbc-desc { font: 400 14.5px/1.45 var(--gpbc-body-font); color: var(--gpbc-muted); margin: 14px 2px 0; }

/* The action label sits on the bottom edge, so labels line up across a row. */
.gpbc-act {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: auto; padding-top: 12px; align-self: flex-start;
    font: 600 14px/1 var(--gpbc-body-font); color: var(--gpbc-c);
}
.gpbc-act svg { width: 14px; height: 14px; transition: transform .2s ease; }
a.gpbc-card:hover .gpbc-act svg, a.gpbc-card:focus-visible .gpbc-act svg { transform: translateX(3px); }
.gpbc-off { cursor: default; }
.gpbc-off .gpbc-act { color: var(--gpbc-muted); font-weight: 500; font-style: italic; }
.gpbc-off .gpbc-ph img { filter: grayscale(.55); }

/* Narrow columns (four across): smaller ribbon text so long names still fit. */
@container (max-width: 220px) {
    .gpbc-ribbon { font-size: 12.5px; letter-spacing: .06em; padding: 8px 22px 8px 12px; }
    .gpbc-desc { font-size: 13.5px; }
}
@media (max-width: 767px) { .gpbc-ribbon { font-size: 13.5px; padding: 8px 24px 8px 14px; } }
@media (prefers-reduced-motion: reduce) { .gpbc-card, .gpbc-card * { transition: none !important; } }

/* ---------- Color tile: cards with no photo (a solid maroon/blue/gray box image) ---------- */
.gpbc-tile {
    --gpbc-c: var(--gpbc-c1); --gpbc-f: var(--gpbc-c1-fold);
    position: relative; display: flex; flex-direction: column; gap: 6px;
    height: 100%; min-height: 132px; width: 100%; box-sizing: border-box;
    padding: 18px 20px 34px;
    background: var(--gpbc-c); color: #fff; text-decoration: none;
    font-family: var(--gpbc-body-font);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 16px), 0 100%);
    transition: background-color .2s ease;
}
.gpbc-tile.gpbc-c2 { --gpbc-c: var(--gpbc-c2); --gpbc-f: var(--gpbc-c2-fold); }
.gpbc-tile.gpbc-c3 { --gpbc-c: var(--gpbc-c3); --gpbc-f: var(--gpbc-c3-fold); }
a.gpbc-tile:hover, a.gpbc-tile:focus-visible { background: var(--gpbc-f); color: #fff; text-decoration: none; }
a.gpbc-tile:focus-visible { outline: 2px solid var(--gpbc-c); outline-offset: 3px; }
.gpbc-tile-title {
    font: var(--gpbc-title-weight) 17px/1.3 var(--gpbc-title-font);
    letter-spacing: var(--gpbc-title-track); text-transform: uppercase;
}
.gpbc-tile-title::before { content: ""; display: block; width: 26px; height: 2px; background: rgba(255, 255, 255, .65); margin-bottom: 12px; }
.gpbc-tile-desc { font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .85); }
.gpbc-tile-act { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; font: 600 14px/1 var(--gpbc-body-font); }
.gpbc-tile-act svg { width: 14px; height: 14px; }

/* Card edit form preview: the preview card gets a real width inside the flex preview box. */
.button-edit-display > .gpbc-preview { flex: 0 1 340px; width: 340px; max-width: 100%; }
.gpbc-preview .gpbc-tile { min-height: 150px; }

/* ---------- Card grid (02.07.00): one section, many cards, one height per row ---------- */
.gpbc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; align-items: stretch; }
.gpbc-grid.gpbc-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gpbc-grid.gpbc-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 18px; }
.gpbc-grid-cell { min-width: 0; display: flex; }
.gpbc-grid-cell > * { flex: 1 1 auto; }
.gpbc-grid .gpbc-holder { padding: 0; }
.gpbc-grid .gpb-keeterButton.rectangle { max-width: none; }
.gpbc-grid-empty { padding: 18px; border: 1px dashed #bbb; color: #555; font-family: Inter, Arial, sans-serif; }
@media (max-width: 991px) { .gpbc-grid, .gpbc-grid.gpbc-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .gpbc-grid, .gpbc-grid.gpbc-cols-2, .gpbc-grid.gpbc-cols-4 { grid-template-columns: 1fr; } }

/* ---------- Cover look (02.07.00): the whole image in a thin frame, the name below, no ribbon ---------- */
/* Covers fit a 4:3 box (logos and mixed shapes line up); a grid of only portrait covers (a magazine
   shelf) shows them at their own shape. CardGrid/Display.cshtml marks such grids gpbc-portrait-covers. */
.gpbc-cover .gpbc-cover-box { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: #fff; overflow: hidden; }
.gpbc-portrait-covers .gpbc-cover .gpbc-cover-box { aspect-ratio: auto; display: block; }
.gpbc-cover .gpbc-cover-box img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.gpbc-portrait-covers .gpbc-cover .gpbc-cover-box img { width: 100%; max-height: none; }
.gpbc-cover-title { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; color: var(--gpbc-c);
    font: var(--gpbc-title-weight) 15px/1.3 var(--gpbc-title-font); letter-spacing: var(--gpbc-title-track); text-transform: uppercase; }
.gpbc-cover-title::before { content: ""; flex: none; width: 18px; height: 2px; background: currentColor; transform: translateY(-4px); transition: width .25s ease; }
a.gpbc-cover:hover .gpbc-cover-title::before, a.gpbc-cover:focus-visible .gpbc-cover-title::before { width: 34px; }
.gpbc-cover .gpbc-desc { display: block; margin-top: 6px; }


/* ---------- Card edit form layout (02.07.00): fields in one full-width column, preview beside it ---------- */
.gpbc-card-form { display: grid !important; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 28px; margin: 0; align-items: start; }
.gpbc-card-form > #notSpecificForms,
.gpbc-card-form > #specificForms { grid-column: 1; width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; border: 0 !important; }
.gpbc-card-form > #demoButtonSection { grid-column: 2; grid-row: 1 / span 2; width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important;
    position: sticky; top: 0; align-self: start; }
.gpbc-card-form .form-floating > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gpbc-card-form .form-floating > textarea.form-control { height: 96px; }
.gpbc-card-form .form-text { margin-top: 2px; }
.gpbc-card-form #demoButtonSection .button-container { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 14px; }
.gpbc-card-form #demo-button-container { display: flex; justify-content: center; }
.gpbc-card-form .button-edit-display > .gpbc-preview { flex: 0 1 320px; width: 320px; }
@media (max-width: 700px) {
    .gpbc-card-form { grid-template-columns: minmax(0, 1fr); }
    .gpbc-card-form > #demoButtonSection { grid-column: 1; grid-row: auto; position: static; }
}