/* ---------- The Yard Club ----------
   A sub-brand. The header, the footer and the page rhythm stay the parent
   site's, so it still reads as part of sunshineyarddoctors.com.au, but the
   colour belongs to the Club.

   THE PALETTE IS SAMPLED FROM THE WORDMARK, not invented and not taken from
   the design system. The design-system tokens are the parent brand's, and the
   Club's blue is a deliberately different animal: an electric #0064FC where
   --sky-500 is a pale cyan. Everything that is not brand colour - spacing,
   type, radii, shadows, timings, and the ink and greys used for body copy -
   still comes from the tokens, so the two brands share a skeleton.

   Every pairing below is measured, not assumed:
     club blue on white      4.97:1   body text, passes
     white on club blue      4.97:1   body text, passes
     black on club gold     11.23:1   passes comfortably
     club gold on white      1.87:1   FAILS, at any size
   So gold is only ever a ground with black on it, or a mark. Never type on
   white - which is the parent brand's rule about its own gold, arrived at
   independently here by measuring rather than by inheriting it. */
.yc{
  --club-blue:#0064FC;
  --club-gold:#FDAE01;
  --club-ink:#000000;
}

/* ---------- opening ---------- */
.yc-top{background:var(--white);padding-block:var(--air)}

/* The heading is the wordmark itself, the Club's own identity and the same art
   as the app icon. It stays an h1 with the words as alt text, so the document
   outline and every screen reader still get "The Yard Club". */
.yc-mark{margin:0}
.yc-mark img{display:block;width:clamp(190px,26vw,280px);height:auto}

.yc-top__lead{
  margin-top:var(--space-8);font-size:var(--text-lg);
  line-height:var(--leading-body);color:var(--ink-700);max-width:52ch;
}
.yc-top__free{
  display:inline-flex;align-items:center;gap:var(--space-2);
  margin-top:var(--space-6);padding:var(--space-3) var(--space-6);
  border-radius:var(--radius-pill);
  background:var(--club-gold);color:var(--club-ink);
  font-weight:var(--weight-heavy);font-size:var(--text-sm);
}

/* ---------- the four things ---------- */
.yc-things{padding-bottom:var(--air)}
.yc-thing{
  display:grid;gap:var(--space-8);align-items:center;
  padding-block:var(--space-10);
  border-top:1px solid var(--ink-150);
}
@media (min-width:768px){
  .yc-thing{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--space-16)}
  /* alternate which side the picture sits, so four rows do not read as a list
     of identical blocks */
  .yc-thing:nth-child(even) .yc-thing__art{order:2}
}
.yc-thing__n{
  font-family:var(--font-display);font-weight:var(--weight-heavy);
  font-size:var(--text-xs);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--club-blue);margin-bottom:var(--space-3);
}
.yc-thing__h{
  font-family:var(--font-display);font-weight:var(--weight-heavy);
  font-size:clamp(var(--text-xl),3vw,var(--text-3xl));
  line-height:var(--leading-heading);letter-spacing:var(--tracking-display);
}
.yc-thing__p{
  margin-top:var(--space-4);font-size:var(--text-md);
  line-height:var(--leading-body);color:var(--ink-700);max-width:56ch;
}

/* the reward ladders. A table would be honest markup but reads as admin;
   these are two-column rows so the eye can run down the numbers. */
.yc-ladder{display:grid;gap:var(--space-2);margin-top:var(--space-6)}
.yc-ladder li{
  display:grid;grid-template-columns:auto 1fr;gap:var(--space-3);
  align-items:baseline;
  font-size:var(--text-md);line-height:var(--leading-body);color:var(--ink-900);
}
.yc-ladder b{
  font-family:var(--font-display);font-weight:var(--weight-heavy);
  letter-spacing:var(--tracking-display);white-space:nowrap;
  color:var(--club-blue);
}
.yc-ladder span{color:var(--ink-700)}

/* ---------- the artwork ---------- */
.yc-thing__art{margin:0}
/* A real before and after, because that is exactly what the feature is. Two
   stills rather than the draggable slider: the slider is a component with its
   own logic and this page has no business reaching into it. */
.yc-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
.yc-shot{position:relative;border-radius:var(--radius-md);overflow:hidden}
.yc-shot img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/4}
.yc-shot span{
  position:absolute;top:var(--space-3);left:var(--space-3);
  padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);
  font-family:var(--font-display);font-weight:var(--weight-heavy);
  font-size:var(--text-xs);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
}
.yc-shot--b span{background:var(--club-ink);color:var(--white)}
.yc-shot--a span{background:var(--club-blue);color:var(--white)}
.yc-shots__cap{
  margin-top:var(--space-3);font-size:var(--text-sm);color:var(--ink-500);
}

/* the panels the Club's own art sits in */
.yc-art{
  display:grid;place-items:center;
  aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;
}
/* Sunnies ships at 89x84. It is an app icon, not an illustration, so it is
   presented as one rather than blown up into a blurry picture. Club blue
   behind it, because the icon is already gold. */
.yc-art--icon{background:var(--club-blue)}
.yc-art--icon img{
  width:128px;height:auto;display:block;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-raised);
}
/* the wheel is a real screenshot and carries its own near-white ground, so it
   sits on white and the seam does not show */
.yc-art--shot{background:var(--white);border:1px solid var(--ink-150)}
.yc-art--shot img{width:100%;height:auto;display:block}
/* the one drawing left, in the Club's colours. White ground like the wheel
   panel rather than the parent brand's pale blue, which read as the wrong
   brand now that everything around it is the Club's. */
.yc-art--draw{background:var(--white);border:1px solid var(--ink-150)}
.yc-art--draw svg{width:58%;height:auto;max-height:78%}
.yc-art--draw .d-gold{fill:var(--club-gold)}
.yc-art--draw .d-blue{fill:var(--club-blue)}
.yc-art--draw .s-ink{stroke:var(--club-ink)}

/* ---------- the three supporting lines ---------- */
.yc-extras{
  display:grid;gap:var(--space-6);
  padding-block:var(--space-10);border-top:1px solid var(--ink-150);
}
/* two up once there is room, three only when the columns can still hold a
   readable measure. 1100 is a breakpoint this stylesheet's neighbours already
   use for the same reason; it is a component width, not the mobile boundary. */
@media (min-width:768px){.yc-extras{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-10) var(--space-12)}}
@media (min-width:1100px){.yc-extras{grid-template-columns:repeat(3,minmax(0,1fr))}}
.yc-extra b{
  display:block;font-family:var(--font-display);font-weight:var(--weight-heavy);
  font-size:var(--text-lg);letter-spacing:var(--tracking-display);
  margin-bottom:var(--space-2);
}
.yc-extra p{font-size:var(--text-md);line-height:var(--leading-body);color:var(--ink-700)}

/* ---------- joining, last ---------- */
/* The Club's blue carrying white type at 4.97:1. The parent site's rule that
   sky-500 never bears white text does not transfer: that is a rule about that
   pale cyan, which fails against white. This blue is dark enough to pass, and
   measuring it is the point of the rule rather than repeating its conclusion. */
.yc-join{background:var(--club-blue);padding-block:var(--air)}
.yc-join__grid{display:grid;gap:var(--space-8);align-items:center}
@media (min-width:768px){
  .yc-join__grid{grid-template-columns:minmax(0,1fr) auto;gap:var(--space-16)}
}
.yc-join h2{
  font-family:var(--font-display);font-weight:var(--weight-heavy);
  font-size:clamp(var(--text-xl),3vw,var(--text-3xl));
  line-height:var(--leading-heading);letter-spacing:var(--tracking-display);
  color:var(--white);max-width:20ch;
}
.yc-join p{
  margin-top:var(--space-4);font-size:var(--text-md);
  line-height:var(--leading-body);color:var(--white);max-width:46ch;
}
/* gold pill on the blue with black type on it: the Club's own pairing, and the
   loudest thing on the page, which is what the single action on it deserves */
.yc-join__go{
  display:inline-flex;align-items:center;gap:var(--space-3);
  margin-top:var(--space-8);
  padding:var(--space-5) var(--space-8);border-radius:var(--radius-pill);
  background:var(--club-gold);color:var(--club-ink);
  font-family:var(--font-display);font-weight:var(--weight-heavy);
  font-size:var(--text-lg);letter-spacing:var(--tracking-display);
  box-shadow:var(--shadow-card);
  transition:transform var(--speed-fast) var(--ease-out),
             box-shadow var(--speed-base) var(--ease-out);
}
.yc-join__go:hover{transform:translateY(-2px);box-shadow:var(--shadow-raised)}
.yc-join__go:active{transform:scale(.98)}
.yc-join__go svg{
  width:20px;height:20px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}

/* the code is for people reading on a computer, who cannot tap the button
   with the phone the club actually lives on */
.yc-qr{
  display:grid;justify-items:center;gap:var(--space-3);
  padding:var(--space-5);border-radius:var(--radius-lg);
  background:var(--white);box-shadow:var(--shadow-card);
}
.yc-qr img{width:180px;height:180px;display:block}
.yc-qr figcaption{
  font-size:var(--text-sm);color:var(--ink-500);text-align:center;max-width:22ch;
}
/* on a phone the code is useless - you cannot scan a screen with itself */
@media (max-width:767px){.yc-qr{display:none}}

/* ---------- the small footer ----------
   .base is defined in c06.css, which this page has no other reason to load,
   so the rule is repeated here rather than moved. Moving it would put it
   after c06 in the services page's cascade for no gain. */
.base{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);
  padding-block:var(--air);
  border-top:1px solid var(--ink-075);color:var(--ink-500);
}