/* =========================================================================
   chrille.nu - Freebies, det utskrivbara pysslet
   Planschbehandlingen från utbildningsuniversumet: utskrifter är tryck.
   Inga priser, ingen rea, ingen kassa.
   ========================================================================= */

.c-freebies {
  background: var(--u-bg);
  color: var(--u-text);
  min-height: 70vh;
}
.c-freebies__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-7);
}

/* --- Huvudet ------------------------------------------------------------- */
.c-freebies__head { padding: var(--s-9) 0 var(--s-7); }

.c-freebies__badge {
  margin: var(--s-2) 0 0;
  font: var(--t-label);
  letter-spacing: .14em;
  color: var(--u-accent);
}

.c-freebies__title {
  margin: var(--s-5) 0 var(--s-4);
  font-family: var(--u-heading-font);
  font-size: clamp(44px, 7vw, 84px);
  line-height: 1;
  font-weight: 700;
  color: var(--u-text);
}

.c-freebies__lead {
  margin: 0 0 var(--s-7);
  max-width: 62ch;
  font: var(--t-lead);
  color: var(--u-text);
}

/* --- Sök ----------------------------------------------------------------- */
.c-freebies__search {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  max-width: 640px;
}
.c-freebies .c-freebies__input {
  flex: 1 1 260px;
  min-width: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: var(--radius-sm);
  font: 400 15px/1.4 var(--f-sans);
  color: var(--u-text);
}
.c-freebies .c-freebies__input::placeholder { color: var(--u-text-dim); }
.c-freebies .c-freebies__input:focus {
  outline: 2px solid var(--u-accent);
  outline-offset: 1px;
  border-color: var(--u-accent);
}
.c-freebies .c-freebies__submit {
  flex: none;
  padding: var(--s-3) var(--s-5);
  background: var(--u-accent);
  border: 1px solid var(--u-accent);
  border-radius: var(--radius-sm);
  color: var(--c-white);
  font: 600 14px/1 var(--f-sans);
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}
.c-freebies .c-freebies__submit:hover { opacity: .88; }

/* --- Filterchips --------------------------------------------------------- */
.c-freebies .c-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}
.c-freebies .c-chip {
  display: inline-block;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--u-line);
  border-radius: var(--radius-pill);
  font: 500 13px/1 var(--f-sans);
  color: var(--u-text-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.c-freebies .c-chip:hover,
.c-freebies .c-chip:focus-visible {
  border-color: var(--u-accent);
  color: var(--u-accent);
}
.c-freebies .c-chip.is-on {
  background: var(--u-accent);
  border-color: var(--u-accent);
  color: var(--c-white);
}

/* --- Rutnätet ------------------------------------------------------------ */
.c-freebies__body { padding-bottom: var(--s-9); }

.c-freebies__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-5);
}

.c-ark {
  display: flex;
  flex-direction: column;
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.c-ark:hover { border-color: var(--u-accent); }

.c-freebies .c-ark__link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-decoration: none;
  color: inherit;
}
.c-freebies .c-ark__link:focus-visible {
  outline: 2px solid var(--u-accent);
  outline-offset: 2px;
}

/* A4-proportionen bär hela igenkänningen: det här ska skrivas ut. */
.c-ark__forhand {
  position: relative;
  aspect-ratio: 210 / 297;
  background: var(--u-bg);
  border-bottom: 1px solid var(--u-line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.c-ark__forhand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.c-ark__format {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 1;
  font: var(--t-label);
  letter-spacing: .08em;
  color: var(--u-text-dim);
}
.c-ark__ikon { color: var(--u-accent); opacity: .55; }

.c-ark__text {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  flex-grow: 1;
}
.c-ark__kategori {
  font: var(--t-label);
  letter-spacing: .08em;
  color: var(--u-accent);
}
.c-ark__namn {
  font: 600 16px/1.3 var(--f-sans);
  color: var(--u-text);
}

.c-freebies .c-ark__ned {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-4);
  border-top: 1px solid var(--u-line);
  font: 600 13px/1 var(--f-sans);
  color: var(--u-accent);
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.c-freebies .c-ark__ned:hover {
  background: var(--u-accent);
  color: var(--c-white);
}

.c-freebies__empty { font: var(--t-body); color: var(--u-text-dim); }

/* --- Varför gratis ------------------------------------------------------- */
.c-freebies__varfor {
  background: var(--u-surface);
  border-top: 1px solid var(--u-line);
  padding: var(--s-8) 0;
}
.c-freebies__varfor-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-7);
  flex-wrap: wrap;
}
.c-freebies__varfor-text { flex: 1 1 420px; }
.c-freebies__varfor-cta {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.c-freebies__label {
  margin: 0 0 var(--s-3);
  font: var(--t-label);
  letter-spacing: .14em;
  color: var(--u-text-dim);
}
.c-freebies__brod {
  margin: 0;
  max-width: 52ch;
  font: 400 17px/1.7 var(--f-sans);
  color: var(--u-text);
}

/* =========================================================================
   Enskilt ark
   ========================================================================= */
.c-ark-sida { background: var(--u-bg); color: var(--u-text); }
.c-ark-sida__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--s-7) var(--s-7) var(--s-9);
}

.c-ark-sida__brodsmula {
  margin: 0 0 var(--s-6);
  font: var(--t-label);
  letter-spacing: .08em;
  color: var(--u-text-dim);
}
.c-ark-sida .c-ark-sida__brodsmula a { color: var(--u-text-dim); }

.c-ark-sida__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}

.c-ark-sida__ram {
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: var(--radius);
  padding: var(--s-6);
}
.c-ark-sida__forhand {
  position: relative;
  aspect-ratio: 210 / 297;
  background: var(--u-bg);
  border: 1px solid var(--u-line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.c-ark-sida__forhand img { width: 100%; height: 100%; object-fit: contain; display: block; }

.c-ark-sida__info { display: flex; flex-direction: column; gap: var(--s-5); }

.c-ark-sida__topp { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.c-ark-sida__gratis {
  padding: 6px 12px;
  background: var(--u-accent);
  border-radius: var(--radius-pill);
  font: 700 11px/1 var(--f-mono);
  letter-spacing: .1em;
  color: var(--c-white);
}
.c-ark-sida__kategori {
  font: var(--t-label);
  letter-spacing: .08em;
  color: var(--u-text-dim);
}

.c-ark-sida .c-ark-sida__titel {
  margin: 0;
  font: 700 clamp(30px, 3.6vw, 44px)/1.1 var(--u-heading-font);
  color: var(--u-text);
}
.c-ark-sida__brod {
  margin: 0;
  max-width: 52ch;
  font: 400 18px/1.65 var(--f-sans);
  color: var(--u-text);
}

.c-ark-sida__fakta { display: flex; flex-direction: column; border-top: 1px solid var(--u-line); }
.c-ark-sida__rad {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--u-line);
}
.c-ark-sida__namn { font: 500 15px/1.3 var(--f-sans); color: var(--u-text-dim); }
.c-ark-sida__varde {
  font: 700 15px/1 var(--f-mono);
  color: var(--u-text);
  font-variant-numeric: tabular-nums;
}

.c-ark-sida .c-ark-sida__knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 56px;
  padding: 0 var(--s-6);
  background: var(--u-accent);
  border-radius: var(--radius-sm);
  color: var(--c-white);
  font: 700 17px/1 var(--f-sans);
  text-decoration: none;
  transition: opacity var(--dur) var(--ease);
}
.c-ark-sida .c-ark-sida__knapp:hover { opacity: .88; }

.c-ark-sida__finstilt { margin: 0; font: 400 14px/1.6 var(--f-sans); color: var(--u-text-dim); }

/* =========================================================================
   Responsivt
   ========================================================================= */
@media (max-width: 900px) {
  .c-freebies__inner { padding-inline: var(--s-5); }
  .c-freebies__head { padding: var(--s-8) 0 var(--s-6); }
  .c-ark-sida__inner { padding-inline: var(--s-5); }
  .c-ark-sida__grid { grid-template-columns: 1fr; gap: var(--s-6); }
}