/* ══════════════════════════════════════════════════════════════════════════
   LEADERBOARDS — the responsive layer

   sass/style.css is Compass output and is not hand-edited; type.css and
   buttons.css already established the pattern of a hand-written sheet
   layered after it, and this is the third. It is loaded last so equal
   specificity wins.

   WHAT IT FIXES, and it is all one problem: the theme has exactly one
   breakpoint, 800px. Below it the boards get a set of phone sizes, above it
   the desktop set — and they keep the desktop set all the way down to 801px.
   Measured at a 900px window: the rank number was 76.8px inside an 88px
   column, a driller's name 41.6px inside 159px, the column heads 44.8px
   inside 71px, the frame still spending 170px of an 876px board on padding,
   and the rig polaroid — an inline-block cell that never shrinks — sitting
   61px on top of the rank beside it. Nobody had seen it because nobody
   looks at a 900px window.

   NOTHING HERE CHANGES THE DESIGN. The chalk, the marker lettering, the
   polaroids, the pins, the frame, the wall and the textures are untouched,
   and every value below lands on the existing desktop number at the top of
   its range — so a wide screen renders exactly what it rendered before.
   What changes is everything between the breakpoints: each size that was
   tuned for one width becomes a clamp that is right at all of them.

   Below 620px there is no type size at which seven columns work in 350px,
   so the row stops being a row and becomes a labelled block on the same
   chalkboard. The labels come from data-label attributes on the cells,
   which carry the column heads the stacked view hides.
   ══════════════════════════════════════════════════════════════════════════ */


/* ═══════════ 1. THE BOARD ITSELF ═══════════
   The frames are border-image slices, so the padding is what holds the
   content off the wood. It was 85px at every width above 800. */

#leaderboard {
  padding: clamp(18px, 4.6vw, 65px) clamp(16px, 6vw, 85px) clamp(40px, 6vw, 85px);
  background-image: url(/wp-content/uploads/2025/11/10295.webp);
  border-image: url(/wp-content/themes/gtd-desco/images/leaderboard-frame-new-optimised.webp) 0 0 fill;
}

#master-driller-leaderboard {
  padding: clamp(20px, 6.3vw, 89px) clamp(16px, 5.9vw, 83px) clamp(44px, 10vw, 141px);
  background-image: url(/wp-content/uploads/2025/11/10295.webp);
  border-image: url(/wp-content/themes/gtd-desco/images/small-wood-frame-new-optimised.webp) 0 0 fill;
}

#master-driller-award-block {
  background-image: url("/wp-content/themes/gtd-desco/images/riglife-med-background-image.webp");
  padding: clamp(18px, 4vw, 50px);
  margin: clamp(20px, 4vw, 50px) 0;
}


/* ═══════════ 2. THE BOARD'S OWN HEADING ═══════════
   The skulls were a fixed 230px each side of a title that is already fluid,
   so on a narrow board they closed in on the lettering. */

#riglife-main-page-text .skull-container .left-skull,
#riglife-main-page-text .skull-container .right-skull {
  max-width: clamp(44px, 12vw, 230px);
  height: auto;
}
#riglife-main-page-text .skull-container { width: min(92%, 100%); }

#riglife-main-page-text p {
  font-size: clamp(13px, 2vw, 35px);
  top: clamp(-20px, -1.1vw, 0px);
}
.riglife-paragraph-font { font-size: clamp(13px, 1.65vw, 28.8px); }

.riglife-chalk-logo { max-width: min(85%, 400px); height: auto; }


/* ═══════════ 3. THE COLUMN HEADS ═══════════
   Permanent-marker at 2.8rem, in columns that are a percentage of a board
   that is a percentage of the window. Two of those three were fluid. */

.award-table-title-row { height: clamp(52px, 9vw, 152px) !important; }

#leaderboard .award-table-title-row td,
#master-driller-leaderboard .award-table-title-row td {
  font-size: clamp(14px, 2.5vw, 44.8px);
  line-height: 1.08;
  padding-inline: clamp(4px, .8vw, 16px);
}
#leaderboard .award-table-title-row td .mini-marker-text,
#master-driller-leaderboard .award-table-title-row td .mini-marker-text {
  font-size: clamp(10px, 1.25vw, 22.4px) !important;
}


/* ═══════════ 4. THE ROWS ═══════════ */

.riglife-leaderboard-table-styles td {
  font-size: clamp(13px, 1.28vw, 22.4px);
  padding: clamp(7px, .9vw, 16px) clamp(5px, 1.8vw, 32px);
}
.riglife-leaderboard-table-styles .number { font-size: clamp(24px, 4.35vw, 76.8px); }
.riglife-leaderboard-table-styles .name   { font-size: clamp(15px, 2.35vw, 41.6px); }

/* the flags beside a driller's name */
.fi { font-size: clamp(15px, 1.95vw, 35px); }

/* the gold medal against the top name */
.gold-medal { height: clamp(18px, 1.7vw, 3rem); margin-left: clamp(6px, .85vw, 1.5rem); right: clamp(8px, 2vw, 37px); }

/* the red chalk annotation */
.red-chalk-text { font-size: clamp(18px, 3.4vw, 3.8rem); left: clamp(-72px, -4vw, -14px); }


/* ═══════════ 5. THE POLAROIDS ═══════════
   .item is a <td> set to display:inline-block, which takes it out of the
   table's column grid entirely: it stayed 320px wide while the columns
   beside it shrank, and the photograph lay across the rank. The photograph
   scales with the board instead, and its 224px floor — the thing that made
   it impossible — goes. */

.item { width: clamp(96px, 16.5vw, 320px); }
.item-buckle { width: clamp(92px, 16.5vw, 320px); }
.polaroid { padding: clamp(4px, .85vw, 1rem); }
.polaroid > img { min-width: 0; height: auto; }
/* Under auto layout a column is as wide as its content asks to be, and this
   content asked for 80% of whatever it was given — a loop that collapsed the
   rig photograph to 44px. Stating the width breaks it. */
@media (min-width: 801px) and (max-width: 1400px) {
  .riglife-leaderboard-table-styles td.item .polaroid { width: clamp(88px, 11vw, 240px); }
  .riglife-leaderboard-table-styles td.item .drill-rig-img { max-width: 100%; }
}

/* Between the card and the wide board, two photographs per row want 270px of
   a 768px board — and the row still has a driller, a company, a depth and an
   award to seat. One of them gives way: the rig polaroid stays, because its
   caption carries the hole count and the location, and the driller's portrait
   comes back at 1024 where there is room for both. Only .item goes; the
   contractor board's hung buckle is the award itself and stays at every
   width. */
@media (min-width: 801px) and (max-width: 1023px) {
  .riglife-leaderboard-table-styles tr > td.item:last-child { display: none; }
}
.caption { font-size: clamp(8px, .98vw, 1.1rem); line-height: 1.35; }
.item .polaroid-pin img, .nail img { width: clamp(34px, 5.4vw, 104px); height: auto; }

/* Below 1400 the fixed column grid is the problem rather than the solution:
   a board that narrow needs its columns sized by what is in them, and the
   inline-block cell needs to rejoin the table so it stops overlapping. */
@media (max-width: 1400px) {
  .riglife-leaderboard-table-styles { table-layout: auto; }
  /* Only one thing may declare this column's width. The cell said 320px and
     the polaroid inside it said its own, so the two of them together asked
     for more table than the board had and the seventh column hung off the
     right edge. The photograph is the content, so the photograph decides. */
  .riglife-leaderboard-table-styles td.item { display: table-cell; vertical-align: middle; width: auto; }
  .riglife-leaderboard-table-styles tr { height: auto; }

  /* Each polaroid cell is hand-placed: .item:nth-of-type(4n+1) carries
     `transform: scale(.8) rotate(-3deg)` AND `left: -142px`, nudges measured
     against a 320px cell on a 1496px board. The tilt and the scale are the
     charm and they stay — a polaroid pinned dead straight is a thumbnail.
     The 142px of displacement is what threw the photograph off the left edge
     of a 900px board and its partner off the right, so the offsets go and
     the tilts remain. */
  .riglife-leaderboard-table-styles td.item,
  .riglife-leaderboard-table-styles td.item-buckle {
    left: 0;
    right: auto;
    top: 0;
    margin-top: 0;
  }

  /* seven columns at 32px of side padding each is 227px of a 768px board */
  .riglife-leaderboard-table-styles td {
    padding: clamp(6px, .7vw, 16px) clamp(4px, .85vw, 32px);
  }

  /* the pin, and the fixed 224px shadow plate under each photograph */
  .riglife-leaderboard-table-styles .item .polaroid-pin img { max-width: clamp(20px, 3.4vw, 62px); }
  .riglife-leaderboard-table-styles .item .polaroid:after { width: 100%; height: 100%; top: 0; }
}

/* ═══════════ 6. THE PHONE: the row stays a row ═══════════
   A leaderboard is a comparison. Reading down a column is how you see that
   3,216 beat 3,215 by a foot, and a stack of cards takes that away — you can
   no longer see two drillers at once. So the row stays a row at every width,
   and what gives instead is the photographs: at 390px the board is 294px
   wide, and two polaroids were asking for 160px of it to show pictures that
   are already 40px tall by the time they fit.

   The theme was right to drop them at 800px. What it did not do was give the
   width back — the columns kept the percentages they were handed for a
   1496px board, so "Company" had 59px and broke to "Compan". The photographs
   go, the columns are re-cut for the six things left, and every head and
   value is sized so its longest word fits whole. The rotated chalk tag that
   stands in for the rig photograph stays: it is how you know which machine
   drilled it. */

@media (max-width: 800px) {

  /* fixed, so the columns are what this sheet says and not what a 1496px
     board's inline percentages say */
  .riglife-leaderboard-table-styles { table-layout: fixed; width: 100%; }
  .riglife-leaderboard-table-styles tr { height: auto; }

  /* the photographs, and the pins that hang them */
  .riglife-leaderboard-table-styles .polaroid,
  .riglife-leaderboard-table-styles .polaroid-pin { display: none !important; }

  /* Nothing is left in the driller's portrait column once the photograph has
     gone, and 5% of 294px is worth more to the name beside it. */
  #leaderboard .riglife-leaderboard-table-styles tr > td:nth-child(7) { display: none !important; }

  /* Re-cut for the six that remain. !important because the widths they are
     replacing are inline on the header cells. Each is sized from the longest
     word that has to survive in it — "Ballantyne" in the driller column,
     "(980.2m)" in the depth. */
  #leaderboard .riglife-leaderboard-table-styles td:nth-child(1) { width: 9%  !important; }  /* rig tag; gone below 620px   */
  #leaderboard .riglife-leaderboard-table-styles td:nth-child(2) { width: 11% !important; }  /* "=4" is the widest rank     */
  #leaderboard .riglife-leaderboard-table-styles td:nth-child(3) { width: 25% !important; }  /* "Ballantyne"                */
  #leaderboard .riglife-leaderboard-table-styles td:nth-child(4) { width: 17% !important; }  /* a logo, which will take any */
  #leaderboard .riglife-leaderboard-table-styles td:nth-child(5) { width: 19% !important; }  /* "(980.2m)"                  */
  #leaderboard .riglife-leaderboard-table-styles td:nth-child(6) { width: 19% !important; }  /* "3000 FT" on one line       */

  /* Words stay whole. The mid-word breaks were a wrapping rule inherited
     from further up the stack finding columns it could not fit a word in;
     the columns above are cut so it never has to. */
  .riglife-leaderboard-table-styles td,
  .riglife-leaderboard-table-styles .award-table-title-row td {
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
  }

  /* the heads */
  .award-table-title-row { height: auto !important; }
  #leaderboard .award-table-title-row td,
  #master-driller-leaderboard .award-table-title-row td {
    font-size: clamp(11px, 2.1vw, 17px);
    line-height: 1.12;
    padding: 7px 2px;
  }
  #leaderboard .award-table-title-row td .mini-marker-text,
  #master-driller-leaderboard .award-table-title-row td .mini-marker-text {
    font-size: 8px !important;
    line-height: 1.1;
  }

  /* the values */
  .riglife-leaderboard-table-styles td {
    font-size: clamp(11.5px, 2.1vw, 17px);
    padding: 9px clamp(3px, .7vw, 8px);
    vertical-align: middle;
  }
  .riglife-leaderboard-table-styles .name { font-size: clamp(12px, 2.3vw, 19px); line-height: 1.28; }
  .riglife-leaderboard-table-styles .number { font-size: clamp(17px, 3.4vw, 28px); border-width: 2px; padding-inline: 2px; }
  .fi { font-size: clamp(13px, 2.4vw, 20px); }

  /* the company marks: whatever the column leaves them */
  .riglife-leaderboard-table-styles .logo { padding: 0 2px !important; }
  .riglife-leaderboard-table-styles .logo img,
  .riglife-leaderboard-table-styles .leaderboard-logo {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* the chalk tag standing in for the rig photograph — the theme's own idea,
     and what keeps the first column worth 9% down to 620px */
  .mobile-only-text {
    font-size: 10px;
    left: 0;
    top: 0;
    rotate: 300deg;
  }

  /* The contractor board's hung buckle sits under an empty head in a 15%
     column — 42px at this width, which is a buckle you cannot read hanging
     from a nail you cannot see. It goes with the other photographs, and the
     two text columns take the width back. The award is named in words in
     the column beside it. */
  #master-driller-leaderboard .riglife-leaderboard-table-styles td.item-buckle,
  #master-driller-leaderboard .riglife-leaderboard-table-styles tr > td:nth-child(4):last-child {
    display: none !important;
  }
}


/* ═══════════ 6b. UNDER 620: the rig column goes too ═══════════
   Five columns rather than six. The rig was the narrowest thing on the board
   and the only one carrying a tag rather than a value — and at this width its
   9% is worth more to the name and the depth beside it, which are the two
   that were working hardest to stay on one line. Boards two and three are
   untouched: their first column has been hidden since 800px. */

@media (max-width: 619px) {
  #leaderboard .riglife-leaderboard-table-styles tr > td:nth-child(1) { display: none !important; }

  /* the 9% redistributed, still cut from the longest word each has to hold */
  #leaderboard .riglife-leaderboard-table-styles td:nth-child(2) { width: 12% !important; }  /* "=4"         */
  #leaderboard .riglife-leaderboard-table-styles td:nth-child(3) { width: 27% !important; }  /* "Ballantyne" */
  #leaderboard .riglife-leaderboard-table-styles td:nth-child(4) { width: 18% !important; }  /* a logo       */
  #leaderboard .riglife-leaderboard-table-styles td:nth-child(5) { width: 21% !important; }  /* "(980.2m)"   */
  #leaderboard .riglife-leaderboard-table-styles td:nth-child(6) { width: 22% !important; }  /* "3000 FT"    */
}

/* ═══════════ 7. MOTION ═══════════
   The boards animate a polaroid on hover. A phone has no hover, and the
   transition still costs a composite on every touch. */
@media (hover: none) {
  .item:hover .polaroid img,
  .item:hover .polaroid-pin,
  .item:hover .nail,
  .item:hover .nail-2 { transform: none; }
}