/* ==========================================================================
   Pulsar Theme — Layout
   Shell, container, grid system, responsive breakpoints.
   ========================================================================== */

/* --- Shell (page wrapper) --- */
.pls-shell{min-height:100vh;display:flex;flex-direction:column}
.pls-shell>main{flex:1}
/* The space below. A page that ends without pagination — a search with few
   results, a short archive — would rest its last card straight on the footer.
   Where pagination is present its 32px add to these, and the distance stays
   reasonable. */
.pls-main{padding-top:24px;padding-bottom:var(--pls-sp-2xl)}
/* A full bleed hero sits flush against the header: the 24px of space moves
   below it instead. */
.pls-main:has(>.pls-page-title-hero){padding-top:0}
/* Content sitting right under the breaking bar, hero style. */
.post-type-archive-offerta .pls-main{padding-top:0}
@media(max-width:782px){.pls-main{padding-top:8px}.pls-main:has(>.pls-page-title-hero){padding-top:0}.post-type-archive-offerta .pls-main{padding-top:0}}

/* --- Container --- */
.pls-container{max-width:var(--pls-max-w);margin:0 auto;padding:0 var(--pls-sp-xl)}

/* --- Main + Sidebar grid --- */
.pls-layout{display:grid;grid-template-columns:1fr var(--pls-sidebar-w);gap:var(--pls-sp-xl);align-items:start}
/* With no sidebar there is one column, and one column is not a grid: the list
   takes the width of the page like everything else that has nothing beside it. */
.pls-layout--full{display:block}
.pls-layout__main{min-width:0}
/* The gap above the footer, under the column of articles. The sidebar already
   has one of its own, just below; the main column had none, so whenever it was
   the taller of the two — a search with a handful of results and no pagination —
   the last card sat against the footer.

   Only from 1025px up, where the two columns stand side by side. Below that the
   sidebar drops underneath the articles, and this space would open in the middle
   of the page, between the last card and the first widget, instead of at the end
   of it. */
@media(min-width:1025px){
    .pls-layout__main{padding-bottom:40px}
    /* The pagination carries 32px of its own below it: without this the two would
       add up and an archive would stand further off the footer than a search. */
    .pls-layout__main>.pls-pagination:last-child{padding-bottom:0}
}

/* --- Sidebar sticky --- */
.pls-sidebar{display:flex;flex-direction:column;gap:20px;padding-bottom:40px}

/* --- Page layout (content + optional sidebar) --- */
.pls-page-layout{display:grid;grid-template-columns:1fr var(--pls-sidebar-w);gap:var(--pls-sp-xl);align-items:start}
.pls-page-layout--full{display:block;padding-bottom:40px}
.pls-page-layout--full .pls-entry-content{max-width:unset}
.pls-page-layout__sidebar{display:flex;flex-direction:column;gap:20px;padding-bottom:40px}

/* --- Page article white card --- */
.pls-page{background:var(--pls-surface);border:1px solid var(--pls-border-soft);border-radius:var(--pls-radius);padding:32px;box-shadow:var(--pls-shadow-sm);min-width:0}

/* --- Section spacing --- */
.pls-section{padding:0}
.pls-section--flush{padding:0}
.pls-section--bg{background:var(--pls-surface);border-top:1px solid var(--pls-border);border-bottom:1px solid var(--pls-border)}
.pls-section--dark{background:var(--pls-ink);color:#fff}

/* --- Grid utilities --- */
.pls-grid{display:grid;gap:var(--pls-sp-md)}
.pls-grid--1{grid-template-columns:1fr}
.pls-grid--2{grid-template-columns:repeat(2,1fr)}
.pls-grid--3{grid-template-columns:repeat(3,1fr)}
.pls-grid--4{grid-template-columns:repeat(4,1fr)}
.pls-grid--5{grid-template-columns:repeat(5,1fr)}
.pls-grid--8{grid-template-columns:repeat(8,1fr)}

/* --- Hero grids --- */
.pls-hero-grid{display:grid;gap:20px}
.pls-hero-grid--a{grid-template-columns:1.6fr 1fr}
.pls-hero-grid--b{grid-template-columns:1fr}
.pls-hero-grid--c{grid-template-columns:2fr 1fr}
/* Layout B: hero + list + social */
.pls-hero-grid--b-split{grid-template-columns:1.6fr 1fr;padding:0 12px}

.pls-hero-aside{display:flex;flex-direction:column;gap:12px}
.pls-hero-list{display:flex;flex-direction:column;gap:12px}
.pls-hero-list .pls-card--compact{background:var(--pls-surface);border:1px solid var(--pls-border-soft);border-top:1px solid var(--pls-border-soft);border-radius:var(--pls-radius,calc(12px * var(--pls-r)));padding:12px;box-shadow:0 1px 2px rgba(15,29,54,.04)}
.pls-hero-list .pls-card--compact:hover{box-shadow:0 4px 12px rgba(15,29,54,.08);background:var(--pls-surface)}
/* Layout C: 3 cards row + sidebar */
.pls-hero-grid--c-wide{grid-template-columns:1fr var(--pls-sidebar-w,320px)}

.pls-hero-carousel-wrap{position:relative;min-width:0}
.pls-hero-sidebar{display:flex;flex-direction:column;gap:16px}
/* Hero social mini buttons */
.pls-hero-social{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pls-hero-social__btn{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--pls-surface);border:1px solid var(--pls-border-soft);border-radius:calc(10px * var(--pls-r));font-size:13px;color:var(--pls-ink);transition:border-color .15s,box-shadow .15s,transform .15s;min-width:0}
.pls-hero-social__btn:hover{border-color:var(--pls-border);box-shadow:0 2px 6px rgba(15,29,54,.06);transform:translateY(-1px)}
.pls-hero-social__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px}
.pls-hero-social__icon svg{width:18px;height:18px}
.pls-hero-social__count{font-weight:700;color:var(--pls-ink);font-size:14px;letter-spacing:-.2px}
.pls-hero-social__name{color:var(--pls-mute);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* One button per line, wherever that reads better than a pair of narrow ones. */
.pls-hero-social--single{grid-template-columns:1fr}
/* Filled buttons: the network's colour across the whole button, its mark in
   white on a darker square at the leading edge, the follower figure at the far
   end. `--pls-soc` is written on each button by the template and holds a colour
   or a gradient, so one rule paints eight brands.
   The darker square is black at low opacity rather than a second colour: it has
   to sit on a gradient as well, and a colour worked out from the first would
   have to be worked out four times over. */
.pls-hero-social--flat .pls-hero-social__btn{background:var(--pls-soc,var(--pls-brand));border:0;color:#fff;padding:0 14px 0 0;gap:12px;overflow:hidden}
.pls-hero-social--flat .pls-hero-social__btn:hover{box-shadow:0 4px 12px rgba(15,29,54,.16)}
.pls-hero-social--flat .pls-hero-social__icon{align-self:stretch;width:46px;min-height:42px;background:rgba(0,0,0,.16);color:#fff}
.pls-hero-social--flat .pls-hero-social__name{order:2;color:#fff;font-weight:600;flex:1 1 auto}
.pls-hero-social--flat .pls-hero-social__count{order:3;color:#fff;margin-left:auto;flex-shrink:0}

/* ==========================================================================
   Responsive — Mobile first would be ideal but we match the desktop-first
   mockup. All breakpoints in one file for maintainability.
   ========================================================================== */

/* --- Tablet (<=1024px) --- */
@media(max-width:1024px){
.pls-container{padding:0 var(--pls-sp-md)}
.pls-layout{grid-template-columns:1fr;gap:var(--pls-sp-lg)}
.pls-sidebar{position:static}
.pls-page-layout{grid-template-columns:1fr}
.pls-page-layout__sidebar{position:static}
.pls-page{padding:24px 20px}
.pls-grid--5{grid-template-columns:repeat(3,1fr)}
.pls-grid--8{grid-template-columns:repeat(4,1fr)}
.pls-hero-grid--a,.pls-hero-grid--c,.pls-hero-grid--b-split,.pls-hero-grid--c-wide{grid-template-columns:1fr}

}

/* --- Mobile (<=640px) --- */
@media(max-width:640px){
.pls-container{padding:0 var(--pls-sp-md)}
.pls-page{padding:16px 14px}
.pls-grid--2{grid-template-columns:1fr}
.pls-grid--3{grid-template-columns:1fr}
.pls-grid--4{grid-template-columns:repeat(2,1fr)}
.pls-grid--5{grid-template-columns:repeat(2,1fr)}
.pls-grid--8{grid-template-columns:repeat(3,1fr)}

.pls-section{padding:0}

.pls-hero-social{grid-template-columns:1fr 1fr}
/* Repeated inside the breakpoint: the rule above sets two columns for the
   narrow screens, and one per line has to hold there too. */
.pls-hero-social--single{grid-template-columns:1fr}
}