/* Catalog UI refinements introduced in core 1.5.5–1.5.6. Scoped to plugin markup so the
   installed theme does not need to be replaced for these layout corrections. */

/* Platform names belong to each rating cell, not to a detached table header. */
.company-card .source-label{
  display:block;
  min-height:28px;
  margin:0 0 8px;
  font-size:9px;
  line-height:1.25;
  letter-spacing:.45px;
  text-transform:uppercase;
  color:var(--muted,#62695f);
}
.company-card .rating-cell{
  min-width:0;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.company-card .rating-content{
  min-height:82px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.company-card .rating-content .score-link{
  display:flex;
  min-height:55px;
  flex-direction:column;
  justify-content:flex-start;
}
.company-card .rating-content .score-link strong{
  min-height:34px;
  display:flex;
  align-items:baseline;
}
.company-card .rating-content>.text-link,
.company-card .rating-content>.source-status{
  min-height:34px;
  display:flex;
  align-items:flex-start;
  padding-top:3px;
}

/* Compact factual profile: desktop/tablet only. Full notes and evidence stay in the company overview. */
.catalog-facts{display:none}
@media (min-width:801px){
  .catalog-facts{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
    padding-top:14px;
    margin-top:2px;
    border-top:1px solid var(--line,#dcded5);
  }
  .catalog-fact{
    min-width:0;
    padding:9px 10px 8px;
    border-radius:7px;
    background:var(--paper,#f7f6f0);
  }
  .catalog-fact>span{
    display:block;
    margin-bottom:4px;
    font-size:8px;
    line-height:1.3;
    letter-spacing:.35px;
    text-transform:uppercase;
    color:var(--muted,#62695f);
  }
  .catalog-fact>strong{
    display:block;
    font-size:10px;
    line-height:1.4;
    font-weight:650;
    color:var(--ink,#242a25);
  }
  .catalog-fact.is-unknown>strong{color:var(--muted,#62695f);font-weight:500}
}

/* The desktop card has three semantic columns: company, five-source panel and actions.
   Keeping the five ratings in their own panel lets the composite score occupy the free
   space below them instead of leaving a large empty rectangle. */
.catalog-composite-desktop{display:none}

@media (min-width:1201px){
  .company-card{
    grid-template-columns:minmax(300px,2.4fr) minmax(620px,5.6fr) 180px;
    gap:22px;
    align-items:stretch;
  }
  .company-card .company-main{
    grid-column:1;
    grid-row:1;
    min-width:0;
  }
  .company-card .catalog-composite-mobile{display:none}
  .company-card .catalog-ratings-panel{
    grid-column:2;
    grid-row:1;
    min-width:0;
    align-self:stretch;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-template-rows:auto minmax(112px,1fr);
    column-gap:18px;
    row-gap:10px;
  }
  .company-card .catalog-ratings-panel .rating-cell{
    grid-row:1;
    min-width:0;
  }
  .company-card .catalog-composite-desktop{
    display:flex;
    grid-column:1 / -1;
    grid-row:2;
    align-items:center;
    justify-content:center;
    min-width:0;
    padding:8px 0 4px;
  }
  .company-card .catalog-composite-desktop .composite-score{
    width:min(330px,100%);
    margin:0;
    box-sizing:border-box;
    text-align:center;
  }
  .company-card .catalog-composite-desktop .composite-score>span,
  .company-card .catalog-composite-desktop .composite-score>small{
    display:block;
  }
  .company-card .catalog-composite-desktop .composite-score>strong{
    justify-content:center;
  }
  .company-card .catalog-facts{
    grid-column:1 / -1;
    grid-row:2;
  }
  .company-card .card-actions{
    grid-column:3;
    grid-row:1;
    align-self:center;
    min-width:0;
  }
}

/* At medium and mobile widths the wrapper becomes transparent to the existing theme
   grid, so the established stacked layout remains unchanged. */
@media (max-width:1200px){
  .company-card .catalog-ratings-panel{display:contents}
  .company-card .catalog-composite-desktop{display:none!important}
}

@media (min-width:801px) and (max-width:1200px){
  .company-card .catalog-facts{grid-column:1 / -1}
}

/* Mobile cards intentionally stay lean: source names remain, service facts disappear. */
@media (max-width:800px){
  .company-card .catalog-facts{display:none!important}
  .company-card .source-label{min-height:0;margin-bottom:6px}
  .company-card .rating-content{min-height:0}
  .company-card .rating-content .score-link{min-height:0}
  .company-card .rating-content .score-link strong{min-height:0}
  .company-card .rating-content>.text-link,
  .company-card .rating-content>.source-status{min-height:0;padding-top:0}
}

/* Company detail header: never allow the compare control to escape its column. */
.detail-cta{min-width:0;max-width:100%}
.detail-cta>.button,
.detail-cta>button.button{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  white-space:normal;
}
.detail-cta>.composite-score{max-width:100%;min-width:0;box-sizing:border-box}

@media (max-width:580px){
  .detail-cta{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:10px!important;
    width:100%;
    flex:none!important;
  }
  .detail-cta>.composite-score{grid-column:1 / -1;width:100%;margin:0!important}
}