/*
  Pick 'Swich — Ranker-style list layout
  Notes:
  - No font-family specified so your theme controls typography.
  - Use plugin classes (.ir-*) to override in Focus Custom CSS if needed.
*/

.ir-wrap{
  margin: 20px 0;
}

.ir-list-title{
  margin: 0 0 14px;
}

.ir-list{
  border-top: 1px solid rgba(0,0,0,0.12);
  border-bottom: 1px solid rgba(0,0,0,0.12);

  /* Used to calculate badge spacing without hard-coding multiple values */
  --ir-item-pad-y: 18px;

  position: relative;
  overflow: visible;
}

/* List header (summary line) */
.ir-list-head{
  padding: 12px 0 12px;
  margin: 0;
}

.ir-list-stats{
  font-size: 12px;
  line-height: 1.2;
  color: rgba(0,0,0,0.55);
  margin: 0;
}

.ir-stat-num{
  display: inline-block;
  border-bottom: 1px dotted rgba(0,0,0,0.35);
  padding-bottom: 1px;
}

@media (max-width: 600px){
  .ir-list{
    --ir-item-pad-y: 12px;
  }
}

.ir-item{
  display: flex;
  gap: 26px;
  align-items: flex-start;

  padding: 18px 0;
  border-top: 1px solid rgba(0,0,0,0.10);
}

.ir-item:first-child{
  border-top: 0;
}

/* If the badge header is present, remove the top border on the first item so the list only has one top line. */
.ir-list-head + .ir-item{
  border-top: 0;
}

/* Left (thumbnail + grey panel) */
.ir-left{
  display: flex;
  gap: 16px;
  align-items: stretch;
}

/* Thumbnail */
.ir-media{
  position: relative;
  width: 170px;
  height: 170px;
  flex: 0 0 170px;
  aspect-ratio: 1 / 1;

  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,0.06);
}

.ir-media img,
.ir-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ir-img--placeholder{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.06);
}

.ir-rank{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);

  padding: 6px 12px;
  border-radius: 0 6px 6px 0;

  font-weight: 800;
  font-size: 24px;
  line-height: 1;

  color: #111;
  background: rgba(255,255,255,0.88);
}

/* Grey title/vote panel */
.ir-panel{
  background: rgba(0,0,0,0.04);
  border-radius: 10px;
  padding: 10px 12px;

  /* Keep every row consistent on desktop */
  width: 320px;
  flex: 0 0 320px;

  /* Match the thumbnail height */
  height: 170px;
  box-sizing: border-box;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


.ir-title-link{
  color: #12a7ff !important;
  text-decoration: none;
}

.ir-title-link:visited{
  color: #12a7ff !important;
}

.ir-title-link:hover{
  text-decoration: underline;
  color: #12a7ff !important;
}

.ir-actions{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 14px;
    flex-wrap: nowrap;
  /* Keep buttons above the feedback area; feedback is pinned to bottom */
  margin-top: 10px;
}

.ir-buttons{
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.ir-btnwrap{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ir-btncount{
  margin-top: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: rgba(0,0,0,0.65);
  line-height: 1;
}

/** Hide per-button counts until the visitor votes */
.ir-item:not(.is-upvoted):not(.is-downvoted) .ir-btncount{
  display: none;
}

.ir-vote-btn{
  width: 44px;
  height: 44px;

  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.25);
  background: rgba(0,0,0,0.03);

  cursor: pointer;
  /* Reset any theme button padding that can visually offset the SVG */
  padding: 0 !important;
  box-sizing: border-box;

  /* Hard-centre the arrow icon inside the square */
  display: flex;
  align-items: center;
  justify-content: center;

  line-height: 0;
  font-size: 0;
}

.ir-vote-btn:disabled{
  opacity: 0.55;
  cursor: default;
}

.ir-icon{
  width: 28px;
  height: 28px;
  fill: #111;
  display: block;
  margin: 0;
}

.ir-feedback{
  width: 100%;
  /* Pin feedback to the bottom of the fixed-height panel */
  margin-top: auto;
  padding-top: 6px;
}

.ir-total{
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(0,0,0,0.75);
  white-space: nowrap;
}

.ir-agree{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  margin-top: 6px;
}

.ir-agree:empty{
  display: none;
}

/* After a vote: hide total votes and show the % agree message */
.ir-item.is-upvoted .ir-total,
.ir-item.is-downvoted .ir-total{
  display: none;
}

.ir-item:not(.is-upvoted):not(.is-downvoted) .ir-agree{
  display: none;
}


.ir-title{
  width: 100%;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ir-subtitle{
  margin-top: 4px;
  color: rgba(0,0,0,0.55);
  font-size: 15px;
  line-height: 1.3;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Voted states */
.ir-item.is-upvoted .ir-vote-btn.ir-up{
  background: #16a34a;
  border-color: #16a34a;
}

.ir-item.is-upvoted .ir-vote-btn.ir-up .ir-icon{
  fill: #fff;
}

.ir-item.is-upvoted .ir-agree{
  color: #16a34a;
}

.ir-item.is-downvoted .ir-vote-btn.ir-down{
  background: #dc2626;
  border-color: #dc2626;
}

.ir-item.is-downvoted .ir-vote-btn.ir-down .ir-icon{
  fill: #fff;
}

.ir-item.is-downvoted .ir-agree{
  color: #dc2626;
}

/* Right (meta + excerpt) */
.ir-right{
  flex: 1;
  min-width: 220px;
}

.ir-meta{
  margin-top: 6px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.3;
  color: #111111;

  display: flex;
  flex-wrap: wrap;
}

.ir-meta-pair{
  display: inline-flex;
  gap: 4px;
  align-items: baseline;
}

.ir-meta-pair:not(:first-child)::before{
  content: "\00b7";
  margin: 0 8px;
  color: rgba(0,0,0,0.40);
}
.ir-meta strong{
  font-weight: 700;
  color: #111111;
}

.ir-desc{
  font-style: normal;
  font-size: 16px;
  line-height: 1.55;
  color: #111111;
  margin-top: 0;
}

/* Responsive */
@media (max-width: 980px){
  .ir-item{
    flex-direction: column;
    gap: 12px;
  }
  .ir-left{
    width: 100%;
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  .ir-media{
    width: 170px;
    height: 170px;
    flex: 0 0 170px;
  }
  .ir-panel{
    flex: 1 1 260px;
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 0;
  }
  .ir-title{
    font-size: 26px;
  }
}


@media (max-width: 600px){
  /* Tighten the overall row spacing on mobile */
  .ir-item{
    padding: 12px 0;
    gap: 10px;
  }

  /* Mobile: shrink the thumbnail window back to 150x150 */
  .ir-media{
    width: 150px;
    height: 150px;
    flex: 0 0 150px;
  }

  /* Tighten spacing between the thumbnail and the vote panel on mobile */
  .ir-left{
    gap: 10px;
  }

  /* Mobile: keep the title/vote panel the same height as the thumbnail */
  .ir-panel{
    height: 150px;
    padding: 6px 8px;
  }

  /* Mobile: smaller title, allow wrapping without clipping descenders */
  .ir-title{
    /* Smaller title on mobile so the panel can keep the agree/total line visible */
    font-size: 16px;
    line-height: 1.15;
    margin-bottom: 1px;

    white-space: normal;
    overflow: visible;            /* prevents the 2nd line being visually clipped */
    overflow-wrap: anywhere;
  }

  .ir-subtitle{
    font-size: 11px;
    line-height: 1.15;
    margin-top: 2px;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
  }

  .ir-actions{
    margin-top: 4px;
    gap: 10px;
  }

  .ir-buttons{
    gap: 8px;
  }

  /* Bigger mobile tap targets */
  .ir-vote-btn{
    width: 44px;
    height: 44px;
  }
  .ir-icon{
    width: 28px;
    height: 28px;
  }

  .ir-btncount{
    margin-top: 2px;
    font-size: 10px;
  }

  .ir-feedback{
    padding-top: 3px;
  }

  .ir-total{
    font-size: 11px;
  }

  .ir-agree{
    font-size: 12px;
    margin-top: 3px;
    line-height: 1.1;
  }
}

@media (max-width: 520px){
  .ir-title{
    font-size: 15px;
  }
  .ir-panel{
    padding: 6px 8px;
  }
  .ir-meta{
    flex-direction: column;
    align-items: flex-start;
  }
  .ir-meta-pair:not(:first-child)::before{
    content: none;
    margin: 0;
  }
}

@media (max-width: 360px){
  /* Very small screens: slightly reduce button size to prevent clipping */
  .ir-vote-btn{
    width: 42px;
    height: 42px;
  }
  .ir-icon{
    width: 26px;
    height: 26px;
  }
}


/* ---------------------------------------------------------------------------
   v0.5.38: h2 item title hardening (additive overrides; original rules above
   are left untouched).

   Item titles render as <h2 class="ir-title"> for SEO and accessibility.
   Themes commonly target .entry-content h2 with their own margins, font sizes,
   colors, decorative pseudo-elements, and clear rules. The selectors below use
   higher specificity than .ir-title alone, plus !important on the properties
   themes most often clobber, so the panel layout stays intact regardless.

   Mobile breakpoints below match the same specificity so they continue to win
   at smaller viewports.
--------------------------------------------------------------------------- */
.ir-panel h2.ir-title,
.ir-panel h3.ir-title,
.ir-panel h4.ir-title,
.ir-panel .ir-title{
  display: block !important;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;

  font-family: inherit !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  color: inherit !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  clear: none !important;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Strip any decorative pseudo-elements themes might inject on headings. */
.ir-panel h2.ir-title::before,
.ir-panel h2.ir-title::after,
.ir-panel h3.ir-title::before,
.ir-panel h3.ir-title::after,
.ir-panel h4.ir-title::before,
.ir-panel h4.ir-title::after{
  content: none !important;
  display: none !important;
}

/* Mobile responsive overrides at matching specificity. */
@media (max-width: 980px){
  .ir-panel h2.ir-title,
  .ir-panel h3.ir-title,
  .ir-panel h4.ir-title,
  .ir-panel .ir-title{
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 600px){
  .ir-panel h2.ir-title,
  .ir-panel h3.ir-title,
  .ir-panel h4.ir-title,
  .ir-panel .ir-title{
    font-size: 16px !important;
    line-height: 1.15 !important;
    margin: 0 0 1px !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 520px){
  .ir-panel h2.ir-title,
  .ir-panel h3.ir-title,
  .ir-panel h4.ir-title,
  .ir-panel .ir-title{
    font-size: 15px !important;
  }
}