@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;600&family=Cormorant+Garamond:wght@500&display=swap');

.cutis-table {
   --card: #faf6ef;
   --ink: #1c1a17;
   --muted: #6f6659;
   --line: #d8cdbb;
   --tan: #b79b73;
   --accent: var(--wp--preset--color--primary);
   margin: 0;
}

.cutis-table table {
   width: 100%;
   border-collapse: collapse;
   background: var(--card);
   overflow: hidden;
}

.cutis-table th,
.cutis-table td {
   padding: 14px 20px;
   text-align: left;
   border: 0;
   border-bottom: 1px solid var(--line);
   font-size: 14.5px;
   vertical-align: middle;
   font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
   color: var(--ink);
}

.cutis-table thead th {
   font-size: 12px;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--muted);
   font-weight: 600;
   background: #efe6d8;
}

.cutis-table thead th:nth-child(2),
.cutis-table thead th:nth-child(3),
.cutis-table td:nth-child(2),
.cutis-table td:nth-child(3) {
   text-align: center;
   width: 230px;
}

.cutis-table thead th:nth-child(3) {
   color: var(--accent);
}

.cutis-table td:first-child {
   font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
   font-weight: 500;
   font-size: 17px;
}

.cutis-table tbody tr:last-child td {
   border-bottom: none;
}

.cutis-table td .tag,
.cutis-table td span.tag {
   display: inline-flex !important;
   align-items: center;
   justify-content: center;
   width: auto !important;
   max-width: 100%;
   min-width: 200px;
   min-height: 36px;
   box-sizing: border-box;
   padding: 6px 14px;
   font-size: 11.5px;
   letter-spacing: .04em;
   line-height: 1.3;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
}

.cutis-table td .tag--reg {
   background: var(--accent);
   color: #fff;
   border: 1px solid var(--accent);
}

.cutis-table td .tag--theory {
   background: transparent;
   color: var(--muted);
   border: 1px solid var(--line);
}

.cutis-table td .tag--full {
   background: #e4ddcb;
   color: #3a3226;
   border: 1px solid #e4ddcb;
}

@media (max-width: 820px) {

   /* Ingen vandret scroll — tabellen skal passe i skærmen */
   .cutis-table {
      overflow-x: visible;
   }

   .cutis-table table {
      table-layout: fixed;
      width: 100%;
      white-space: normal;
   }

   /* Kolonner i procent i stedet for faste px */
   .cutis-table th:first-child,
   .cutis-table td:first-child {
      width: 42%;
      font-size: 14px;
      padding: 12px 10px;
      word-break: break-word;
      hyphens: auto;
   }

   .cutis-table th:nth-child(2),
   .cutis-table td:nth-child(2),
   .cutis-table th:nth-child(3),
   .cutis-table td:nth-child(3) {
      width: 29%;
      padding: 12px 6px;
   }

   .cutis-table thead th {
      font-size: 10px;
      letter-spacing: .06em;
      padding: 12px 6px;
   }

   /* Pillerne må fylde cellen og brække teksten */
   .cutis-table td .tag,
   .cutis-table td span.tag {
      display: inline-block !important;
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      white-space: normal !important;
      word-break: break-word;
      font-size: 10px !important;
      line-height: 1.35 !important;
      padding: 8px 8px !important;
   }
}

@media (max-width: 820px) {

   .cutis-table--cards {
      overflow: visible;
   }

   .cutis-table--cards table,
   .cutis-table--cards tbody,
   .cutis-table--cards tr,
   .cutis-table--cards td {
      display: block;
      width: 100%;
   }

   .cutis-table--cards thead {
      display: none;
   }

   .cutis-table--cards tr {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 20px 18px;
      border-bottom: 1px solid var(--line);
   }

   .cutis-table--cards tbody tr:last-child {
      border-bottom: none;
   }

   .cutis-table--cards td:first-child {
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: 20px;
      line-height: 1.25;
      padding: 0 0 4px;
      border: none;
      flex: 0 0 100%;
   }


   .cutis-table--cards td[data-label] {
      display: flex;
      flex-direction: column;
      flex: 1 1 0;
      min-width: 0;
      padding: 0;
      border: none;
      text-align: left;
   }

   .cutis-table--cards tr td:last-child {
      padding-bottom: 0;
   }

   .cutis-table--cards td[data-label]::before {
      content: attr(data-label);
      display: block;
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 600;
      margin-bottom: 6px;
   }

   .cutis-table--cards td[data-label] .tag {
      display: flex !important;
      align-items: center;
      justify-content: center;
      flex: 1;
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      white-space: normal !important;
      word-break: normal !important;
      overflow-wrap: break-word;
      hyphens: none;
      text-align: center;
      font-size: 10.5px !important;
      line-height: 1.35 !important;
      padding: 10px 8px !important;
      border-radius: 0 !important;
      box-sizing: border-box;
   }
}


@media (min-width: 1000px) {
   body.page-id-1969 {
      .cutis-table table {
         height: 511px;
      }
   }

   body.page-id-1967 {
      .cutis-table {
         height: 502px;
         overflow: hidden;
      }
   }
}