/* =============================================================================
   ProstaHealth advertorial — rebuilt from the Funnelish original
   Every size/colour below is taken from the live page's computed styles.
   Layout: 1170px shell, 75% article + 25% sticky offer card, single column
   under 600px.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root {
  --brand:          #205C56;   /* buttons, promo bar, offer headline */
  --brand-contrast: #F6F9FE;   /* text on brand */
  --ink:            #252A32;   /* headline + form text */
  --body:           #303030;   /* body copy */
  --author:         #000000;   /* comment author */
  --fb-blue:        #3B5998;   /* comment separators */
  --muted:          #7F7F7F;   /* like counts, timestamps */
  --card-border:    #F0EDED;
  --card-shadow:    #E7E6E6;
  --footer-bg:      #9E9E9E;
  --header-bg:      #000000;

  --shell:      1170px;        /* content max width */
  --gutter:     10px;          /* shell side padding */
  --col-main:   75%;
  --col-aside:  25%;

  --font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --text:       18px;          /* body copy */
  --leading:    1.5;           /* 27px */
  --rhythm:     27px;          /* gap between paragraphs = one blank line */
}

/* --- Fonts ---------------------------------------------------------------- */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/open-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/open-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--body);
  font-family: var(--font);
  font-size: var(--text);
  line-height: var(--leading);
}

h1, h2, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
strong { font-weight: 700; }

/* --- Shell / layout ------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
}

.layout {
  display: flex;                /* columns stretch to full height on purpose - */
  padding-inline: var(--gutter);/* that is what gives the offer card room to stick */
}

.article { width: var(--col-main); }
.sidebar { width: var(--col-aside); }

/* =============================================================================
   Header
   ========================================================================== */
.site-header { background: var(--header-bg); }

.site-header__logo {
  height: 84px;
  width: auto;
  object-fit: scale-down;
}

/* =============================================================================
   Article
   Text sits 10px inside the column; figures run the full column width.
   ========================================================================== */
.article > :where(h1, h2, p, ul) { padding-inline: var(--gutter); }

/* the original wraps text with these two — keep them or the line breaks move */
.article :where(h1, h2, p, li),
.comment :where(p) {
  word-break: break-word;
  white-space: break-spaces;
}

/* vertical rhythm — one blank line between paragraphs, 10/20px around images */
.article > * + *                  { margin-top: var(--rhythm); }
.article > .article__figure       { margin-top: 10px; }
.article > .article__figure--lead { margin-top: 20px; }
.article > .article__figure + *   { margin-top: 20px; }
.article__title + *               { margin-top: 25px; }

.article__title {
  margin-top: 20px;
  color: var(--ink);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
}

.article__lead { font-weight: 700; }

.article h2 {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
}

.article__list li { padding-left: 8px; font-weight: 700; }

.article__figure img {
  margin-inline: auto;          /* narrow images sit centred in the column */
  border-radius: 10px;
}
.article__figure--lead img { border-radius: 15px; }

/* =============================================================================
   Buttons
   ========================================================================== */
.cta {
  display: block;
  border: none;
  border-radius: 4px;
  background: var(--brand);
  color: var(--brand-contrast);
  font: 500 20px/1.5 var(--font);
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  padding: 15px 30px;
  cursor: pointer;
  transition: filter .2s ease-in-out;
}
.cta:hover { filter: brightness(1.12); }

/* main CTA — rides along the bottom of the viewport while the article scrolls */
.cta-dock {
  position: sticky;
  bottom: 0;
  z-index: 10;
  margin-top: 20px;
}

.cta--small {
  border-radius: 10px;
  font-size: 15.5px;
  line-height: 1;
  margin: 0 21px 10px;
}

.cta--ghost {
  background: #fff;
  color: var(--brand);
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  margin-top: 5px;
}

/* =============================================================================
   Comments (static social proof, not a real thread)
   ========================================================================== */
.comments {
  margin: 25px 5px 0;
  padding-top: 10px;            /* padding, not margin — it must not collapse */
}

.comments__title {
  padding-inline: var(--gutter);
  font-size: 17px;
}

.comments__input {
  display: block;
  width: calc(100% - 20px);
  margin: 14px var(--gutter) 5px;
  padding: 11px 15px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font: 400 14px var(--font);
}
.comments__input::placeholder { color: #757575; }

.comment {
  display: flex;
  align-items: flex-start;
  padding: var(--gutter);
}

.comment__avatar {
  flex: 0 0 10%;
  max-width: 10%;
  margin-top: 10px;
  border-radius: 50%;
}

.comment__body { flex: 1; min-width: 0; }

.comment__author {
  margin-top: 5px;
  padding: var(--gutter);
  color: var(--author);
  line-height: 1.2;
}

.comment__text,
.comment__meta {
  padding-inline: var(--gutter);
  line-height: 1;
}
.comment__meta { padding-bottom: var(--gutter); }

.comment__meta a     { font-size: 12px; text-decoration: underline; }
.comment__sep        { font-size: 12px; color: var(--fb-blue); }
.comment__count      { font-size: 12px; color: var(--muted); }

/* =============================================================================
   Offer card (sticky sidebar)
   ========================================================================== */
.offer {
  position: sticky;
  top: 25px;                    /* keeps the same 25px gap once it is pinned */
  margin: 25px 0 0 var(--gutter);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: 2.33px 1.89px 3px 2px var(--card-shadow);
  text-align: center;
}

.offer__label {
  padding: 5px;
  font-size: 22px;
  line-height: 1.3;
}

.offer__trustpilot { width: 150px; margin-left: var(--gutter); }

.offer__rating {
  width: 235px;
  margin: 10px 15px 0 25px;     /* centred inside the card's 10px inset, as in the original */
}

.offer__title {
  margin-top: 10px;
  padding: 5px;
  color: var(--brand);
  font-size: 22px;
  line-height: 1;
}

.offer__benefits { margin: 5px 5px 0 var(--gutter); }

.offer__benefits li {
  display: flex;
  align-items: flex-start;
  text-align: left;
}

.offer__benefits img {
  flex: none;
  width: 25px;
  height: 25px;
  margin: 10px 0 0 -3px;        /* the tick overhangs its column slightly */
  border-radius: 50%;
}

.offer__benefits span {
  flex: 1;
  margin: 7px 0 0 3px;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
}

.offer__shot {
  width: 236px;
  height: 250px;
  margin: 20px auto 15px;
  border-radius: 10px;
  object-fit: cover;
}

/* =============================================================================
   Promo bar — pinned to the bottom of the viewport on desktop
   ========================================================================== */
.promo-bar {
  position: sticky;
  bottom: 10px;                 /* the original leaves a 10px strip below the bar */
  z-index: 10;
  background: var(--brand);
}

.promo-bar__inner {
  display: flex;
  align-items: flex-start;
  padding-inline: 0;
}

.promo-bar__text { width: 50%; }
.promo-bar .cta  { width: auto; }   /* button hugs its label, like the original */

.promo-bar__text {
  margin: 10px 0;
  padding: var(--gutter);
  color: #fff;
  line-height: 1;
  text-align: right;
}

/* =============================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--footer-bg);
  padding-top: 10px;
}

.site-footer p {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 10px 20px;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  text-align: center;
}

/* =============================================================================
   Mobile (the original switches at 600px)
   ========================================================================== */
@media (max-width: 600px) {
  .layout      { flex-direction: column; }
  .article,
  .sidebar     { width: 100%; }

  .site-header__logo { height: 47px; }

  .article__title { font-size: 25px; }
  .comments__title { font-size: 16px; }

  /* the offer card and the promo bar are desktop-only in the original */
  .sidebar,
  .promo-bar { display: none; }
}