/* =========================================================================
   MOCKLAB — freebies page.
   Layout follows creatsy.com/freebies: dark hero with breadcrumb + intro,
   a centred lead line, then the same product wall as the shop with a
   download block in place of the price panel. Depends on shop.css.
   ========================================================================= */

/* ------------------------------------------------------------------ intro */

.free-intro {
  margin-top: var(--sp-40);
  margin-bottom: var(--sp-40);
  max-width: 900px;
  font-size: 18px;
  line-height: 1.6;
  text-align: center;
  color: var(--primary);
}

/* ------------------------------------------------- card download block --- */

.pcard__dl {
  display: grid;
  place-items: center;
  min-width: 92px;
  padding: 0 var(--sp-20);
  background: var(--surface);
  border-left: 1px solid #dedede;
  color: var(--ink);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pcard__dl svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pcard__dl:hover { background: var(--ink); color: var(--surface); }

.pcard__get {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  height: 46px;
  background: rgba(25, 25, 25, 0.94);
  color: var(--surface);
  font-size: var(--text-caption);
  font-weight: var(--w-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-out);
}
.pcard:hover .pcard__get,
.pcard:focus-within .pcard__get { opacity: 1; transform: translateY(0); }
.pcard__get:hover { background: var(--accent); }

/* ----------------------------------------------------------- claim panel - */

.free-claim {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 0;
  margin-bottom: var(--sp-40);
  border: 1px solid #dedede;
  background: var(--surface);
}
.free-claim__media {
  position: relative;
  min-height: 320px;
  background: #f3f3f3;
  overflow: hidden;
}
.free-claim__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.free-claim__body {
  padding: var(--sp-40) var(--sp-40) var(--sp-32);
  border-left: 1px solid #dedede;
}
.free-claim__eyebrow {
  font-size: var(--text-micro);
  font-weight: var(--w-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.free-claim__body h2 {
  margin: var(--sp-10) 0 var(--sp-6);
  font-size: var(--text-heading-sm);
  font-weight: var(--w-bold);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.free-claim__meta {
  margin-bottom: var(--sp-24);
  color: var(--muted);
  font-size: 14px;
}
.free-claim__form { display: grid; gap: var(--sp-12); max-width: 420px; }
.free-claim__label {
  display: block;
  margin-bottom: var(--sp-6);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
}
.free-claim__form input {
  width: 100%;
  height: 48px;
  padding: 0 var(--sp-12);
  border: 1px solid #dedede;
  border-radius: 0;
  background: var(--surface);
  font: inherit;
  font-size: 15px;
  color: var(--ink);
}
.free-claim__form input:focus { outline: none; border-color: var(--ink); }
.free-claim__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 48px;
  margin-top: var(--sp-5);
  padding: 0 var(--sp-30);
  background: var(--ink);
  color: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 0;
  font-size: 14px;
  font-weight: var(--w-normal);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.free-claim__btn:hover { background: var(--accent); border-color: var(--accent); }
.free-claim__back { margin-top: var(--sp-24); font-size: 14px; }
.free-claim__back a { text-decoration: underline; text-underline-offset: 3px; }

.free-note {
  margin: 0 0 var(--sp-20);
  padding: var(--sp-12) var(--sp-16);
  border: 1px solid #dedede;
  border-left: 3px solid var(--ink);
  font-size: 14px;
  line-height: 1.6;
}
.free-note.is-error { border-left-color: var(--accent); color: #8a1f1f; }

/* ------------------------------------------------------------- empty set - */

.free-empty {
  border: 1px solid #dedede;
  padding: var(--sp-60) var(--sp-40);
  text-align: center;
}
.free-empty h2 {
  font-size: var(--text-heading-sm);
  font-weight: var(--w-bold);
  letter-spacing: -0.01em;
}
.free-empty p {
  max-width: 560px;
  margin: var(--sp-16) auto 0;
  color: var(--primary);
  font-size: var(--text-link);
  line-height: 1.7;
}
.free-empty__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-12);
  margin-top: var(--sp-30);
}
.free-empty__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--sp-24);
  border: 1px solid var(--ink);
  border-radius: 0;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.free-empty__actions .is-primary { background: var(--ink); color: var(--surface); }
.free-empty__actions .is-primary:hover { background: var(--accent); border-color: var(--accent); }
.free-empty__actions .is-ghost:hover { background: var(--ink); color: var(--surface); }

/* ----------------------------------------------------------- how it works - */

.free-steps {
  margin-top: var(--sp-80);
  padding-top: var(--sp-50);
  border-top: 1px solid #ececec;
}
.free-steps h2 {
  font-size: var(--text-heading-sm);
  font-weight: var(--w-bold);
  letter-spacing: -0.01em;
}
.free-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-30);
  margin-top: var(--sp-24);
}
.free-step__no {
  font-size: var(--text-micro);
  font-weight: var(--w-bold);
  letter-spacing: 0.16em;
  color: var(--accent);
}
.free-step h3 {
  margin: var(--sp-10) 0 var(--sp-6);
  font-size: var(--text-ui);
  font-weight: var(--w-semibold);
}
.free-step p { color: var(--muted); font-size: 14px; line-height: 1.7; }

/* ------------------------------------------------------------ responsive - */
/* =========================================================================
   Freebie product page — creatsy.com PDP pattern: oversized centred title,
   preview on the left and a dark licence/claim panel on the right, then the
   long-form detail sections.
   ========================================================================= */

.fpdp-head {
  padding: 0 0 var(--sp-30);
}
.fpdp-head .crumbs {
  justify-content: flex-start;
  color: var(--muted);
}
.fpdp-title {
  margin: var(--sp-24) 0 0;
  font-size: 52px;
  font-weight: var(--w-bold);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-align: center;
}
.fpdp-strip {
  position: relative;
  padding: var(--sp-40) var(--sp-20);
  background: var(--bg);
}
.fpdp-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-16);
  margin-top: var(--sp-24);
  font-size: 14px;
  color: var(--primary);
}
.fpdp-meta__author {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-10);
}
.fpdp-meta__avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--ink);
  color: var(--surface);
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 0.06em;
}
.fpdp-meta__badge {
  padding: var(--sp-5) var(--sp-10);
  background: #a3d14a;
  color: var(--ink);
  font-size: var(--text-micro);
  font-weight: var(--w-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.fpdp-idbar {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-16);
  padding: var(--sp-16) 0;
  border-bottom: 1px solid #dedede;
  font-size: 13px;
  color: var(--muted);
}

.fpdp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-areas:
    "preview side"
    "details side";
  align-items: start;
  border-bottom: 1px solid #dedede;
}
.fpdp-preview {
  grid-area: preview;
  display: block;
  padding: 0 0 var(--sp-30);
}
.fpdp-preview__frame {
  position: relative;
  background: #f3f3f3;
  overflow: hidden;
}
.fpdp-preview__frame img {
  width: 100%;
  max-height: 720px;
  object-fit: contain;
}
.fpdp-preview__tag {
  position: absolute;
  top: var(--sp-16);
  left: var(--sp-16);
  padding: var(--sp-6) var(--sp-12);
  background: var(--ink);
  color: var(--surface);
  font-size: var(--text-micro);
  font-weight: var(--w-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fpdp-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-10);
  padding-top: var(--sp-16);
}
.fpdp-thumbs button {
  width: 92px;
  height: 92px;
  padding: 0;
  border: 1px solid #dedede;
  background: #f3f3f3;
  overflow: hidden;
  cursor: pointer;
}
.fpdp-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.fpdp-thumbs button.is-on { border-color: var(--ink); }

/* dark licence / claim panel */
.fpdp-side {
  grid-area: side;
  position: sticky;
  top: calc(var(--header-h) + var(--sp-16));
  padding: var(--sp-30) var(--sp-30) var(--sp-40);
  background: #191919;
  color: #ffffff;
}
.fpdp-side__kicker {
  padding-bottom: var(--sp-12);
  border-bottom: 4px solid #ffffff;
  font-size: var(--text-micro);
  font-weight: var(--w-bold);
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
}
.fpdp-side h2 {
  margin: var(--sp-20) 0 var(--sp-12);
  font-size: 26px;
  font-weight: var(--w-bold);
}
.fpdp-licence {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-16) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: var(--text-ui);
}
.fpdp-licence__dot {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 1.5px solid #ffffff;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #191919, inset 0 0 0 8px #ffffff;
}
.fpdp-licence__price { margin-left: auto; font-weight: var(--w-bold); }
.fpdp-side__links {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-12);
  padding: var(--sp-12) 0 var(--sp-20);
  font-size: 12px;
}
.fpdp-side__links a { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.fpdp-side__links a:hover { color: var(--accent); }

.fpdp-form { display: grid; gap: var(--sp-10); }
.fpdp-form label {
  font-size: var(--text-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.fpdp-form input {
  width: 100%;
  height: 52px;
  padding: 0 var(--sp-12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0;
  background: #101010;
  color: #ffffff;
  font: inherit;
  font-size: 15px;
}
.fpdp-form input:focus { outline: none; border-color: #ffffff; }
.fpdp-form button {
  height: 54px;
  margin-top: var(--sp-6);
  background: var(--surface);
  color: var(--ink);
  border-radius: 0;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.fpdp-form button:hover { background: var(--accent); color: var(--surface); }

.fpdp-note {
  margin-bottom: var(--sp-16);
  padding: var(--sp-12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 13px;
  line-height: 1.55;
}
.fpdp-note.is-error { border-color: var(--accent); color: #ffd9d6; }
.fpdp-download {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  background: #a3d14a;
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.fpdp-download:hover { background: var(--surface); }

.fpdp-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-10);
  margin-top: var(--sp-16);
}
.fpdp-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 13px;
}
.fpdp-actions a:hover { border-color: #ffffff; background: rgba(255, 255, 255, 0.08); }

.fpdp-cross {
  margin-top: var(--sp-30);
  padding-top: var(--sp-20);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.fpdp-cross h3 {
  font-size: var(--text-ui);
  font-weight: var(--w-semibold);
}
.fpdp-cross a.fpdp-cross__item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: center;
  margin-top: var(--sp-16);
  font-size: 14px;
  line-height: 1.4;
}
.fpdp-cross__item img { width: 84px; height: 84px; object-fit: cover; }
.fpdp-cross__item span { color: rgba(255, 255, 255, 0.7); display: block; font-size: 12px; margin-top: 4px; }
.fpdp-cross a.fpdp-cross__item:hover { color: var(--accent); }

/* long-form detail column */
.fpdp-details {
  grid-area: details;
  max-width: 860px;
  padding: var(--sp-52) var(--sp-40) var(--sp-60) 0;
}
.fpdp-details > h2 {
  font-size: 34px;
  font-weight: var(--w-bold);
  letter-spacing: -0.01em;
}
.fpdp-details > p {
  margin-top: var(--sp-16);
  font-size: var(--text-link);
  line-height: 1.8;
  color: var(--primary);
}
.fpdp-block {
  margin-top: var(--sp-40);
}
.fpdp-block h3 {
  font-size: 20px;
  font-weight: var(--w-bold);
}
.fpdp-list {
  margin-top: var(--sp-16);
  display: grid;
  gap: var(--sp-10);
}
.fpdp-list li {
  position: relative;
  padding-left: var(--sp-20);
  font-size: var(--text-link);
  line-height: 1.7;
  color: var(--primary);
}
.fpdp-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background: var(--ink);
}
.fpdp-list strong { font-weight: var(--w-semibold); }
.fpdp-steps {
  counter-reset: fpdp-step;
  margin-top: var(--sp-16);
  display: grid;
  gap: var(--sp-16);
}
.fpdp-steps li {
  counter-increment: fpdp-step;
  position: relative;
  padding-left: var(--sp-40);
  font-size: var(--text-link);
  line-height: 1.7;
  color: var(--primary);
}
.fpdp-steps li::before {
  content: counter(fpdp-step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--ink);
  font-size: 12px;
  font-weight: var(--w-bold);
}
.fpdp-files {
  margin-top: var(--sp-16);
  border-top: 1px solid #ececec;
}
.fpdp-files div {
  display: flex;
  gap: var(--sp-16);
  padding: var(--sp-12) 0;
  border-bottom: 1px solid #ececec;
  font-size: 14px;
}
.fpdp-files dt { flex: 0 0 190px; color: var(--muted); }
.fpdp-files dd { margin: 0; color: var(--ink); }
.fpdp-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
  margin-top: var(--sp-30);
}
.fpdp-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--sp-24);
  border: 1px solid var(--ink);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fpdp-cta a.is-primary { background: var(--ink); color: var(--surface); }
.fpdp-cta a.is-primary:hover { background: var(--accent); border-color: var(--accent); }
.fpdp-cta a.is-ghost:hover { background: var(--ink); color: var(--surface); }

.fpdp-related {
  margin-top: var(--sp-60);
}
.fpdp-related h2 {
  font-size: var(--text-heading-sm);
  font-weight: var(--w-bold);
  letter-spacing: -0.01em;
}
.fpdp-related .product-wall { margin-top: var(--sp-24); }

@media (max-width: 1023px) {
  .fpdp-title { font-size: 38px; }
  .fpdp-grid { grid-template-columns: minmax(0, 1fr); }
  .fpdp-grid { grid-template-areas: "preview" "side" "details"; }
  .fpdp-side { border-top: 1px solid #dedede; }
  .fpdp-side { position: static; }
  .fpdp-details { padding: var(--sp-40) 0 var(--sp-40); }
}

@media (max-width: 719px) {
  .fpdp-title { font-size: 28px; margin-top: var(--sp-16); }
  .fpdp-strip { padding: var(--sp-30) var(--sp-16); }
  .fpdp-meta { gap: var(--sp-10); font-size: 13px; justify-content: flex-start; }
  .fpdp-side { padding: var(--sp-24) var(--sp-20) var(--sp-30); }
  .fpdp-side h2 { font-size: 22px; }
  .fpdp-details > h2 { font-size: 26px; }
  .fpdp-files div { flex-direction: column; gap: var(--sp-5); }
  .fpdp-files dt { flex: 0 0 auto; }
  .fpdp-cta a { width: 100%; }
}

@media (max-width: 1023px) {
  .free-claim { grid-template-columns: minmax(0, 1fr); }
  .free-claim__media { min-height: 260px; }
  .free-claim__body { border-left: 0; border-top: 1px solid #dedede; padding: var(--sp-30); }
  .free-steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 719px) {
  .free-intro { margin-top: var(--sp-24); margin-bottom: var(--sp-24); font-size: 16px; }
  .free-claim__media { min-height: 200px; }
  .free-claim__body { padding: var(--sp-24) var(--sp-20); }
  .free-claim__btn { justify-self: stretch; }
  .free-empty { padding: var(--sp-40) var(--sp-20); }
  .free-steps__grid { grid-template-columns: minmax(0, 1fr); }
  .pcard__get { display: none; }
  .page-free .pcard { padding-bottom: 0; }
}