/**
 * Fronteras Podcast Player
 * @author Fronteras Dev Team
 * @link https://fronteras.io
 */

/* Player Container */
.fpp-player{max-width:900px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.fpp-content{display:flex;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.fpp-info{flex:1;padding:36px 40px;display:flex;flex-direction:column;justify-content:center;min-width:0}

/* Typography */
.fpp-title{font-size:1.1rem;font-weight:600;color:#1a1a1a;margin:0 0 4px;line-height:1.3}
.fpp-title a{color:inherit;text-decoration:none;transition:color .2s}
.fpp-title a:hover{color:#007b8a}
.fpp-subtitle{font-size:.95rem;color:#4a4a4a;margin:0 0 24px;line-height:1.4}
.fpp-subtitle em{font-style:italic;color:#007b8a}
.fpp-sep{margin:0 6px;color:#999}
.fpp-read-more{font-size:.85rem;color:#007b8a;text-decoration:none;margin-left:6px;font-weight:500;cursor:pointer;transition:color .2s}
.fpp-read-more:hover{color:#005a66;text-decoration:underline}

/* Progress Bar - Enhanced */
.fpp-progress{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.fpp-time{font-size:.75rem;font-weight:500;color:#888;min-width:38px;font-variant-numeric:tabular-nums;user-select:none}
.fpp-current{text-align:right}
.fpp-duration{text-align:left}

.fpp-progress-bar{flex:1;position:relative;height:24px;display:flex;align-items:center;cursor:pointer}
.fpp-progress-track{position:relative;width:100%;height:6px;background:#e0e0e0;border-radius:3px;overflow:hidden}
.fpp-progress-fill{position:absolute;left:0;top:0;height:100%;width:0;background:#007b8a;border-radius:3px;transition:width .05s linear;pointer-events:none}

.fpp-progress-thumb{position:absolute;left:0;top:50%;width:16px;height:16px;background:#007b8a;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 2px 6px rgba(0,123,138,.4);opacity:0;transition:opacity .2s,transform .15s;pointer-events:none;z-index:2}
.fpp-progress-bar:hover .fpp-progress-thumb,.fpp-player.fpp-seeking .fpp-progress-thumb{opacity:1}
.fpp-progress-bar:hover .fpp-progress-thumb{transform:translate(-50%,-50%) scale(1.1)}
.fpp-player.fpp-seeking .fpp-progress-thumb{transform:translate(-50%,-50%) scale(1.2)}

.fpp-scrubber{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;-webkit-appearance:none;appearance:none;z-index:3}
.fpp-scrubber::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:transparent;cursor:pointer}
.fpp-scrubber::-moz-range-thumb{width:20px;height:20px;background:transparent;border:none;cursor:pointer}

/* Controls - Minimal Clean */
.fpp-controls{display:flex;align-items:center;justify-content:center;gap:32px}
.fpp-btn{background:none!important;border:none!important;box-shadow:none!important;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;color:#1a1a1a;transition:color .2s,transform .2s}
.fpp-btn:hover{color:#555}
.fpp-btn:active{transform:scale(.9)}
.fpp-btn svg{display:block;fill:currentColor}
.fpp-prev svg,.fpp-next svg{width:24px;height:24px}
.fpp-play{color:#1a1a1a!important;padding:8px!important}
.fpp-play:hover{color:#555!important;transform:none}
.fpp-play svg{width:32px;height:32px;fill:currentColor!important;filter:none!important}
.fpp-play .fpp-icon-play{margin-left:0}
.fpp-play .fpp-icon-pause{display:none}
.fpp-player.fpp-playing .fpp-play .fpp-icon-play{display:none}
.fpp-player.fpp-playing .fpp-play .fpp-icon-pause{display:block}
.fpp-player.fpp-loading .fpp-play{opacity:.5;pointer-events:none}

/* Guests Grid */
.fpp-guests{display:flex;flex-wrap:wrap;flex-shrink:0;width:240px;min-width:240px;min-height:200px;background:#f0f0f0}
.fpp-g1 .fpp-guest{width:100%;height:100%}
.fpp-g2 .fpp-guest{width:50%;height:100%}
.fpp-g3 .fpp-guest{width:50%;height:50%}
.fpp-g3 .fpp-guest:first-child{width:100%}
.fpp-g4 .fpp-guest{width:50%;height:50%}

.fpp-guest{position:relative;overflow:hidden}
.fpp-guest img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.fpp-guest:hover img{transform:scale(1.08)}
.fpp-guest-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e0e0e0,#c5c5c5);color:#999}
.fpp-guest-ph svg{width:40px;height:40px;fill:currentColor;opacity:.5}

.fpp-guest-info{position:absolute;bottom:0;left:0;right:0;padding:16px 12px 10px;background:linear-gradient(transparent,rgba(0,0,0,.7));display:flex;flex-direction:column;gap:2px;opacity:0;transform:translateY(6px);transition:all .3s}
.fpp-guest:hover .fpp-guest-info{opacity:1;transform:translateY(0)}
.fpp-guest-name{font-size:.8rem;font-weight:600;color:#fff}
.fpp-guest-role{font-size:.65rem;color:rgba(255,255,255,.85)}

.fpp-audio{display:none!important}

/* Guests Section */
.fpp-guests-section{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.fpp-header{text-align:center;margin-bottom:32px}
.fpp-header h2{font-size:1.5rem;font-weight:600;color:#1a1a1a;margin:0 0 8px}
.fpp-header p{color:#666;font-size:.95rem;margin:0}

.fpp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.fpp-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.06);transition:transform .3s,box-shadow .3s}
.fpp-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.1)}
.fpp-card-img{width:100%;height:240px;overflow:hidden;background:#f0f0f0}
.fpp-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.fpp-card:hover .fpp-card-img img{transform:scale(1.05)}
.fpp-card-body{padding:16px}
.fpp-card-name{font-size:1rem;font-weight:600;color:#1a1a1a;margin:0 0 4px}
.fpp-card-role{font-size:.8rem;color:#007b8a;margin:0 0 8px;font-weight:500}
.fpp-card-bio{font-size:.85rem;color:#666;line-height:1.5;margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.fpp-social{display:flex;gap:8px}
.fpp-social a{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:#f5f5f5;border-radius:50%;transition:background .2s}
.fpp-social a:hover{background:#007b8a}
.fpp-social svg{width:14px;height:14px;fill:#666;transition:fill .2s}
.fpp-social a:hover svg{fill:#fff}

/* Responsive */
@media(max-width:768px){
.fpp-content{flex-direction:column-reverse}
.fpp-info{padding:24px 20px}
.fpp-guests{width:100%!important;min-width:100%!important;height:160px;min-height:160px!important}
.fpp-g1 .fpp-guest,.fpp-g2 .fpp-guest,.fpp-g3 .fpp-guest,.fpp-g4 .fpp-guest{height:100%}
.fpp-g3 .fpp-guest:first-child{width:50%;height:100%}
.fpp-grid{grid-template-columns:repeat(2,1fr);gap:16px}
.fpp-card-img{height:180px}
}

@media(max-width:480px){
.fpp-info{padding:20px 16px}
.fpp-progress{gap:8px}
.fpp-time{font-size:.7rem;min-width:32px}
.fpp-controls{gap:24px}
.fpp-prev svg,.fpp-next svg{width:20px;height:20px}
.fpp-play svg{width:28px;height:28px}
.fpp-grid{grid-template-columns:1fr}
}