/* =========================================================
GIGSAHOY CATEGORY PAGE
Save as: assets/css/category.css
========================================================= */

body.category-detail-page {
margin: 0;
color: #0a2843;
background:
radial-gradient(
circle at 92% 8%,
rgba(75, 183, 220, 0.24),
transparent 34rem
),
linear-gradient(
180deg,
#f8fcfd 0%,
#edf7fa 100%
);
}

body.category-detail-page *,
body.category-detail-page *::before,
body.category-detail-page *::after {
box-sizing: border-box;
}

body.category-detail-page a {
text-decoration: none;
}

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

.category-page-new {
display: block !important;
width: min(1720px, calc(100% - 32px)) !important;
max-width: none !important;
margin: 0 auto !important;
padding: 24px 0 64px !important;
}

/* =========================================================
BREADCRUMBS
========================================================= */

.category-breadcrumbs-new {
display: flex !important;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 18px !important;
color: #708797;
font-size: 13px;
font-weight: 750;
}

.category-breadcrumbs-new a {
color: #176fa6;
}

.category-breadcrumbs-new strong {
color: #17364e;
}

/* =========================================================
CATEGORY HERO
========================================================= */

.category-hero-new {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 290px !important;
gap: 22px !important;
align-items: stretch !important;
margin: 0 0 24px !important;
}

.category-hero-copy-new,
.category-hero-summary-new {
overflow: hidden;
border: 1px solid #d2e3ea;
border-radius: 24px;
box-shadow: 0 16px 38px rgba(11, 48, 77, 0.09);
}

.category-hero-copy-new {
position: relative;
padding: clamp(30px, 4vw, 48px);
background:
radial-gradient(
circle at 92% 16%,
rgba(23, 167, 153, 0.18),
transparent 17rem
),
linear-gradient(
135deg,
#ffffff 0%,
#f2fbfc 100%
);
}

.category-hero-copy-new::after {
content: "⚓";
position: absolute;
right: 38px;
bottom: -34px;
color: #078f85;
font-size: 150px;
line-height: 1;
opacity: 0.055;
pointer-events: none;
}

.category-kicker-new,
.category-results-label-new {
display: inline-flex !important;
width: fit-content;
align-items: center;
border-radius: 999px;
padding: 7px 12px;
background: #def5ef;
color: #087b72;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.045em;
text-transform: uppercase;
}

.category-hero-copy-new h1 {
position: relative;
z-index: 1;
max-width: 950px;
margin: 15px 0 14px !important;
color: #082642;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(44px, 5vw, 78px);
line-height: 0.98;
letter-spacing: -0.05em;
}

.category-hero-copy-new > p {
position: relative;
z-index: 1;
max-width: 860px;
margin: 0 !important;
color: #456276;
font-size: 16px;
line-height: 1.72;
}

.category-hero-actions-new {
position: relative;
z-index: 1;
display: flex !important;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}

.category-primary-action,
.category-secondary-action {
display: inline-flex !important;
min-height: 47px;
align-items: center;
justify-content: center;
border-radius: 12px;
padding: 11px 19px;
font-size: 14px;
font-weight: 900;
}

.category-primary-action {
color: #ffffff !important;
background: linear-gradient(135deg, #078f85, #1478a5);
box-shadow: 0 9px 21px rgba(7, 132, 132, 0.2);
}

.category-secondary-action {
border: 1px solid #c9dce5;
background: #ffffff;
color: #12344d !important;
}

.category-primary-action:hover,
.category-secondary-action:hover {
transform: translateY(-2px);
}

.category-hero-summary-new {
display: flex !important;
flex-direction: column;
justify-content: center;
padding: 28px;
background:
radial-gradient(
circle at top right,
rgba(36, 179, 164, 0.22),
transparent 12rem
),
linear-gradient(
145deg,
#082642,
#0b4773
);
color: #ffffff;
}

.category-hero-icon-new {
display: grid !important;
width: 60px;
height: 60px;
place-items: center;
margin-bottom: 22px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 18px;
background: rgba(255, 255, 255, 0.11);
color: #a3f5e9;
font-size: 28px;
}

.category-hero-summary-new > span {
color: #aeece4;
font-size: 12px;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
}

.category-hero-summary-new > strong {
display: block;
margin: 6px 0 9px;
color: #ffffff;
font-family: Georgia, "Times New Roman", serif;
font-size: 65px;
line-height: 1;
}

.category-hero-summary-new > small {
color: rgba(255, 255, 255, 0.74);
font-size: 13px;
line-height: 1.6;
}

/* =========================================================
THREE-COLUMN LAYOUT
========================================================= */

.category-three-column-new {
display: grid !important;
grid-template-columns:
235px
minmax(0, 1fr)
290px !important;
gap: 22px !important;
align-items: start !important;
}

.category-left-rail-new,
.category-right-rail-new {
display: grid !important;
gap: 16px !important;
align-self: start;
position: sticky;
top: 168px;
max-height: calc(100vh - 184px);
overflow-x: hidden;
overflow-y: auto;
padding-bottom: 16px;
scrollbar-width: thin;
scrollbar-color: #91c6d2 transparent;
}

.category-left-rail-new::-webkit-scrollbar,
.category-right-rail-new::-webkit-scrollbar {
width: 6px;
}

.category-left-rail-new::-webkit-scrollbar-thumb,
.category-right-rail-new::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #91c6d2;
}

/* =========================================================
SHARED SIDEBAR CARDS
========================================================= */

.category-side-card-new {
display: block !important;
overflow: hidden;
margin: 0 !important;
border: 1px solid #d7e5eb;
border-radius: 18px;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 12px 29px rgba(11, 48, 77, 0.075);
}

.category-side-heading-new {
display: flex !important;
align-items: center;
gap: 10px;
padding: 15px 16px;
border-bottom: 1px solid #e4edf1;
background: linear-gradient(180deg, #ffffff, #f8fbfc);
}

.category-side-heading-new > span {
display: grid;
flex: 0 0 35px;
width: 35px;
height: 35px;
place-items: center;
border-radius: 11px;
background: #e5f6f3;
color: #087e76;
font-size: 15px;
font-weight: 900;
}

.category-side-heading-new h2 {
margin: 0 !important;
color: #0a2b47;
font-family: Georgia, "Times New Roman", serif;
font-size: 17px;
line-height: 1.15;
}

/* =========================================================
LEFT CATEGORY NAVIGATION
========================================================= */

.category-link-list-new {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 3px !important;
padding: 9px !important;
}

.category-link-list-new a {
display: grid !important;
grid-template-columns: 28px minmax(0, 1fr) !important;
gap: 8px !important;
align-items: center !important;
width: 100% !important;
padding: 9px 10px !important;
border: 0 !important;
border-radius: 10px !important;
background: transparent !important;
color: #29495f !important;
font-size: 12px !important;
font-weight: 800 !important;
line-height: 1.25 !important;
white-space: normal !important;
}

.category-link-list-new a > span {
display: block;
color: #168f86;
text-align: center;
font-size: 13px;
font-weight: 900;
}

.category-link-list-new a:hover,
.category-link-list-new a.active {
background: #e8f7f4 !important;
color: #087e76 !important;
}

.category-link-list-new a.active {
box-shadow: inset 3px 0 0 #078f85;
}

/* =========================================================
QUIZ SIDEBAR CARD
========================================================= */

.category-quiz-card-new {
display: block !important;
padding: 20px !important;
background:
radial-gradient(
circle at top right,
rgba(35, 179, 164, 0.2),
transparent 10rem
),
linear-gradient(
145deg,
#082642,
#0a3e66
) !important;
color: #ffffff !important;
}

.category-side-icon-new {
margin-bottom: 10px;
font-size: 36px;
}

.category-quiz-card-new h2,
.category-cta-card-new h2 {
margin: 0 0 9px !important;
color: #ffffff !important;
font-family: Georgia, "Times New Roman", serif;
font-size: 20px;
line-height: 1.15;
}

.category-quiz-card-new p,
.category-cta-card-new p {
margin: 0 0 14px !important;
color: rgba(255, 255, 255, 0.77) !important;
font-size: 13px !important;
line-height: 1.58 !important;
}

.category-quiz-card-new a,
.category-cta-card-new a {
color: #a9f6eb !important;
font-size: 13px;
font-weight: 900;
}

/* =========================================================
RESULTS AREA
========================================================= */

.category-results-area-new {
display: block !important;
min-width: 0 !important;
}

.category-results-toolbar-new {
display: flex !important;
align-items: flex-end !important;
justify-content: space-between !important;
gap: 18px !important;
margin: 0 0 18px !important;
padding: 21px 22px !important;
border: 1px solid #d5e4eb !important;
border-radius: 18px !important;
background: #ffffff !important;
box-shadow: 0 11px 27px rgba(11, 48, 77, 0.07) !important;
}

.category-results-toolbar-new h2 {
margin: 8px 0 5px !important;
color: #092a46 !important;
font-family: Georgia, "Times New Roman", serif;
font-size: 29px !important;
line-height: 1.12 !important;
}

.category-results-toolbar-new p {
margin: 0 !important;
color: #6a8192 !important;
font-size: 14px !important;
}

.category-sort-control-new {
display: grid !important;
gap: 7px;
min-width: 190px;
color: #36546a;
font-size: 12px;
font-weight: 900;
}

.category-sort-control-new select {
width: 100% !important;
min-height: 43px !important;
padding: 9px 12px !important;
border: 1px solid #cbdce4 !important;
border-radius: 11px !important;
background: #ffffff !important;
color: #15364d !important;
font-size: 13px !important;
outline: none !important;
}

/* =========================================================
RESULTS GRID
========================================================= */

.category-results-grid-new {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 18px !important;
width: 100% !important;
}

/* =========================================================
GIG RESULT CARDS
========================================================= */

.category-gig-card-new {
display: flex !important;
min-width: 0 !important;
flex-direction: column !important;
overflow: hidden !important;
border: 1px solid #d6e4ea !important;
border-radius: 18px !important;
background: #ffffff !important;
color: inherit !important;
box-shadow: 0 12px 29px rgba(11, 48, 77, 0.075) !important;
transition:
transform 0.18s ease,
box-shadow 0.18s ease;
}

.category-gig-card-new:hover {
transform: translateY(-4px);
box-shadow: 0 19px 36px rgba(11, 48, 77, 0.13) !important;
}

.category-gig-image-new {
position: relative !important;
width: 100% !important;
height: 190px !important;
overflow: hidden !important;
background: linear-gradient(135deg, #e9f5f8, #d8edf3) !important;
}

.category-gig-image-new img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}

.category-gig-image-new.is-missing::after {
content: "GigsAhoy";
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #4b7185;
font-family: Georgia, "Times New Roman", serif;
font-size: 24px;
font-weight: 900;
}

.category-card-badge-new {
position: absolute !important;
top: 12px !important;
left: 12px !important;
max-width: calc(100% - 24px);
overflow: hidden;
border-radius: 999px !important;
padding: 6px 10px !important;
background: rgba(6, 37, 65, 0.91) !important;
color: #ffffff !important;
font-size: 10px !important;
font-weight: 900 !important;
text-overflow: ellipsis;
white-space: nowrap;
}

.category-gig-body-new {
display: flex !important;
flex: 1 !important;
flex-direction: column !important;
padding: 18px !important;
}

.category-gig-body-new h3 {
margin: 0 0 9px !important;
color: #082642 !important;
font-family: Georgia, "Times New Roman", serif;
font-size: 22px !important;
line-height: 1.12 !important;
}

.category-gig-body-new > p {
display: -webkit-box !important;
overflow: hidden !important;
margin: 0 0 14px !important;
color: #617889 !important;
font-size: 13px !important;
line-height: 1.58 !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}

.category-gig-meta-new {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
margin-top: auto !important;
}

.category-gig-meta-new > div {
min-width: 0;
padding: 10px !important;
border: 1px solid #e6eef2;
border-radius: 11px !important;
background: #f2f8fa !important;
}

.category-gig-meta-new small {
display: block !important;
margin-bottom: 4px !important;
color: #78909e !important;
font-size: 10px !important;
font-weight: 900 !important;
letter-spacing: 0.035em;
text-transform: uppercase;
}

.category-gig-meta-new strong {
display: block !important;
overflow: hidden;
color: #16384f !important;
font-size: 12px !important;
text-overflow: ellipsis;
white-space: nowrap;
}

.category-card-link-new {
display: flex !important;
align-items: center;
justify-content: space-between;
margin-top: 13px !important;
padding-top: 12px !important;
border-top: 1px solid #e4edf1 !important;
color: #087f77 !important;
font-size: 12px !important;
font-weight: 900 !important;
}

/* =========================================================
LOADING / EMPTY / ERROR CARDS
========================================================= */

.category-loading-new,
.category-empty-new,
.category-error-new {
display: block !important;
grid-column: 1 / -1 !important;
width: 100% !important;
padding: 36px !important;
border: 1px solid #d5e4eb !important;
border-radius: 18px !important;
background: #ffffff !important;
color: #61798a !important;
text-align: center !important;
box-shadow: 0 11px 27px rgba(11, 48, 77, 0.06) !important;
}

.category-empty-new h3,
.category-error-new h3 {
margin: 0 0 8px !important;
color: #0b2c47 !important;
font-family: Georgia, "Times New Roman", serif;
font-size: 25px !important;
}

/* =========================================================
RIGHT SIDEBAR LISTS
========================================================= */

.category-mini-list-new,
.category-resource-links-new {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
}

.category-mini-item-new,
.category-resource-links-new a {
display: grid !important;
grid-template-columns: 43px minmax(0, 1fr) !important;
gap: 10px !important;
align-items: center !important;
width: 100% !important;
padding: 12px 14px !important;
border-bottom: 1px solid #e6eef2 !important;
color: #24475e !important;
}

.category-mini-item-new:last-child,
.category-resource-links-new a:last-child {
border-bottom: 0 !important;
}

.category-mini-item-new:hover,
.category-resource-links-new a:hover {
background: #eef9f7 !important;
}

.category-mini-thumb-new,
.category-resource-icon-new {
display: grid !important;
width: 43px !important;
height: 43px !important;
place-items: center !important;
overflow: hidden !important;
border-radius: 11px !important;
background: #e7f5f3 !important;
color: #087f77 !important;
font-size: 15px !important;
font-weight: 900 !important;
}

.category-mini-thumb-new img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}

.category-mini-copy-new strong,
.category-resource-links-new strong {
display: block !important;
color: #11344d !important;
font-size: 12px !important;
line-height: 1.3 !important;
}

.category-mini-copy-new small,
.category-resource-links-new small {
display: block !important;
margin-top: 3px !important;
color: #728a99 !important;
font-size: 10px !important;
font-weight: 700 !important;
}

.category-mini-loading-new {
margin: 0 !important;
padding: 16px !important;
color: #718897 !important;
font-size: 12px !important;
}

/* =========================================================
FINAL QUIZ CTA
========================================================= */

.category-cta-card-new {
display: block !important;
padding: 20px !important;
background:
radial-gradient(
circle at top right,
rgba(255, 255, 255, 0.18),
transparent 10rem
),
linear-gradient(
145deg,
#078f85,
#126f9d
) !important;
color: #ffffff !important;
}

.category-cta-card-new > span {
display: block;
margin-bottom: 10px;
font-size: 34px;
}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 1320px) {
.category-three-column-new {
grid-template-columns:
215px
minmax(0, 1fr)
260px !important;
gap: 17px !important;
}
}

@media (max-width: 1050px) {
.category-hero-new,
.category-three-column-new {
grid-template-columns: 1fr !important;
}

.category-left-rail-new,
.category-right-rail-new {
position: static !important;
max-height: none !important;
overflow: visible !important;
}

.category-left-rail-new {
grid-template-columns: 1fr 1fr !important;
}

.category-right-rail-new {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}

@media (max-width: 720px) {
.category-page-new {
width: min(100% - 24px, 1720px) !important;
padding-top: 18px !important;
}

.category-hero-copy-new,
.category-hero-summary-new {
padding: 24px !important;
}

.category-hero-copy-new h1 {
font-size: 40px !important;
}

.category-results-toolbar-new {
flex-direction: column !important;
align-items: stretch !important;
}

.category-sort-control-new {
min-width: 0 !important;
}

.category-results-grid-new,
.category-left-rail-new,
.category-right-rail-new {
grid-template-columns: 1fr !important;
}
}