/* =========================================
HOUSE OF STAPLETON
LAYOUTS.CSS
========================================= */

/* =========================================
MAIN WRAPPER
========================================= */

.wrapper {

max-width: 1200px;
width: 100%;

margin: 20px auto;

display: flex;
flex-direction: column;

padding: 20px;

background: rgba(255,255,255,.95);

border-radius: 12px;

box-shadow:
    0 6px 18px rgba(0,0,0,.20);

backdrop-filter: blur(2px);

}

.site-main {

padding: 20px 0;

min-height: 60vh;

}

/* =========================================
GENERIC LAYOUT SYSTEM
========================================= */

.layout {
display: flex;
gap: 20px;
}

.col {
display: flex;
flex-direction: column;
gap: 15px;
}

.games-layout .col {
    gap: 30px;
}

/* =========================================
2 COLUMN
75 / 25
========================================= */

.layout-2col-75-25 .col.left {
flex: 1;
min-width: 0;
}

.layout-2col-75-25 .col.right {
flex: 0 0 260px;
}

/* =========================================
3 COLUMN
40 / 40 / 20
========================================= */

.layout-3col-25 .col.left {
flex: 1;
}

.layout-3col-25 .col.middle {
flex: 1;
}

.layout-3col-25 .col.right {

flex: .5;

position: sticky;
top: 20px;

}

/* =========================================
3 COLUMN
25 / 50 / 25
========================================= */

.layout-3col-25-50-25 .col.left {
flex: .5;
}

.layout-3col-25-50-25 .col.middle {
flex: 1;
}

.layout-3col-25-50-25 .col.right {

flex: .5;

position: sticky;
top: 20px;

}

/* =========================================
HOUSE OF STAPLETON
WELCOME PAGE
========================================= */

/* Welcome card */

.card.welcome {

background: #fff8e8;

border-left: 5px solid #c78c1f;

margin-bottom: 25px;

}

/* Shared story cards */

.house-card {

width: 88%;

margin-bottom: 25px;

position: relative;

transition:
    transform .2s ease;

}

/* Decorative push pin */

.house-card::before {

content: "\2022";

position: absolute;

top: 8px;
right: 12px;

font-size: 2rem;

opacity: .60;

}

/* Alternate alignment */

.house-card.left {
margin-right: auto;
}

.house-card.right {
margin-left: auto;
}

/* Scrapbook tilt */

.house-card.rotate-left {
transform: rotate(-1.0deg);
}

.house-card.rotate-right {
transform: rotate(1.0deg);
}

.house-card:hover {
transform: rotate(0deg) scale(1.01);
}

/* =========================================
HOUSE CARD THEMES
========================================= */

/* Genealogy */

.card.genealogy {

background: #f3eee5;

border-left: 5px solid #8b7355;

}

.card.genealogy::before {

color: #8b7355;

}

/* Entertainment */

.card.entertainment {

background: #eef5ff;

border-left: 5px solid #4a74b8;

}

.card.entertainment::before {

color: #4a74b8;

}

/* Sports */

.card.sports {

background: #eef8ee;

border-left: 5px solid #4f8a4f;

}

.card.sports::before {

color: #4f8a4f;

}

/* Trivia */

.card.trivia {

background: #f8f0ff;

border-left: 5px solid #8a5fbf;

}

.card.trivia::before {

color: #8a5fbf;

}

/* Holiday */

.card.holiday {

background: #faf0f0;

border-left: 5px solid #8b3f3f;

}

.card.holiday::before {

color: #8b3f3f;

}

/* =========================================
MOVIE LISTS
========================================= */

.movie-list {

display: flex;
flex-direction: column;

gap: 10px;

}

.movie-row {

display: flex;

align-items: center;

gap: 14px;

padding: 8px;

border-radius: 8px;

text-decoration: none;

transition: all .2s ease;

}

.movie-row:hover {
background: rgba(0,0,0,.05);
}

.movie-row img {
flex-shrink: 0;
}

.movie-row-info {

display: flex;
flex-direction: column;

}

.movie-row-title {

font-weight: 600;

color: #111;

}

.movie-row-year {

font-size: .85rem;

color: #777;

}

.source-icon {

height: 18px;

margin-right: 6px;

vertical-align: middle;

}

/* =========================================
VIEW TOGGLE
========================================= */

.view-toggle {

display: flex;

justify-content: center;

gap: 10px;

margin-bottom: 15px;

}

.view-btn {

padding: 6px 12px;

border-radius: 6px;

border: none;

background: rgba(0,0,0,.05);

cursor: pointer;

}

.view-btn.active {

background: var(--color-gold);

color: #fff;

}

/* =========================================
LIST VIEW
========================================= */

.movie-list.list-view {

display: flex;

flex-direction: column;

gap: 10px;

}

/* =========================================
GRID VIEW
========================================= */

.movie-list.grid-view {

display: grid;

grid-template-columns:
    repeat(auto-fill,minmax(140px,1fr));

gap: 16px;

}

.movie-list.grid-view .movie-row {

flex-direction: column;

text-align: center;

padding: 0;

background: none;

}

.movie-list.grid-view .movie-row:hover {
background: none;
}

.movie-list.grid-view img {

width: 100%;

max-width: 140px;

}

.movie-list.grid-view .movie-row-info {

margin-top: 6px;

}

.movie-list.grid-view .movie-row-title {

font-size: .9rem;

}

/* =========================================
PAGINATION
========================================= */

.pagination {

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;

gap: 6px;

margin: 20px 0;

}

.page-link,
.page-nav {

padding: 6px 10px;

border-radius: 6px;

text-decoration: none;

font-size: .9rem;

color: #444;

background: rgba(0,0,0,.05);

transition: all .2s ease;

}

.page-link:hover,
.page-nav:hover {

background: rgba(0,0,0,.10);

}

.page-link.active {

background: var(--color-gold);

color: #fff;

font-weight: 600;

}