/* Explore Normalize styles: simple comments added by me to explain sections. */

.explore-page{
    
    font-size: 16px;
    line-height: 1.45;
    --brand:#5C475B;
    --border:#e4dce3;
  }
  
  
  .explore-page .cre-wrap,
  .explore-page .tuts-wrap{
    max-width: 1200px;
    margin: 26px auto 80px;
    padding: 0 18px;
  }
  
  
  .explore-page .filters{
    display: flex;
    justify-content: center;
    margin: 14px 0 22px;
  }
  
  .explore-page .filter-capsule{
    display:flex; align-items:center; gap:12px;
    height: 46px;                       
    padding: 6px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
  }
  .explore-page .filter-capsule label{
    font-weight: 800;
    font-size: 14px;                    
    color: var(--brand);
    white-space: nowrap;
    line-height: 1;
    margin: 0 2px 0 0;
  }
  .explore-page .filter-capsule select{
    height: 32px;                       
    min-width: 150px;
    border: none; border-radius: 999px;
    padding: 6px 34px 6px 12px;         
    background: #fff;
    color: var(--brand);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
    appearance: none;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%235C475B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
  }
  
  
  .explore-page .toggle-pill a{
    font-size: 18px;                    
    padding: 10px 22px;
    border-radius: 28px;
  }
  
  
  .explore-page .cre-grid,
  .explore-page .tuts-grid{
    gap: 24px;
  }
  .explore-page .cre-card,
  .explore-page .tut-card{
    border-radius: 16px;
  }
  
  
  .explore-page header,
  .explore-page nav,
  .explore-page footer{
    font-size: 16px;
  }
  
  
  /* Responsive styles */
@media (max-width: 480px){
    .explore-page .filter-capsule{ height: 42px; padding: 6px 12px; }
    .explore-page .filter-capsule select{ min-width: 130px; height: 30px; }
    .explore-page .toggle-pill a{ font-size: 16px; padding: 8px 18px; }
  }