/* Livestock Markets - responsive.css
   Loaded LAST by includes/header.php, so it applies to the public site, the user dashboard and the admin portal.
   Covers:
     1. footer resting at the bottom of short pages (all three shells)
     2. guard-rails against the old inline CSS in header.php that broke small screens
     3. card / image / grid sizing so nothing renders oversized on phones and tablets
     4. tables, forms, media and long words that used to push the page sideways
   Breakpoints follow Bootstrap 4: 576 / 768 / 992 / 1200. */

/* ============ 1. sticky footer ============ */
html{height:100%;-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
/* public site: body is a flex column, the page grows, the footer is pushed to the bottom */
body.lv-public{display:flex!important;flex-direction:column!important;min-height:100vh;min-height:100dvh;margin:0}
body.lv-public>main,body.lv-public>#lvMain{flex:1 0 auto;width:100%}
body.lv-public>footer,body.lv-public>.lvf{margin-top:auto!important;flex-shrink:0}
/* user dashboard: the content column is a flex column, its footer sits at the bottom */
body.lv-dash{display:block!important;min-height:100vh;min-height:100dvh}
.lv-dash .lv-shell{min-height:100vh;min-height:100dvh}
.lv-dash .lv-main{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.lv-dash .lv-content{flex:1 0 auto}
.lv-dash .lv-foot{margin-top:auto;flex-shrink:0}
/* admin portal */
body.adm{min-height:100vh;min-height:100dvh}
.adm .adm-main{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.adm .adm-content{flex:1 0 auto}
.adm .adm-foot{margin-top:auto;flex-shrink:0}

/* ============ 2. neutralise old inline rules from header.php ============ */
/* the old "hr" floated left at 200px wide and dragged the next block beside it */
.lv-public hr,.lv-dash hr,.adm hr{float:none!important;width:100%!important;border:0!important;border-top:1px solid var(--lv-line,#dfe8e3)!important;clear:both;margin:1rem 0}
/* on phones the old CSS gave every .card a 0.5em margin, which broke two-up grids */
@media(max-width:576px){
  .lv-public .card,.lv-dash .card,.adm .card{margin-left:0!important;margin-right:0!important}
  .lv-public #welcome>div>div,.lv-public #welcome>div>div>a>img{margin-left:0!important;margin-right:0!important}
}
/* old fixed widths on search boxes (88% + 12%) overflowed small screens */
.lv-public form.form-inline{flex-wrap:wrap}
.lv-public .form-inline .form-control{max-width:100%}

/* ============ 3. cards, images and grids ============ */
img,svg,video,canvas,iframe,embed,object{max-width:100%}
img{height:auto}
.lv-public .container,.lv-public .container-fluid,.lv-dash .lv-content,.adm .adm-content{min-width:0}
.row>[class*="col"]{min-width:0}

/* Bootstrap cards: images keep a 4:3 frame and never grow taller than the card needs */
.card{max-width:100%;min-width:0}
.card-img-top{width:100%;object-fit:cover}
.lv-public .card-img-top,.lv-dash .card-img-top{aspect-ratio:4/3;height:auto!important;max-height:220px}
.card-body{min-width:0;overflow-wrap:anywhere}
.card-title,.card-text{overflow-wrap:anywhere}

/* Bootstrap card grids on public pages: two per row on phones instead of one huge card */
@media(max-width:575.98px){
  .lv-public .row>[class*="col-"]:has(>.card .card-img-top),
  .lv-public .row>[class*="col-"]:has(>a.card>.card-img-top){flex:0 0 50%;max-width:50%}
  .lv-public .row>[class*="col-"]:has(>.card .card-img-top) .card-body,
  .lv-public .row>[class*="col-"]:has(>a.card>.card-img-top) .card-body{padding:.5rem .55rem!important}
  .lv-public .row>[class*="col-"]:has(>.card .card-img-top) .card-img-top{max-height:150px}
  .lv-public .card .h6,.lv-public .card h6{font-size:.88rem}
  .lv-public .card .small,.lv-public .card small{font-size:.76rem}
}
/* tablets: three cards per row instead of two oversized ones */
@media(min-width:768px) and (max-width:991.98px){
  .lv-public .row>.col-sm-6:has(>.card .card-img-top),
  .lv-public .row>.col-sm-6:has(>a.card>.card-img-top){flex:0 0 33.3333%;max-width:33.3333%}
  .lv-public .card-img-top{max-height:170px}
}
/* the old horizontal mini-cards (image 4 cols + text 8 cols) */
.lv-public .card .row.no-gutters>.col-4 img{width:100%;height:100px!important;object-fit:cover;border-radius:8px}
.lv-public .card-deck{margin:0;width:100%}
.lv-public .card-deck>.card{flex:1 1 100%;margin:0 0 1rem}

/* new public listing cards (public.css .lvc / .lvh-grid*) */
.lvc{min-width:0}
.lvc-body b{overflow-wrap:anywhere}
.lvh-grid4,.lvh-grid3{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
@media(min-width:1100px){.lvh-grid4{grid-template-columns:repeat(4,minmax(0,1fr))}.lvh-grid3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:768px) and (max-width:1099.98px){.lvh-grid4,.lvh-grid3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767.98px){.lvh-grid4,.lvh-grid3{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}}
@media(max-width:339.98px){.lvh-grid4,.lvh-grid3{grid-template-columns:1fr}}
/* carousel: 4 / 3 / 2.2 cards visible, never one giant card */
@media(max-width:575.98px){.lvs-item{flex-basis:44%}}
/* category tiles: 6 / 4 / 3 per row */
.lvh-cats{grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr))}
@media(max-width:575.98px){.lvh-cats{grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}.lvh-cat-name{font-size:.8rem}.lvh-cat small{font-size:.7rem}.lvh-cat-ico{font-size:1.8rem}}
@media(max-width:359.98px){.lvh-cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* listing page: big photo stays in proportion on tablets */
.lvx-photo{max-height:70vh}
@media(min-width:768px) and (max-width:991.98px){.lvx{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.lvx-photo{aspect-ratio:1/1}}
@media(max-width:767.98px){.lvx-photo{max-height:58vh;aspect-ratio:4/3}}
/* listings page filter column narrows on small laptops */
@media(min-width:992px) and (max-width:1199.98px){.lvl-grid{grid-template-columns:220px minmax(0,1fr)}}
.lvl-grid>*{min-width:0}
/* how-it-works flow chart: lanes stack on tablets, nodes two-up on mid phones */
@media(min-width:576px) and (max-width:767.98px){
  .lvd-row,.lvd-row.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
  .lvd-row .lvd-arrow{display:none!important}
  .lvd-row:not(.four)>.lvd-node:last-child{grid-column:1/-1}
}
/* tablets: the four shared steps sit 2 x 2 (the old 3-column version overflowed the screen at 768-991px) */
@media(min-width:768px) and (max-width:991.98px){
  .lvd-row.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
  .lvd-row.four .lvd-arrow{display:none!important}
}
.lvd-node{min-width:0;overflow-wrap:anywhere}

/* dashboard listing cards: 2 per row on phones (was 1 big card), 3 on tablets */
.lv-dash .lv-cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
@media(min-width:768px) and (max-width:991.98px){.lv-dash .lv-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767.98px){.lv-dash .lv-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.lv-dash .lv-lcard .body{padding:.55rem .6rem}.lv-dash .lv-lcard .price{font-size:1rem}.lv-dash .lv-lcard .acts .btn{padding:.3rem .5rem;font-size:.78rem}}
@media(max-width:339.98px){.lv-dash .lv-cards{grid-template-columns:1fr}}
.lv-dash .lv-lcard,.lv-dash .lv-grid>*{min-width:0}
/* stat tiles: 4 / 2 / 2 */
@media(max-width:575.98px){.lv-dash .lv-g4{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}}

/* ============ 4. tables, forms, long words ============ */
.table-responsive,.lv-public table{-webkit-overflow-scrolling:touch}
@media(max-width:767.98px){
  .lv-dash .lv-content table:not(.lv-table.stack),.adm .adm-content table{display:block;max-width:100%;overflow-x:auto}
}
.lv-public p,.lv-public li,.lv-public td,.lv-dash td,.adm td{overflow-wrap:anywhere}
input,select,textarea{max-width:100%}
@media(max-width:767.98px){.lv-dash input,.lv-dash select,.lv-dash textarea,.adm input,.adm select,.adm textarea{font-size:16px}}
.modal-dialog{max-width:min(500px,calc(100vw - 1rem))}
.modal-lg{max-width:min(800px,calc(100vw - 1rem))}

/* type scale: headings shrink smoothly instead of jumping */
.lv-public main h1:not(.h4):not(.h5):not(.h6):not(.h2):not(.h3),.lv-public main .h1{font-size:clamp(1.3rem,1.05rem + 1.2vw,1.9rem)}
.lv-public main h2:not(.h4):not(.h5):not(.h6):not(.h3),.lv-public main .h2{font-size:clamp(1.15rem,1rem + .8vw,1.5rem)}
.lv-public main h3:not(.h4):not(.h5):not(.h6),.lv-public main .h3{font-size:clamp(1.05rem,.95rem + .5vw,1.3rem)}
.lv-public main .h4,.lv-public main h4:not(.h5):not(.h6){font-size:clamp(1rem,.95rem + .3vw,1.2rem)}

/* consistent side gutters on phones */
@media(max-width:575.98px){
  .lvn-wrap,.lv-public .container{padding-left:16px;padding-right:16px}
  .lv-public .page-box{border-radius:10px}
}

/* trust cards: as many columns as there are cards (1-3), stacking on narrow screens */
.lvt-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
/* About us title */
.lv-page .lvp-h1{font-size:clamp(1.3rem,1.05rem + 1.2vw,1.7rem);font-weight:700;color:var(--lv-green-dark);border-left:5px solid var(--lv-gold);padding-left:.7rem;margin:0 0 .6rem}