/* Styles for the case list page (templates/cases.html) */

/* The three case grids share one size: cards are 396x234 with 80px gutters
   on wide screens and shrink together on narrower ones, so the third column
   never runs off the side of a 1024 to 1366px laptop. */
:root {
  --case-grid-columns: minmax(0, 396px) minmax(16px, 80px) minmax(0, 396px) minmax(16px, 80px) minmax(0, 396px);
  --case-grid-width: min(1348px, calc(100% - 48px));
}
        html {
            margin: 0;
            height: 100%;
        }
        body {
          background-color: #121e21;
          margin: 0;
          padding: 0;
         }
         .page-header {
            visibility: hidden;
            background-image: url('/static/cases-header.png');
            background-color: #121e21;
            background-repeat: no-repeat;                   
            background-position: center;                     
            /* Full 100px tall on wide screens. Below about 1100px the title's
               right end would run under the About and Feedback buttons, so it
               shrinks with the window (down to 56px tall) to keep clear. */
            background-size: auto clamp(56px, 17.5vw - 91px, 100px);
            position: fixed;             /* stays at the top while you scroll */
            top: 0px;
            left: 0;
            width: 100%;
            height: 100px;                /* adjust as you like */
            line-height: 70px;           /* vertically center text */
            z-index: 1000;               /* above everything else */
        }
        .case-container {
            visibility: hidden;
            display: grid;
            grid-template-columns: var(--case-grid-columns);
            grid-template-rows: auto 50px auto;
            gap: 0;
            margin: 40px auto 0;
            width: var(--case-grid-width);
        }
        .case-container .case-button.case1 { grid-column: 1; grid-row: 1; }
        .case-container .case-button.case2 { grid-column: 3; grid-row: 1; }
        .case-container .case-button.case3 { grid-column: 5; grid-row: 1; }
        .case-container .case-button.case14 { grid-column: 1; grid-row: 3; }
        .case-container .case-button.case15 { grid-column: 3; grid-row: 3; }
        .case-container .case-button.case16 { grid-column: 5; grid-row: 3; }
        .case-medium-grid {
            visibility: hidden;
            display: grid;
            grid-template-columns: var(--case-grid-columns);
            grid-template-rows: auto 50px auto;
            margin: 50px auto 0;
            width: var(--case-grid-width);
        }
        /* Row 1: case4, case5, case6. Row 2: case10, case11, case12 */
        .case-medium-grid .case-button.case4 { grid-column: 1; grid-row: 1; }
        .case-medium-grid .case-button.case5 { grid-column: 3; grid-row: 1; }
        .case-medium-grid .case-button.case6 { grid-column: 5; grid-row: 1; }
        .case-medium-grid .case-button.case10 { grid-column: 1; grid-row: 3; }
        .case-medium-grid .case-button.case11 { grid-column: 3; grid-row: 3; }
        .case-medium-grid .case-button.case12 { grid-column: 5; grid-row: 3; }
        .case-container3 {
            visibility: hidden;
            display: grid;
            grid-template-columns: var(--case-grid-columns);
            grid-template-rows: auto 50px auto;
            gap: 0;
            margin: 50px auto 20px;
            width: var(--case-grid-width);
        }
        .case-container3 .case-button.case7 { grid-column: 1; grid-row: 1; }
        .case-container3 .case-button.case8 { grid-column: 3; grid-row: 1; }
        .case-container3 .case-button.case9 { grid-column: 5; grid-row: 1; }
        .case-container3 .case-button.case13 { grid-column: 1; grid-row: 3; }
        .case-container3 .case-button.case17 { grid-column: 5; grid-row: 3; }
        .case-container3 .case-button.case18 { grid-column: 3; grid-row: 3; }
        .sr-only {
            position: absolute !important;
            width: 1px; height: 1px;
            padding: 0; margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        .case-button {
            display: block;              /* anchors are inline by default; size like the old button */
            text-decoration: none;
            color: inherit;
            width: 100%;
            height: auto;
            aspect-ratio: 396 / 234;
            border: none;
            cursor: pointer;
            background-color: #121e21;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 10px;
            overflow: hidden;
            isolation: isolate;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
            position: relative;
        }

        .case-button:hover {
            transform: scale(1.05);
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
            filter: brightness(1.1);
        }

        .case-button:hover::after {
            content: "";
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            border-radius: 10px;
            border: 2px solid rgba(255, 215, 0, 0.4);
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
            pointer-events: none;
        }


.case-button:active {
    transform: scale(0.97);
    box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
}
        /* "Start here" corner ribbon on Case 1, so first-time visitors know
           where to begin. Styling only: the link itself is unchanged. */
        .case-button.case1::before,
        .case-button.is-solved::before {
            content: "START HERE";
            position: absolute;
            top: 26px;
            right: -44px;
            z-index: 2;
            width: 170px;
            padding: 6px 0;
            background: #d4af37;
            color: #1a1a1a;
            font: bold 12px 'Courier New', monospace;
            letter-spacing: 0.12em;
            text-align: center;
            transform: rotate(45deg);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
            pointer-events: none;
        }
        .case1 {
            background-image: url('/static/case_1.jpg');
        }
        .case2 {
            background-image: url('/static/case_2.jpg');
        }
        .case3 {
            background-image: url('/static/case_3.jpg');
        }
        .case14 {
            background-image: url('/static/case_14.jpg');
        }
        .case15 {
            background-image: url('/static/case_15.jpg');
        }
        .case16 {
            background-image: url('/static/case_16.jpg');
            /* Keep natural aspect ratio (cover). Shift right and clip left to remove white-line artifact. */
            background-size: cover;
            background-position: 52% 50%;
            clip-path: inset(0 0 0 3px);
            -webkit-clip-path: inset(0 0 0 3px);
        }
        .case4 {
            background-image: url('/static/case_4.jpg');
        }
        .case5 {
            background-image: url('/static/case_5.jpg');
        }
        .case6 {
            background-image: url('/static/case_6.jpg');
        }
        .case7 {
            background-image: url('/static/case_7.jpg');
        }
        .case8 {
            background-image: url('/static/case_8.jpg');
        }
        .case9 {
            background-image: url('/static/case_9.jpg');
        }
        .case10 {
            background-image: url('/static/case_10.jpg');
        }
        .case11 {
            background-image: url('/static/case_11.jpg');
        }
        .case12 {
            background-image: url('/static/case_12.jpg');
        }
        .case13 {
            background-image: url('/static/case_13.jpg');
        }
        .case17 {
            background-image: url('/static/case_17.jpg');
        }
        .case18 {
            background-image: url('/static/case_18.jpg');
        }
    .section-divider {
  visibility: hidden;
  display: flex;
  align-items: center;
  text-align: center;
  margin: 60px 0 20px; /* space above and below the heading */
  position: relative;
}

.section-divider::before {
  content: "";
  flex: 1;
  border-top: 2px solid rgba(240, 230, 210, 0.3);
  margin-right: 16px;
}

.section-divider::after {
  content: "";
  flex: 1;
  border-top: 2px solid rgba(240, 230, 210, 0.3);
  margin-left: 16px;
}
.first-divider {
  margin-top: 120px; /* Pushes it below the fixed header */
}
.cases-intro + .section-divider.first-divider {
  margin-top: 24px;
}

.section-title {
  visibility: hidden;
  font-family:Georgia, 'Times New Roman', Times, serif;
  font-weight: bold;
  font-size: 35px;
  color: #f0e6d2;
  text-shadow: 1px 1px 2px #000;
  background-color: #121e21;
  padding: 0 12px;
  z-index: 1;
  -webkit-text-stroke: 1px #000; /* black outline */
  text-stroke: 1px #000;
}
.copyright-footer {
    visibility: hidden;
    text-align: center;
    padding: 20px 0 15px 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    color: rgba(240, 230, 210, 0.6);
}
.about-button {
    visibility: hidden;
    position: fixed;
    top: 20px;
    right: 30px;
    z-index: 1001;
}
.about-button a {
    display: inline-block;
    background-color: rgba(212, 175, 55, 0.9);
    color: #1a1a1a;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.about-button a:hover {
    background-color: #d4af37;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.6);
}
.cases-intro {
  visibility: hidden;
  text-align: center;
  margin-top: 120px;
  margin-bottom: 24px;
  padding: 0 16px;
}
.cases-intro h1 {
  display: none;
}
.cases-intro p {
  font-family: 'Courier New', Courier, monospace;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(240, 230, 210, 0.85);
  max-width: 780px;
  margin: 0 auto;
  text-wrap: balance;
}
/* Three short facts in a single centred row of pills */
.cases-intro .intro-points {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
}
.cases-intro .intro-points li {
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  color: #f0e6d2;
  padding: 5px 14px;
  border: 1px solid rgba(212, 175, 55, 0.55);
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.08);
}
/* One line under each difficulty heading, SQL keywords in gold */
.section-blurb {
  visibility: hidden;
  text-align: center;
  white-space: nowrap;
  margin: -4px auto 22px;
  padding: 0 16px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  color: rgba(240, 230, 210, 0.75);
}
.section-blurb code {
  font-family: inherit;
  color: #d4af37;
}

/* Solved cases get the same corner ribbon as Start here. On Case 1 it
   replaces Start here. Class added by the script at the bottom of cases.html. */
.case-button.is-solved::before {
  content: "SOLVED";
  background: #38cf30;
  color: #0f1f15;
}