/*
  Public competitions page (#3178), from the design PDF. Bare element
  selectors are prefixed with .competitions-page so they cannot leak into the
  shared header, nav or footer this stylesheet also loads on. Font sizes use
  core's typography scale variables (UIUXRULES.md), never a hard-coded rem:
  the PDF's 37px / 27px / 16px are plus-3 / plus-2 / base.
*/

.competitions-page {
  line-height: var(--line-height-body);
}

/* Same layout as the events page: the row grows to its two 440px columns
   plus core's 32px gap, so the card column sits where the events list does
   rather than in the middle. The right-hand column is empty for now but
   still takes its space. Only above 640px, where the row is a row. */
@media (min-width: 640px) {
  .competitions-page .dg-layout-default__rhs {
    flex-grow: 1;
    max-width: calc(440px * 2 + 32px);
  }
}

/* Body typeface at 700, as the events page: fonts.css ships no 700 heading
   face. Each heading sets its own size and margin below. */
.competitions-page h1,
.competitions-page h2 {
  font-family: 'Body default', Georgia, serif;
  font-weight: 700;
  line-height: var(--line-height-heading);
}

.competitions-heading {
  font-size: var(--font-size-plus-3);
  margin: 0;
}

/* The active sidebar filter, under the heading, with the way back to the
   full list. Fact-row size, as the card facts: 700 for what is shown. */
.competitions-filter {
  font-size: var(--font-size-sub-1);
  margin: 0;
}

.competitions-filter strong {
  font-weight: 700;
}

.competitions-filter__clear {
  color: inherit;
  margin-left: 0.5rem;
  text-decoration: underline;
}

/* Cards are divided by core's dg-rule-top on each <li> after the first. */
.competitions-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------------------------------------------------------------------
   Card. Small by default; --large is a featured listing with a landscape
   picture, drawn one column at full width.

   The small card has exactly the events list card's specs (Dan, 2026-10-06:
   every page laid out like this — image on the left, title above — shares
   them): 120px image column (33%, capped), 16px to the text column, 8px
   from the title rule to the body, 8px between the text column's parts, a
   2px image radius. The large card follows the events hero's 12px rhythm.
   --------------------------------------------------------------------- */
.competitions-card {
  display: flex;
  flex-direction: column;
  /* events: title margin-bottom 8px and body margin-top 8px, which collapse
     to 8px in its block layout */
  gap: 0.5rem;
}
.competitions-card--large {
  gap: 0.75rem;
}

/* Small card title: underlined, as the events list cards. */
.competitions-card__title {
  border-bottom: 1px solid #333333;
  margin: 0;
  padding-bottom: 0.25rem;
  font-size: var(--font-size-plus-1);
}
html[data-theme="dark"] .competitions-card__title {
  border-bottom-color: #3a3a3a;
}

.competitions-card--large .competitions-card__title {
  border-bottom: 0;
  padding-bottom: 0;
  font-size: var(--font-size-plus-2);
}

.competitions-card__body {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.competitions-card--large .competitions-card__body {
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}

/* Image with the icon row under it: the events card's image column. */
.competitions-card__aside {
  flex-shrink: 0;
  width: 33%;
  max-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.competitions-card__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  /* the events card thumbnail's radius */
  border-radius: 0.125rem;
}
/* The design's 3:2 slot, centre-cropped, as the events hero. */
.competitions-card--large .competitions-card__image img {
  aspect-ratio: 3 / 2;
  border-radius: 0.5rem;
}

.competitions-card__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* events card: 8px; the large card keeps the hero's 12px */
  gap: 0.5rem;
}
.competitions-card--large .competitions-card__content {
  gap: 0.75rem;
}

/* ---------------------------------------------------------------------
   Facts — "Small info (as with bars and events)": 700 label, 400 value.
   --------------------------------------------------------------------- */
.competitions-facts {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0;
  font-size: var(--font-size-sub-1);
  line-height: var(--line-height-default);
}
.competitions-facts dt,
.competitions-facts dd {
  display: inline;
  margin: 0;
}
.competitions-facts dt {
  font-weight: 700;
}
.competitions-facts dd {
  font-weight: 400;
}

/* Already cut to length with an ellipsis by the service. */
.competitions-card__blurb {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 400;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------
   Icon row. One tile size on both cards (Dan, 2026-10-06): 34px with 8px
   between, which puts three to a row under the small card's 120px image
   (3 x 34 + 2 x 8 = 118). The large card uses the same tiles in one row.
   --------------------------------------------------------------------- */
.competitions-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.competitions-icon {
  position: relative;
  display: block;
  width: 2.125rem;
  height: 2.125rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0.25rem;
  background: #dedede;
  color: #231f20;
  /* a tooltip, not a link: the normal arrow, not a pointer */
  cursor: default;
}
.competitions-icon--diffords {
  background: #ffbe36;
}
/* The padlock: green while open to entry, red otherwise. White glyph. */
.competitions-icon--open {
  background: #a2c760;
  color: #ffffff;
}
.competitions-icon--closed {
  background: #b14650;
  color: #ffffff;
}
.competitions-icon:focus-visible {
  outline: 2px solid #1779ba;
  outline-offset: 2px;
}

/* The SVGs are drawn to fill their tile, padding included. */
.competitions-icon__glyph,
.competitions-icon__glyph .svg-icon {
  display: block;
  width: 100%;
  height: 100%;
}

/* Tooltip. Shown on hover, keyboard focus, or a tap (competitions.js adds
   --open). --tip-shift is set by the same script to keep it on screen. */
.competitions-icon__tip {
  position: absolute;
  z-index: 10;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(calc(-50% + var(--tip-shift, 0px)));
  width: max-content;
  max-width: min(16rem, calc(100vw - 2rem));
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  background: #333333;
  color: #ffffff;
  font-size: var(--font-size-sub-1);
  font-weight: 400;
  line-height: var(--line-height-default);
  text-align: center;
  pointer-events: none;
  /* display, not visibility: a hidden tip that still took up space could
     poke past the screen edge on a phone and make the page scroll sideways */
  display: none;
}
html[data-theme="dark"] .competitions-icon__tip {
  background: #e8e8e8;
  color: #1a1a1a;
}
.competitions-icon:hover .competitions-icon__tip,
.competitions-icon:focus-visible .competitions-icon__tip,
.competitions-icon--tip-open .competitions-icon__tip {
  display: block;
}

/* ---------------------------------------------------------------------
   "Enter competition" above "View competition details", in one style:
   the events page's full-width row link, page ink, bold, trailing chevron.
   --------------------------------------------------------------------- */
.competitions-card__links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.competitions-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  text-decoration: none;
  font-size: var(--font-size-base);
  font-weight: 700;
}
/* Core inlines `a:visited{color:#1a4e99}` ahead of this file and a
   pseudo-class outranks a plain class, so the colour is set on both. */
a.competitions-link,
a.competitions-link:visited {
  color: #333333;
}
html[data-theme="dark"] a.competitions-link,
html[data-theme="dark"] a.competitions-link:visited {
  color: #e8e8e8;
}
.competitions-link .svg-icon {
  display: block;
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  opacity: 0.5;
}
.competitions-link:hover .svg-icon,
.competitions-link:focus-visible .svg-icon {
  opacity: 1;
}

/* ---------------------------------------------------------------------
   Right-hand column: competition articles in core's link-box, spaced like
   the cocktail page's related boxes, by the column's own 16px.
   --------------------------------------------------------------------- */
.competitions-boxes {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* "See More" heads the boxes as it does on the bar pages (php-phalcon-bar's
   .bar-heading in its right-hand column): +2, left-aligned, and closed up
   against the boxes it labels rather than given a prose lead-in. */
.competitions-see-more__heading {
  font-size: var(--font-size-plus-2);
  margin: 0;
  text-align: left;
}

/* The rule above "See More" is a MOBILE divider, as on bars: stacked under the
   list it separates the two; in the desktop column there is nothing above it
   to divide. Core still owns how the rule looks; this only switches it off. */
@media (min-width: 640px) {
  .competitions-see-more.dg-rule-top {
    border-top: 0;
    padding-top: 0;
  }
}