/* Shorty's Show Pigs: page layouts for the main site.
   Colors, fonts, header/nav/footer, buttons, cards and forms live in assets/css/tokens.css (load that first). */

section{padding:var(--ssp-s7) 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--ssp-s4);flex-wrap:wrap;margin-bottom:var(--ssp-s5)}
.section-head h2{margin:0}
.section-head .more{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:var(--ssp-fs-sm);color:var(--ssp-ink)}
.section-head .more:hover{color:var(--ssp-red)}
.lede{font-size:1.15rem;max-width:640px}

/* ----- Hero (home) ----- */
.hero{position:relative;overflow:hidden;background:var(--ssp-black);color:var(--ssp-white);padding:var(--ssp-s8) 0}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 78% 45%,rgba(255,255,255,.08),transparent 45%),
  repeating-linear-gradient(135deg,rgba(175,175,175,.06) 0 2px,transparent 2px 18px);pointer-events:none}
.hero .container{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:var(--ssp-s6);align-items:center}
.hero h1{margin:0 0 var(--ssp-s4)}
.hero h1 .accent{color:var(--ssp-red)}
.hero p{font-size:1.2rem;max-width:620px;color:#E6E6E6;margin:0 0 var(--ssp-s3)}
.hero .tagline-note{font-size:var(--ssp-fs-sm);color:var(--ssp-silver)}
.hero-logo{justify-self:center;width:min(360px,100%);border-radius:50%;box-shadow:0 0 0 10px rgba(255,255,255,.04),0 30px 60px rgba(0,0,0,.6)}
@media (max-width:860px){.hero{padding:var(--ssp-s7) 0}.hero .container{grid-template-columns:1fr}.hero-logo{order:-1;width:180px;justify-self:start}}

/* ----- Page header band (inner pages) ----- */
.page-head{background:var(--ssp-black);color:var(--ssp-white);padding:var(--ssp-s7) 0 var(--ssp-s6)}
.page-head h1{margin:0 0 var(--ssp-s2)}
.page-head p{margin:0;color:#DADADA;max-width:680px;font-size:1.1rem}

/* ----- How to buy strip ----- */
.how{background:var(--ssp-white);border-bottom:1px solid var(--ssp-line);padding:var(--ssp-s6) 0}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ssp-s5)}
.how-item{display:flex;gap:var(--ssp-s4);align-items:flex-start}
.how-num{flex:none;width:44px;height:44px;border-radius:50%;background:var(--ssp-black);color:var(--ssp-white);display:grid;place-items:center;font-family:var(--ssp-font-head);font-weight:800;font-size:1.2rem;border:2px solid var(--ssp-red)}
.how-item h3{margin:0 0 .2rem;text-transform:uppercase;font-size:1.05rem;letter-spacing:.03em}
.how-item p{margin:0;color:var(--ssp-muted)}
@media (max-width:860px){.how-grid{grid-template-columns:1fr}}

/* ----- Two-column blocks ----- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--ssp-s6);align-items:center}
.two-col.top{align-items:start}
@media (max-width:860px){.two-col{grid-template-columns:1fr}}
.about-teaser{background:var(--ssp-white);border-top:1px solid var(--ssp-line);border-bottom:1px solid var(--ssp-line)}
.photo-frame{border-radius:var(--ssp-radius-lg);overflow:hidden;border:1px solid var(--ssp-line);box-shadow:var(--ssp-shadow)}

/* ----- Sale days ----- */
.sales-list{display:grid;gap:var(--ssp-s3)}
.sale{display:grid;grid-template-columns:auto 1fr;gap:var(--ssp-s4);align-items:center;background:var(--ssp-white);border:1px solid var(--ssp-line);border-left:6px solid var(--ssp-red);
  border-radius:var(--ssp-radius);padding:var(--ssp-s4) var(--ssp-s5);box-shadow:var(--ssp-shadow)}
.sale-date{font-family:var(--ssp-font-head);font-weight:800;text-transform:uppercase;text-align:center;min-width:72px;line-height:1.1;color:var(--ssp-red)}
.sale-date small{display:block;font-family:var(--ssp-font-body);font-size:.7rem;letter-spacing:.14em;color:var(--ssp-muted)}
.sale strong{font-size:1.05rem}

/* ----- CTA band ----- */
.cta{background:var(--ssp-red);color:var(--ssp-white);text-align:center}
.cta h2{margin:0 0 var(--ssp-s2);text-transform:uppercase}
.cta p{margin:0 auto var(--ssp-s4);max-width:560px;font-size:1.1rem}

/* ----- Listing page ----- */
.filters{background:var(--ssp-white);border:1px solid var(--ssp-line);border-radius:var(--ssp-radius-lg);box-shadow:var(--ssp-shadow);padding:var(--ssp-s4) var(--ssp-s5);
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--ssp-s3);align-items:end;margin-bottom:var(--ssp-s4)}
.filters label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ssp-muted)}
.filters .btn{width:100%;padding:.72rem 1rem}
@media (max-width:1000px){.filters{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.filters{grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--ssp-s4)}}
.result-count{color:var(--ssp-muted);margin:0 0 var(--ssp-s4);font-weight:600}

/* ----- Pig detail ----- */
.crumb{margin:0 0 var(--ssp-s4);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:var(--ssp-fs-sm)}
.crumb a{color:var(--ssp-ink);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}.crumb a:hover{color:var(--ssp-red)}
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--ssp-s6);align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:var(--ssp-s5)}}
.gallery-main{position:relative;border-radius:var(--ssp-radius-lg);overflow:hidden;background:#E6E6E6;aspect-ratio:4/3;border:1px solid var(--ssp-line)}
.gallery-main img{width:100%;height:100%;object-fit:cover}
.gallery-main .badge{position:absolute;top:.8rem}.gallery-main .badge-example{left:.8rem}.gallery-main .badge-status{right:.8rem}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ssp-s2);margin-top:var(--ssp-s2)}
.thumbs button{padding:0;min-height:44px;border:3px solid transparent;border-radius:var(--ssp-radius);overflow:hidden;cursor:pointer;background:none}
.thumbs button.active{border-color:var(--ssp-red)}
.gallery-note{margin-top:var(--ssp-s2)}
.pig-panel .badges{display:flex;gap:.4rem;flex-wrap:wrap}
.pig-panel h1{margin:var(--ssp-s3) 0 var(--ssp-s1);font-size:clamp(1.7rem,4vw,2.8rem);overflow-wrap:anywhere;hyphens:auto}
.pig-panel .price{font-size:1.8rem;margin:var(--ssp-s2) 0 0}
.pig-panel h2{font-size:1.05rem;text-transform:uppercase;letter-spacing:.08em;margin:var(--ssp-s5) 0 var(--ssp-s2)}
.notes{margin:var(--ssp-s4) 0 0}
.buy-box{margin-top:var(--ssp-s5);border:2px solid var(--ssp-black);border-top:6px solid var(--ssp-red);border-radius:var(--ssp-radius-lg);padding:var(--ssp-s5);background:var(--ssp-white)}
.buy-box h2,.buy-box h3{margin:0 0 var(--ssp-s2);text-transform:uppercase;font-size:1.2rem}
.buy-box .secure{margin:0 0 var(--ssp-s3)}
.buy-options{display:grid;grid-template-columns:1fr 1fr;gap:var(--ssp-s3);margin-top:var(--ssp-s3)}
@media (max-width:480px){.buy-options{grid-template-columns:1fr}}
.buy-opt{display:flex;flex-direction:column;gap:.4rem;background:var(--ssp-paper);border:1px solid var(--ssp-line);border-radius:var(--ssp-radius);padding:var(--ssp-s4)}
.buy-opt strong{text-transform:uppercase;letter-spacing:.05em;font-size:.9rem}
.buy-opt .amt{font-family:var(--ssp-font-head);font-size:1.6rem;font-weight:800;color:var(--ssp-ink);font-variant-numeric:tabular-nums}
.buy-opt .btn{margin-top:auto;width:100%}
.buy-box .btn-row{margin-top:var(--ssp-s4)}

/* ----- About / contact ----- */
.prose h2{margin-top:0}.prose h3{margin:var(--ssp-s5) 0 var(--ssp-s2);text-transform:uppercase;font-size:1.05rem;letter-spacing:.05em}
.prose ul{padding-left:1.2rem}.prose li{margin-bottom:.35rem}
.contact-card p{margin:0 0 var(--ssp-s3)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--ssp-s3)}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}
#c-note{margin-top:var(--ssp-s3)}
.turnstile-slot{margin:0 0 var(--ssp-s4)}

/* ----- Placeholder page (e.g. /auction/ until it's built) ----- */
.coming-soon{text-align:center;padding:var(--ssp-s8) 0}
.coming-soon p{max-width:560px;margin:0 auto var(--ssp-s4)}
.coming-soon .btn-row{justify-content:center}

/* ----- Contact form honeypot (hidden from people, still in the form for bots; no inline style needed for the CSP) ----- */
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}

/* ----- Phones ----- */
@media (max-width:600px){
  section{padding:var(--ssp-s6) 0}
  .hero{padding:var(--ssp-s6) 0}.hero-logo{width:132px}
  .page-head{padding:var(--ssp-s6) 0 var(--ssp-s5)}
  .section-head{margin-bottom:var(--ssp-s4)}
  .sale{padding:var(--ssp-s3) var(--ssp-s4);gap:var(--ssp-s3)}
  .panel{padding:var(--ssp-s4)}
  .buy-box{padding:var(--ssp-s4)}
  .btn-row .btn{flex:1 1 100%}
  .filters .btn{padding:.6rem 1rem}
}
@media (max-width:430px){.pedigree{grid-template-columns:1fr}.spec{gap:var(--ssp-s3) var(--ssp-s4)}}

/* ----- Sticky price / buy bar (pig page, phones only). Shown by js/pig-page.js; hides while the buy box is on screen. ----- */
.buy-bar{display:none}
@media (max-width:900px){
  .buy-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;justify-content:space-between;gap:var(--ssp-s3);
    padding:.6rem 4% calc(.6rem + env(safe-area-inset-bottom));background:var(--ssp-black);color:var(--ssp-white);border-top:3px solid var(--ssp-red);
    transition:transform .2s}
  .buy-bar.is-hidden{transform:translateY(110%);visibility:hidden}
  .buy-bar-info{min-width:0;display:flex;flex-direction:column;line-height:1.15}
  .buy-bar-name{font-weight:700;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#DADADA}
  .buy-bar-price{font-family:var(--ssp-font-head);font-weight:800;font-size:1.25rem;color:var(--ssp-white)}
  .buy-bar .btn{flex:none;padding:.7rem 1rem}
  body.has-buy-bar{padding-bottom:76px}
  html:has(body.has-buy-bar){scroll-padding-bottom:90px}
}

/* ----- Empty states (no pigs listed / no sales posted yet) ----- */
.empty-state{background:var(--ssp-white);border:1px solid var(--ssp-line);border-left:6px solid var(--ssp-red);border-radius:var(--ssp-radius-lg);box-shadow:var(--ssp-shadow);
  padding:var(--ssp-s5) var(--ssp-s6);max-width:760px}
.empty-state p{margin:0 0 var(--ssp-s2)}
.empty-title{font-family:var(--ssp-font-head);font-weight:800;font-size:var(--ssp-fs-lg);text-transform:uppercase;letter-spacing:.02em;color:var(--ssp-ink)}
.empty-links{font-weight:700;overflow-wrap:anywhere}
.empty-links a{display:inline-flex;align-items:center;min-height:44px}
.empty-note{margin:0;background:var(--ssp-white);border:1px solid var(--ssp-line);border-left:6px solid var(--ssp-red);border-radius:var(--ssp-radius);padding:var(--ssp-s4) var(--ssp-s5);font-weight:600}
.not-found{max-width:760px}
.not-found .btn-row{margin-top:var(--ssp-s4)}

/* ----- Logo panel (home "About the farm" until farm photos are ready) ----- */
.logo-frame{background:var(--ssp-black);display:grid;place-items:center;padding:var(--ssp-s6);aspect-ratio:4/3;border-color:var(--ssp-black)}
.logo-frame img{width:min(300px,70%);height:auto;border-radius:50%;box-shadow:0 0 0 8px rgba(255,255,255,.05),0 20px 40px rgba(0,0,0,.5)}

/* ----- About: address block ----- */
.address-card{background:var(--ssp-white);border:1px solid var(--ssp-line);border-top:6px solid var(--ssp-red);border-radius:var(--ssp-radius-lg);box-shadow:var(--ssp-shadow);padding:var(--ssp-s5)}
.address-card h2{font-size:var(--ssp-fs-lg);text-transform:uppercase;letter-spacing:.04em;margin:0 0 var(--ssp-s3)}
.address-card address{font-style:normal;font-size:1.15rem;line-height:1.5;margin:0 0 var(--ssp-s4)}
.address-card p{margin:0 0 var(--ssp-s4);overflow-wrap:anywhere}
@media (max-width:600px){.empty-state{padding:var(--ssp-s4)}.address-card{padding:var(--ssp-s4)}.logo-frame{padding:var(--ssp-s5)}}

/* ----- Deposit terms (text comes from js/config.js via depositTerms()) ----- */
.terms-note{background:var(--ssp-white);border:1px solid var(--ssp-line);border-left:6px solid var(--ssp-black);border-radius:var(--ssp-radius);padding:var(--ssp-s4) var(--ssp-s5);margin:0 0 var(--ssp-s5)}
.terms-note h2{font-size:var(--ssp-fs-lg);text-transform:uppercase;letter-spacing:.04em;margin:0 0 var(--ssp-s2)}
.terms-note p{margin:0}
.buy-box .terms{margin:0 0 var(--ssp-s3);font-weight:700;color:var(--ssp-ink)}
@media (max-width:600px){.terms-note{padding:var(--ssp-s3) var(--ssp-s4)}}