/*
 * Game Card Component Overview
 * ----------------------------
 * This file styles game-card-specific visual pieces:
 * - image containers and dual-image variant
 * - content and link-group presentation
 * - trailer overlay behavior
 * - shared link and selection colors used in card content
 *
 * Good practice highlighted:
 * Related selectors are grouped by UI responsibility so future updates can
 * target one component file without scanning unrelated rules.
 */

/* ============================================ */
/*                 Game Card Styles            */
/* ============================================ */

/* Game Card Picture Container */
.gamecard-image-container {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 50%;
}
.gamecard-text{
    width: calc(90% + 10% * ((100vw - 768px) / 1152px));
}

.gamecard-picture {
    position: relative;
    display: inline-block;
    line-height: 0;
    width: 100%;
    max-width: 428px;
    height: 243px;
    box-sizing: border-box;
}

/* Game Card Picture */
.gamecard-picture img {
    border: 5px solid #bbbbdd; /* border */
    object-fit: cover;
    border-radius: 15px;
    width: 100%;
    max-width: 428px;
    height: 243px;
    display: block;
    box-sizing: border-box;
}

/* Dual-image wrapper (for last gamecard) - keeps combined width equal to single image */
.dual-image-wrapper {
    width: 428px; /* match single .gamecard-picture max-width */
    display: flex;
    gap: 10px; /* same gap used in template */
    justify-content: center;
    align-items: stretch;
    box-sizing: border-box;
}

.dual-image-wrapper .gamecard-picture.dual {
    width: 100%;
    height: 365px; /* 50% taller than 243px */
    max-width: none;
    display: block;
}

.dual-image-wrapper .gamecard-picture.dual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    border: 5px solid #bbbbdd;
    box-sizing: border-box;
}


/* Game Card Content */
.gamecard-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: flex-start;
    min-width: 50%;
}

/* Game Card Links Container */
.gamecard-links-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0;
}



 .firsttable {
  width: 75% !important;
}

.resizable {
    font-size: clamp(0.9rem, 1.5vw, 1rem) !important;

}
/* Text Links Container */
.textlinks-container {
    margin:0 !important;
    padding:0 !important;
}


.textlinks-container.narrow {
    width: auto;
}

.textlinks-container.wide {
    width: auto;
}

/* Link Headers */
.link-header {
    color: #9999bb;
    margin-top: auto;
    margin-bottom: 0.5em;
    line-height: 1.2;
    text-align: center;
    font-weight: 300;
}

.link-header span {
    font-weight: 500;
}

/* Global link styling */
a,
.link {
    color: #8888aa;
    transition: color 0s ease;
    font-weight: 500;
    line-height: 1;
    text-decoration: underline;
}

::selection {
    background-color: #aaaaff; /* highlight color */
    color: #000000; /* text color */
  }

a:hover,
.link:hover {
    color: #6644ff;
}

.case-study-link.bold {
    font-weight: 500;
}


/* Video Overlay */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #6644ff00;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
    border-radius: 15px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.video-overlay:hover {
    background-color: #6644ff88;
}

.video-overlay:hover .video-text {
    opacity: 1;
}

.video-text {
    color: white;
    font-size: 32pt;
    font-weight: bold;
    width: 85%;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-shadow: 2px 2px 8px black;
}