/* Progress.tz v2.9.20 — Instagram-Inspired Shorts Grid */

:root{
  --ig-gap:18px;
  --ig-card-radius:16px;
}

/* Base card polish */
:is(
  .progress-shorts-social,
  .progress-shorts-grid,
  .shorts-grid,
  .shorts-feed,
  .progress-shorts-feed,
  [data-shorts-feed]
) > :is(
  .ps-post,
  [data-ps-post="1"],
  .short-card,
  .shorts-card,
  .progress-short-card
){
  overflow:hidden!important;
  min-width:0!important;
  border-radius:var(--ig-card-radius)!important;
}

/* Instagram-style media emphasis */
:is(
  .ps-post,
  [data-ps-post="1"],
  .short-card,
  .shorts-card,
  .progress-short-card
) :is(
  .ps-media,
  .feature-media,
  .featured-media,
  .media-wrap,
  .short-media
){
  width:100%!important;
  overflow:hidden!important;
  background:var(--p-surface-2,#f8fafc);
}

:is(
  .ps-post,
  [data-ps-post="1"],
  .short-card,
  .shorts-card,
  .progress-short-card
) :is(img,video){
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  object-fit:cover!important;
}

/* Desktop: 3-column Instagram-inspired grid */
@media (min-width:1200px){

  :is(
    .progress-shorts-social,
    .progress-shorts-grid,
    .shorts-grid,
    .shorts-feed,
    .progress-shorts-feed,
    [data-shorts-feed]
  ){
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:var(--ig-gap)!important;
    align-items:start!important;
  }

  :is(
    .progress-shorts-social,
    .progress-shorts-grid,
    .shorts-grid,
    .shorts-feed,
    .progress-shorts-feed,
    [data-shorts-feed]
  ) > :is(
    .ps-post,
    [data-ps-post="1"],
    .short-card,
    .shorts-card,
    .progress-short-card
  ){
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
  }

  :is(
    .ps-post,
    [data-ps-post="1"],
    .short-card,
    .shorts-card,
    .progress-short-card
  ) :is(
    .ps-media,
    .feature-media,
    .featured-media,
    .media-wrap,
    .short-media
  ){
    aspect-ratio:1 / 1!important;
  }

  :is(
    .ps-post,
    [data-ps-post="1"],
    .short-card,
    .shorts-card,
    .progress-short-card
  ) :is(
    .ps-media,
    .feature-media,
    .featured-media,
    .media-wrap,
    .short-media
  ) :is(img,video){
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }

  /* tighter text density for 3-column cards */
  .progress-shorts-social .ps-body{
    padding:15px 16px!important;
  }

  .progress-shorts-social .ps-title{
    font-size:18px!important;
    line-height:1.28!important;
    margin-bottom:8px!important;
  }

  .progress-shorts-social .ps-excerpt{
    font-size:14px!important;
    line-height:1.55!important;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  /* Load More and feed-level controls span all columns */
  :is(
    .progress-shorts-social,
    .progress-shorts-grid,
    .shorts-grid,
    .shorts-feed,
    .progress-shorts-feed,
    [data-shorts-feed]
  ) > :is(
    .load-more,
    .load-more-wrap,
    .shorts-load-more,
    [data-load-more],
    .feed-status,
    .feed-empty
  ){
    grid-column:1 / -1!important;
    width:100%!important;
  }
}

/* Landscape tablet / small desktop: 2 columns */
@media (min-width:900px) and (max-width:1199px){

  :is(
    .progress-shorts-social,
    .progress-shorts-grid,
    .shorts-grid,
    .shorts-feed,
    .progress-shorts-feed,
    [data-shorts-feed]
  ){
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:20px!important;
    align-items:start!important;
  }

  :is(
    .progress-shorts-social,
    .progress-shorts-grid,
    .shorts-grid,
    .shorts-feed,
    .progress-shorts-feed,
    [data-shorts-feed]
  ) > :is(
    .ps-post,
    [data-ps-post="1"],
    .short-card,
    .shorts-card,
    .progress-short-card
  ){
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
  }

  :is(
    .ps-post,
    [data-ps-post="1"],
    .short-card,
    .shorts-card,
    .progress-short-card
  ) :is(
    .ps-media,
    .feature-media,
    .featured-media,
    .media-wrap,
    .short-media
  ){
    aspect-ratio:4 / 3!important;
  }

  :is(
    .ps-post,
    [data-ps-post="1"],
    .short-card,
    .shorts-card,
    .progress-short-card
  ) :is(
    .ps-media,
    .feature-media,
    .featured-media,
    .media-wrap,
    .short-media
  ) :is(img,video){
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }

  :is(
    .progress-shorts-social,
    .progress-shorts-grid,
    .shorts-grid,
    .shorts-feed,
    .progress-shorts-feed,
    [data-shorts-feed]
  ) > :is(
    .load-more,
    .load-more-wrap,
    .shorts-load-more,
    [data-load-more],
    .feed-status,
    .feed-empty
  ){
    grid-column:1 / -1!important;
  }
}

/* Mobile / portrait tablet: single-column social feed */
@media (max-width:899px){

  :is(
    .progress-shorts-social,
    .progress-shorts-grid,
    .shorts-grid,
    .shorts-feed,
    .progress-shorts-feed,
    [data-shorts-feed]
  ){
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:18px!important;
  }

  :is(
    .progress-shorts-social,
    .progress-shorts-grid,
    .shorts-grid,
    .shorts-feed,
    .progress-shorts-feed,
    [data-shorts-feed]
  ) > :is(
    .ps-post,
    [data-ps-post="1"],
    .short-card,
    .shorts-card,
    .progress-short-card
  ){
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
  }
}