/**
 * Visual polish — spacing, typography, cards, sections (v1.7).
 */

/* -------------------------------------------------------------------------
   Section headers
   ------------------------------------------------------------------------- */

.section-header{
margin-bottom:var(--oc365-space-lg, 1.25rem);
max-width:42rem;
}

.section-header--featured{
margin-bottom:var(--oc365-space-lg, 1.25rem);
}

.section-header--listings{
margin-bottom:var(--oc365-space-md, 1rem);
}

.section-header__eyebrow{
font-size:0.6875rem;
font-weight:600;
letter-spacing:0.12em;
text-transform:uppercase;
color:var(--oc365-color-text-muted, #666);
margin:0 0 0.375rem;
}

.section-header__title{
font-family:var(--oc365-font-heading);
font-size:clamp(1.625rem, 2.8vw, 2rem);
font-weight:700;
line-height:1.15;
letter-spacing:-0.03em;
color:var(--oc365-color-text, #111);
margin:0;
}

.section-header__lead{
margin:0.5rem 0 0;
font-size:1rem;
line-height:1.55;
color:var(--oc365-color-text-muted, #666);
}

/* Header — assets/css/html-header.css */

/* -------------------------------------------------------------------------
   Hero (homepage)
   ------------------------------------------------------------------------- */

.hero--home{
position:relative;
text-align:center;
padding:clamp(2.75rem, 6vw, 4rem) 0 clamp(2rem, 4vw, 2.75rem);
background:var(--oc365-color-card, #fff);
border-bottom:1px solid var(--oc365-color-border, #eee);
overflow:hidden;
}

.hero--home::before{
content:"";
position:absolute;
inset:0;
background:
	radial-gradient(ellipse 80% 50% at 50% -20%, color-mix(in srgb, var(--oc365-color-primary, #111) 8%, transparent), transparent);
pointer-events:none;
}

.hero-inner{
position:relative;
max-width:40rem;
margin:0 auto;
}

.hero__eyebrow{
font-size:0.75rem;
font-weight:600;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--oc365-color-text-muted, #666);
margin:0 0 0.5rem;
}

.hero__title{
font-family:var(--oc365-font-heading);
font-size:clamp(2rem, 5vw, 3rem);
font-weight:700;
line-height:1.1;
letter-spacing:-0.03em;
color:var(--oc365-color-text, #111);
margin:0 0 0.625rem;
}

.hero__lead{
font-size:clamp(1rem, 2vw, 1.125rem);
line-height:1.55;
color:var(--oc365-color-text-muted, #666);
margin:0 auto 1.25rem;
max-width:36rem;
}

.hero__actions{
display:flex;
flex-wrap:wrap;
gap:0.625rem;
justify-content:center;
align-items:center;
}

.hero__cta{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:0 1.5rem;
font-size:0.9375rem;
font-weight:600;
line-height:1;
text-decoration:none;
border-radius:var(--oc365-radius-pill, 999px);
transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

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

.hero__cta--primary:hover{
background:var(--oc365-color-primary-hover, #333);
color:var(--oc365-btn-fg, #fff);
transform:translateY(-1px);
}

.hero__cta--secondary{
color:var(--oc365-color-text, #111);
background:var(--oc365-color-card, #fff);
border:1px solid var(--oc365-color-border, #eee);
box-shadow:var(--oc365-shadow-xs);
}

.hero__cta--secondary:hover{
border-color:var(--oc365-color-primary, #111);
transform:translateY(-1px);
}

/* Legacy hero (if used elsewhere) */
.hero:not(.hero--home){
text-align:center;
padding:var(--oc365-space-3xl, 4rem) 0 var(--oc365-space-2xl, 3rem);
background:var(--oc365-color-card, #fff);
border-bottom:1px solid var(--oc365-color-border, #eee);
}

/* HTML hero: assets/css/typography-html.css */
.hero--legacy h1{
font-size:clamp(1.75rem, 4vw, 2.625rem);
font-weight:700;
letter-spacing:-0.02em;
margin-bottom:var(--oc365-space-sm, 0.75rem);
}

/* -------------------------------------------------------------------------
   Featured band
   ------------------------------------------------------------------------- */

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

/* -------------------------------------------------------------------------
   Listings section
   ------------------------------------------------------------------------- */

.listings-section{
padding:1.75rem 0 var(--oc365-space-section, 2.5rem);
background:var(--oc365-color-bg, #f7f7f7);
}

.listings-wrapper{
margin-top:0;
}

.listings-section__more{
display:flex;
justify-content:center;
margin-top:var(--oc365-space-xl, 1.75rem);
padding-top:0;
}

/* -------------------------------------------------------------------------
   Listing grid & cards (professional directory UI)
   ------------------------------------------------------------------------- */

.listings-grid,
.listings-grid--featured{
display:grid;
gap:var(--oc365-grid-gap, 1.5rem);
align-items:stretch;
width:100%;
}

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

.listing-card{
position:relative;
display:flex;
flex-direction:column;
padding:1.375rem 1.5rem 1.25rem;
border-radius:14px;
border:1px solid color-mix(in srgb, var(--oc365-color-border, #e5e5e5) 85%, transparent);
background:var(--oc365-color-card, #fff);
box-shadow:
	0 1px 2px rgba(0,0,0,.04),
	0 4px 16px rgba(0,0,0,.04);
gap:0;
min-height:100%;
isolation:isolate;
transition:
	transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
	box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1),
	border-color 0.2s ease;
}

.listing-card:hover{
transform:translateY(-4px);
border-color:color-mix(in srgb, var(--oc365-color-primary, #111) 12%, var(--oc365-color-border, #e5e5e5));
box-shadow:
	0 4px 8px rgba(0,0,0,.04),
	0 12px 32px rgba(0,0,0,.08);
}

.listings-grid--featured .listing-card{
min-height:260px;
}

.listing-card--featured,
.listing-card.featured{
border-color:var(--oc365-color-border, #e5e5e5);
box-shadow:
	0 1px 2px rgba(0,0,0,.04),
	0 6px 20px rgba(0,0,0,.06);
}

.listing-card--featured::before,
.listing-card.featured::before{
content:none;
}

.listings-grid--featured .listing-card--featured,
.listings-grid--featured .listing-card.featured{
box-shadow:
	0 2px 4px rgba(0,0,0,.04),
	0 8px 28px rgba(0,0,0,.07);
}

.card-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:0.5rem;
margin-bottom:0.625rem;
}

.card-badges{
display:flex;
flex-wrap:wrap;
gap:0.25rem;
align-items:center;
}

.badge{
background:var(--oc365-color-bg-alt, #f4f4f5);
color:var(--oc365-color-text, #111);
border:1px solid transparent;
font-size:0.6875rem;
font-weight:600;
letter-spacing:0.06em;
text-transform:uppercase;
padding:0.4rem 0.7rem;
border-radius:6px;
line-height:1.2;
}

.featured-badge{
background:var(--oc365-color-primary, #111);
color:var(--oc365-btn-fg, #fff);
font-size:0.6875rem;
font-weight:600;
letter-spacing:0.06em;
text-transform:uppercase;
padding:0.4rem 0.7rem;
border-radius:6px;
line-height:1.2;
}

.deadline{
flex-shrink:0;
font-size:0.8125rem;
font-weight:600;
color:#dc2626;
white-space:nowrap;
padding:0.35rem 0.55rem;
border-radius:6px;
background:color-mix(in srgb, #dc2626 8%, transparent);
}

/* Listing card typography: assets/css/typography-html.css */
.listing-card:not(.opportunity-card) .listing-title{
margin:0 0 0.625rem;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

.listing-title a{
text-decoration:none;
color:var(--oc365-color-text, #111);
transition:color 0.15s ease;
}

.listing-title a:hover{
color:var(--oc365-color-primary, #111);
}

.listing-meta{
display:flex;
flex-wrap:wrap;
gap:0.25rem;
margin-bottom:0.625rem;
}

.listing-chip{
display:inline-block;
font-size:0.75rem;
font-weight:500;
line-height:1.25;
padding:0.25rem 0.55rem;
border-radius:5px;
background:var(--oc365-color-bg-alt, #f4f4f5);
color:var(--oc365-color-text-muted, #555);
}

.listing-chip--muted{
background:transparent;
border:1px solid var(--oc365-color-border, #e8e8e8);
color:var(--oc365-color-text-muted, #777);
}

.listing-summary{
flex:1;
font-size:0.875rem;
line-height:1.55;
color:var(--oc365-color-text-muted, #555);
margin:0 0 0.875rem;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}

.card-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:0.75rem;
margin-top:auto;
padding-top:1rem;
border-top:1px solid color-mix(in srgb, var(--oc365-color-border, #eee) 70%, transparent);
}

.card-link{
font-size:0.8125rem;
font-weight:600;
color:var(--oc365-color-text-muted, #666);
text-decoration:none;
transition:color 0.15s ease;
white-space:nowrap;
}

.card-link:hover{
color:var(--oc365-color-text, #111);
}

.apply-btn{
gap:0.35rem;
padding:0.625rem 1.25rem;
border-radius:var(--oc365-radius-pill, 999px);
box-shadow:0 1px 2px rgba(0,0,0,.08);
}

.apply-btn__icon{
font-size:1em;
line-height:1;
transition:transform 0.15s ease;
}

.apply-btn:hover .apply-btn__icon{
transform:translateX(2px);
}

.load-more-btn{
margin:0;
min-width:200px;
border-radius:var(--oc365-radius-pill, 999px);
box-shadow:var(--oc365-shadow-xs);
}

.inline-ad{
border-radius:var(--oc365-radius-lg, 16px);
padding:var(--oc365-space-2xl, 3rem) var(--oc365-space-lg, 1.5rem);
}

/* -------------------------------------------------------------------------
   Filters panel
   ------------------------------------------------------------------------- */

.filters-panel{
background:var(--oc365-color-card, #fff);
border:1px solid var(--oc365-color-border, #eee);
border-radius:var(--oc365-radius-lg, 16px);
padding:0.875rem 1rem;
box-shadow:var(--oc365-shadow-sm);
transition:box-shadow 0.2s ease;
}

.filters--sticky.is-stuck .filters-panel{
box-shadow:var(--oc365-shadow-md);
border-color:color-mix(in srgb, var(--oc365-color-border, #eee) 80%, transparent);
}

.filter-bar select,
.search-field input,
.filter-bar button{
border-radius:var(--oc365-radius-sm, 8px);
}

.search-field input{
height:48px;
font-size:0.9375rem;
box-shadow:var(--oc365-shadow-xs);
}

.search-field input:focus{
outline:none;
border-color:var(--oc365-color-primary, #111);
box-shadow:0 0 0 3px color-mix(in srgb, var(--oc365-color-primary, #111) 12%, transparent);
}

.filter-bar select{
height:48px;
min-width:150px;
box-shadow:var(--oc365-shadow-xs);
}

.filter-bar select:focus{
outline:none;
border-color:var(--oc365-color-primary, #111);
}

.filter-bar button{
border-radius:var(--oc365-radius-sm, 8px);
font-size:0.875rem;
}

/* Single listing + search browse: single-listing-html.css, listings-browse-html.css */

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

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

.footer-tagline{
font-size:1.0625rem;
max-width:28rem;
margin-left:auto;
margin-right:auto;
}

/* -------------------------------------------------------------------------
   No results
   ------------------------------------------------------------------------- */

.no-results{
border-radius:var(--oc365-radius-lg, 16px);
padding:var(--oc365-space-3xl, 4rem) var(--oc365-space-xl, 2rem);
box-shadow:var(--oc365-shadow-sm);
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media (max-width:1024px){
.listings-grid,
.listings-grid--featured{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
}

@media (max-width:768px){
.hero__actions{
flex-direction:column;
width:100%;
}

.hero__cta{
width:100%;
max-width:20rem;
}

.card-footer{
flex-direction:row;
align-items:center;
}

.apply-btn{
flex-shrink:0;
}

.section-header{
margin-bottom:var(--oc365-space-md, 1rem);
}

.listing-card{
padding:1.125rem 1.25rem;
}
}

@media (max-width:600px){
.listings-grid,
.listings-grid--featured{
grid-template-columns:1fr;
}

.listing-card{
padding:var(--oc365-space-md, 1.25rem);
}
}