/* ----------  Mobile overrides for resource-display ---------- */
@media (max-width: 576px) {

  /* lay panels out vertically and let them size naturally */
  .resource-display{
    flex-direction:column;
    align-items:center;
    height:auto;                 /* drop the fixed calc() height            */
    padding:0 10px;
  }

  .resource-display .resource-display-current,
  .resource-display .upcoming-reservations{
    padding-top:20px;            /* less top whitespace                     */
    overflow:visible;            /* allow natural flow                      */
  }

  /* status banners & action button */
  .resource-display-available,
  .resource-display-checkin,
  .resource-display-unavailable{
    width:100%;
    margin:10px 0;
    font-size:1.2em;
    line-height:2.2em;
  }

  .resource-display-action{
    width:100%;
    font-size:1.4em;
    line-height:44px;
    padding:0 10px;
  }

  /* headline text */
  .resource-display-date,
  .resource-display-name{
    font-size:1.8em;
    text-align:center;
  }

  /* header section */
  #page-resource-display-resource .resource-display-header{
    flex-direction:column;
    height:auto;
    text-align:center;
    padding:10px;
  }
  #page-resource-display-resource .resource-display-header .resource-display-resource-name{
    font-size:2em;
    margin-bottom:.25em;
  }
  #page-resource-display-resource .resource-display-header .date,
  #page-resource-display-resource .resource-display-header .time{
    font-size:1.4em;
  }

  /* reservation rows */
  .resource-display-reservation,
  .resource-display-none{
    max-width:90vw;              /* let text wrap instead of ellipsis       */
    font-size:1rem;
    white-space:normal;
  }

  /* footer section */
  #page-resource-display-resource .resource-display-footer{
    flex-direction:column;
    align-items:center;
    padding:10px;
  }
  #page-resource-display-resource .resource-display-qr{
    align-self:center;
    margin:10px 0;
  }
  #page-resource-display-resource .resource-display-qr img{
    width:80px;                  /* smaller QR on phones                    */
  }

  /* tables inside the panel */
  #page-resource-display-resource table.reservations td{
    font-size:.9em;
  }

  .resource-display .upcoming-separator{
    margin:10px 0;
  }
}
/* ----------  end mobile patch ---------- */