/* v627 - LIST on phones + iPad: columns sized to their content (pairs with js/302-list-fit.js). Loaded AFTER css/301.
   Fixes: unit number drawn on top of the rate; "OUT OF MARKET" cut by the screen edge; text bleeding into the next column.
   Roll back: remove this <link> and js/302 in index.html. */

@media (max-width:1024px){
  /* ---- 1) safety net (works even if the script has not run yet): nothing may ever leave its own cell ---- */
  /* root cause of the overlap: items were left/start-aligned (v612), so their box = their content width and could be WIDER than their
     column. max-width:100% of the grid area keeps every box inside its own column; overflow then clips (never paints over a neighbour). */
  .avl-m > .m{overflow:hidden;min-width:0;max-width:100%}
  .avl-m > .m-status,.avl-m > .m-flag{overflow:visible}
  .m-unit-no{display:block;flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:calc(var(--l-val)*var(--m-k,1))}
  .m-rate{white-space:nowrap;font-size:calc(var(--l-val)*var(--m-k,1))}
  .m-view{min-width:0}
  .m-view .m-vp{display:block;flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .m-view .m-vp > i{vertical-align:middle}
  .m-status .avl-status-badge{max-width:none;flex:none}      /* pill keeps its full label; the column is now as wide as the pill */
  .m-status .avl-viewings-badge{white-space:nowrap}
  /* long label (OUT OF MARKET): two short lines inside the pill, so the Status column stays as narrow as the others */
  .m-status .avl-status-badge.m-st-long{white-space:normal;max-width:100%;line-height:1.1;align-items:center;text-align:left}
  .avl-m-head > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ---- 2) phones: [unit | rate | view (takes what is left) | medal | status], widths from the script ---- */
@media (max-width:699px){
  .avl-m{
    column-gap:5px;
    grid-template-columns:var(--m-unit-w,minmax(78px,1.1fr)) var(--m-rate-w,minmax(48px,.8fr)) minmax(0,1fr) calc(var(--l-val)*1.8) var(--m-st-w,82px)}
  .avl-m-head > .h-view{padding-left:0}
  .m-view{padding-right:2px}
}
@media (max-width:380px){
  .avl-m{column-gap:4px;grid-template-columns:var(--m-unit-w,minmax(74px,1.1fr)) var(--m-rate-w,minmax(44px,.8fr)) minmax(0,1fr) 16px var(--m-st-w,76px)}
}

/* ---- 3) iPad: same idea, the measured width is a minimum so nothing is squeezed ---- */
@media (min-width:700px) and (max-width:1024px){
  .avl-m{grid-template-columns:minmax(max(110px,var(--m-unit-w,0px)),1.1fr) minmax(0,.9fr) minmax(0,1.4fr) minmax(0,1.1fr) 40px max(100px,var(--m-st-w,0px))}
  .avl-one-bld .avl-m{grid-template-columns:minmax(max(110px,var(--m-unit-w,0px)),1.1fr) minmax(0,.9fr) minmax(0,1.5fr) 40px max(100px,var(--m-st-w,0px))}
}

/* ---- 4) tight sheets (set by the script from the width that is really left for View): balcony tag first, then the view icon ---- */
@media (max-width:699px){
  .avl-sheet[data-vc] .m-bal{display:none}
  .avl-sheet[data-vc] .m-view-2 .m-vp > i{display:none}                    /* "Sea / Bldg": words matter more than the icon */
  .avl-sheet[data-vc="2"] .m-view > .m-ic0,.avl-sheet[data-vc="2"] .m-vp > i{display:none}
  .avl-sheet[data-vc="2"] .m-size,.avl-sheet[data-vc="2"] .avl-m-head .h-view{padding-left:0}
  .avl-sheet[data-vc="2"] .m-view .m-vp + .m-vp::before{margin-left:0}
}
@media (max-width:340px){
  .m-status .avl-status-badge > i:not(.avl-status-caret){display:none}      /* 320px phones: colour + word is enough, saves 14px */
  .m-status .avl-status-badge{padding-left:calc(var(--l-st)*.7)}
}