/**
 * HTML-inspired global layout layer (phase 1).
 * Uses backend-controlled design tokens only.
 */

/* Header: assets/css/html-header.css */
/* Hero + stats: assets/css/home-html-hero.css */

/* Footer: assets/css/html-footer.css */

.section-header{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:1rem;
max-width:none;
margin-bottom:2rem;
}

.section-header__main{
max-width:42rem;
}

.section-link{
display:inline-flex;
align-items:center;
gap:0.45rem;
font-family:var(--oc365-font-heading);
font-size:0.92rem;
font-weight:600;
line-height:1.2;
text-decoration:none;
color:var(--oc365-color-text, #111);
white-space:nowrap;
}

.section-link__arrow{
transition:transform 0.15s ease;
}

.section-link:hover .section-link__arrow{
transform:translateX(2px);
}

/* Featured — assets/css/home-html-featured.css */

.listings-section{
padding-top:2rem;
padding-bottom:clamp(2.5rem, 5vw, 4rem);
}

.filters--sticky{
padding:0;
background:transparent;
}

.filters--sticky.is-stuck{
padding:0;
box-shadow:none;
border-bottom:none;
background:transparent;
backdrop-filter:none;
-webkit-backdrop-filter:none;
}

.filters-panel{
border-radius:12px;
padding:0.9rem;
box-shadow:var(--oc365-shadow-sm);
}

.search-field input,
.filter-bar select{
height:44px;
border-radius:8px;
font-size:0.92rem;
}

.filter-bar select{
min-width:130px;
}

.filter-actions{
margin-left:auto;
}

.results-header-info{
display:flex;
flex-direction:column;
}

.section-title{
font-family:var(--oc365-font-heading);
font-size:1.85rem;
font-weight:800;
letter-spacing:-0.02em;
line-height:1.2;
margin:0;
}

.results-count{
font-size:0.85rem;
color:var(--oc365-color-text-muted, #666);
margin-top:0.35rem;
}

.filter-select-wrapper{
position:relative;
display:block;
}

.filter-select-wrapper .filter-select{
width:100%;
padding-right:2rem;
}

.select-arrow{
position:absolute;
right:0.75rem;
top:50%;
transform:translateY(-50%);
font-size:0.85rem;
line-height:1;
color:var(--oc365-color-text-muted, #666);
pointer-events:none;
}

#apply-filter{
background:var(--oc365-color-primary, #111);
color:var(--oc365-btn-fg, #fff);
}

#reset-filter{
background:transparent;
color:var(--oc365-color-text-muted, #666);
border:1px solid var(--oc365-color-border, #ddd);
}

.listings-grid{
gap:1.25rem;
grid-template-columns:repeat(3, minmax(0, 1fr));
}

.listing-card{
border-radius:12px;
}

.opportunity-card{
display:flex;
gap:1rem;
padding:1.25rem;
}

.card-left{
width:68px;
flex-shrink:0;
display:flex;
align-items:flex-start;
justify-content:center;
}

.card-right{
display:flex;
flex-direction:column;
flex:1;
}

.opp-badges{
display:flex;
flex-wrap:wrap;
gap:0.35rem;
margin-bottom:0.55rem;
}

.opp-title{
font-size:1.08rem;
margin-bottom:0.55rem;
}

.opp-meta{
margin-bottom:0.65rem;
}

.opp-badge{
font-size:0.72rem;
}

.opp-desc{
font-size:0.88rem;
margin-bottom:0.8rem;
}

.opp-apply-link{
display:inline-flex;
align-items:center;
gap:0.35rem;
}

.card-footer{
padding-top:0.85rem;
}

@media (max-width: 1024px){
.filter-actions{
margin-left:0;
}

.listings-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 768px){
.section-header{
flex-direction:column;
align-items:flex-start;
margin-bottom:1.25rem;
}

.listings-grid{
grid-template-columns:1fr;
}

.opportunity-card{
flex-direction:column;
}

.card-left{
width:100%;
justify-content:flex-start;
}

.filters-panel{
padding:0.75rem;
}

}