/*
  ----------------------------------------------------------------------
  Radiopress plugin - Autopo.st widgets

  Copyright 2014-25 Hollowtree Business Solutions / Sarah Gray
  All Rights Reserved.
  ----------------------------------------------------------------------

  Change log
  ----------------------------------------------------------------------
    When     Who  Details
  ----------------------------------------------------------------------
  ----------------------------------------------------------------------
  See code for notes about use of these styles.
  ----------------------------------------------------------------------
*/

/* Styling for Autopo.st now playing widgets. */
.rp-ap-np { border: 1px solid; }
.rp-ap-np { padding: 1% 1% 1% 1%; line-height: 1.2; }
.rp-ap-np h2 { margin: 1% 0% 1% 0%; font-weight: 600; /* semibold */ }
.rp-ap-np a { text-decoration: none; }
.rp-ap-np .rp-ap-np-row { overflow: hidden; width: 100%; margin: 2% 0% 2% 0%; display: block; }
.rp-ap-np .rp-ap-np-row-left70 { float: left; width: 70%; }
.rp-ap-np .rp-ap-np-row-right30 { float: right; width: 30%; }
.rp-ap-np img { float: left; width: 30%; margin-right: 2%; }
.rp-ap-np .rp-ap-np-row .rp-ap-np-row-after-img { float: left; width: 68%; }
.rp-ap-np .rp-ap-np-row .rp-ap-np-row-after-img .rp-ap-np-at { font-size: 80%; display: inline; }

.rp-ap-np { border-color: #6633cc; }

/* Styling for Autopo.st playlist widgets. */
.rp-ap-playlist { border: 1px solid; display: block; width: calc(100% - 2px); }
.rp-ap-pl { container-type: inline-size; /* container-name: rp-ap-pl-cont; */ }
.rp-ap-pl { display: block; width: calc(100% - 30px); overflow: hidden; padding: 1% 0% 1% 0%; padding-left: 14px; padding-right: 14px; line-height: 1.2; }
.rp-ap-pl h2 { margin: 1% 0% 1% 0%; font-weight: 600; /* semibold */ }
.rp-ap-pl a { text-decoration: none; }
.rp-ap-pl .rp-ap-pl-row { position: relative; display: inline-block; overflow: hidden; width: calc(100% - 2px); vertical-align: top; text-align: left; line-height: 1.2; }
.rp-ap-pl .rp-ap-pl-row { margin: 0%; margin-bottom: 15px; margin-right: 15px; padding: 0%; padding-right: 0.5%; border-radius: 8px; border: 1px solid; }
.rp-ap-pl .rp-ap-pl-row .rp-ap-pl-row-img { display: none; }
.rp-ap-pl .rp-ap-pl-row .rp-ap-pl-row-img img { display: none; }
.rp-ap-pl .rp-ap-pl-row .rp-ap-pl-row-track-info { width: calc(100% - 4px); height: 40px; padding: 2% 2% 2% 2%; font-size: 80%; }
.rp-ap-pl .rp-ap-pl-row .rp-ap-pl-row-at { width: calc(100% - 4px); margin: 5% 0% 0% 0%; padding: 2% 2% 2% 2%; font-size: 60%; }
.rp-ap-pl-row-below { position: relative; display: inline-block; overflow: hidden; width: 100%; vertical-align: top; text-align: left; line-height: 1.2; }
.rp-ap-pl-row-below { margin: 0%; margin: 0px 15px 15px 15px; padding: 0%; }
/* @container rp-ap-pl-cont (width > 249px) { */
@container (width > 249px) {
  .rp-ap-pl .rp-ap-pl-row .rp-ap-pl-row-img { float: left; display: inline-block; overflow: hidden; position: relative; width: 100px; height: 100px; margin: 0%; margin-right: 2%; }
  .rp-ap-pl .rp-ap-pl-row .rp-ap-pl-row-img img { display: inline; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
  .rp-ap-pl .rp-ap-pl-row .rp-ap-pl-row-track-info { width: 100%; height: auto; padding: 2% 0% 2% 0%; font-size: 80%; }
  .rp-ap-pl .rp-ap-pl-row .rp-ap-pl-row-at { display: inline; width: 100%; margin: 0%; padding: 2% 0% 2% 0%; font-size: 60%; }
}
/* @container rp-ap-pl-cont (width > 449px) { */
@container (width > 449px) {
  .rp-ap-pl { width: calc(100% - 14px); padding-left: 14px; padding-right: 0px; }
  .rp-ap-pl .rp-ap-pl-row { width: calc(50% - 21px); margin-right: 14px; padding: 0%; padding-bottom: 0.5%; }
  .rp-ap-pl .rp-ap-pl-row .rp-ap-pl-row-img { float: left; display: block; overflow: hidden; position: relative; width: 100%; height: auto; margin: 0%; margin-bottom: 2%; }
  .rp-ap-pl .rp-ap-pl-row .rp-ap-pl-row-track-info { float: left; width: 96%; height: 55px; padding: 1% 2% 1% 2%; font-size: 80%; }
  .rp-ap-pl .rp-ap-pl-row .rp-ap-pl-row-at { display: block; width: 96%; margin: 5% 0% 0% 0%; padding: 1% 2% 0% 2%; font-size: 60%; text-align: center; }
}
/* @container rp-ap-pl-cont (width > 599px) { */
@container (width > 599px) {
  .rp-ap-pl { width: calc(100% - 15px); padding-left: 15px; }
   .rp-ap-pl .rp-ap-pl-row { width: calc(33% - 20px); margin-right: 15px; }
}
/* @container rp-ap-pl-cont (width > 799px) { */
@container (width > 799px) {
  .rp-ap-pl { width: calc(100% - 16px); padding-left: 16px; }
  .rp-ap-pl .rp-ap-pl-row { float: left; width: calc(25% - 20px); margin-right: 16px; }
}
/* @container rp-ap-pl-cont (width > 1023px) { */
@container (width > 1023px) {
  .rp-ap-pl { width: calc(100% - 15px); padding-left: 15px; }
  .rp-ap-pl .rp-ap-pl-row { float: left; width: calc(20% - 18px); margin-right: 15px; }
}

.rp-ap-pl-block { border-color: #6633cc; }
.rp-ap-pl .rp-ap-pl-row { background-color: #ccffff; border-color: #6633cc; }

/* Styling for Autopo.st live player */
.rp-ap-player { padding: 0px; line-height: 1.2; }
.rp-ap-player h2 { margin: 1% 0% 1% 0%; font-weight: 600; /* semibold */ }
.rp-ap-player a { text-decoration: none; }
.rp-ap-player .rp-ap-player-row { overflow: hidden; width: 100%; margin: 2% 0% 2% 0%; display: block; }
.rp-ap-player-embed { width: 300px; height: 426px; border: 2px solid; padding: 0px 0px 5px 10px; } /* width and height can be altered by the widget. */

.rp-ap-player-embed { border-color: #6633cc; }