/* =========================================================
   Attachment-sidan — mall 7112, design "Attachment sida" 1a (2026-09-17)

   Klasserna brk-as-* på Bricks-elementen (hjälte, sektionshuvuden, "More
   attachments") och på markupen ur attachment-single.php (nyckeltal, tabell,
   robotkort). Rubriker och knappar ärver typografi ur temastilen; Saira sätts
   bara på modellnamn och nyckeltal, som inte är rubriker men ska läsas som
   beteckningar.
   ========================================================= */

/* Designens gråskalor (#7a7a7a, #8a8a8a, #dcd9d2, #eeebe4) är översatta till
   paletten i DESIGN.md: sekundär text på --accent, hårlinjer på --neutral-light,
   radavdelare på --neutral-ultra-light. Radien följer "vad elementet är":
   tabellramen och robotkorten är innehållsboxar (--radius), chipsen är
   kontroller (--radius-xs). */

/* ── Hjälte ─────────────────────────────────────────────── */

.brk-as-hero__text {
    justify-content: center;
}

.brk-as-hero__lead {
    max-width: 48ch;
    color: var(--base);
    font-size: var(--text-l);
    line-height: 1.6;
}

/* Bildytan: inramad vit platta, bilden centrerad och inpassad — inte beskuren.
   Designen hade en ljusgrå platta, men attachmentbilderna har egen vit botten
   och ritade då en vit ruta i den grå. Samma inramning som produktsidans
   toppbild i stället: en innehållsbox, alltså --radius. */
.brk-as-hero__media {
    background: var(--white);
    border: 1px solid var(--neutral-light);
    border-radius: var(--radius);
    min-height: 44rem;
    justify-content: center;
    align-items: center;
    padding: var(--space-l);
}

/* Figuren fyller plattan, så bilden kan skalas mot plattan och inte mot sin
   egen inneboende bredd (den stod på 278 px i en 440 px hög platta). */
.brk-as-hero__media > figure {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
}

.brk-as-hero__media img {
    width: 90%;
    height: auto;
    max-height: 38rem;
    object-fit: contain;
}

@media (max-width: 991px) {
    .brk-as-hero__media { min-height: 30rem; }
}

/* ── Sektionshuvud: rubrik + textlänk på samma baslinje ───── */

.brk-as-head {
    display: flex;
    flex-direction: row;   /* Bricks-containern är kolumn som standard */
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-xs) var(--space-m);
}

/* Samma form som branschsidornas "All machines →" (components/industry-page):
   ingen svart understrykning – svarta hårda streck används inte på sajten
   (Anders 2026-10-09). Ikonen kommer ur ikonsetet via Bricks-elementet. */
.brk-as-head__link {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: var(--text-s);
    font-weight: 600;
    color: var(--text-dark);
}

.brk-as-head__link:hover { color: var(--text-dark); }

.brk-as-head__link svg {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    transition: translate var(--dur-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .brk-as-head__link--next:hover svg { translate: .3rem 0; }
}

/* ── Specifikationstabellen ─────────────────────────────── */

/* Beige ram, vita rader inuti: rubrikraden står i ramen, raderna i ett vitt
   kort 1,2 rem in. Byggt på en riktig <table> för skärmläsarnas skull —
   inset-kortet ritas med cellbakgrunder, inte med en extra wrapper. */
.brk-as-specs__frame {
    background: var(--tertiary-ultra-light);
    border-radius: var(--radius);
    padding: 0 1.2rem 1.2rem;
    overflow-x: auto;
}

.brk-as-specs__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-m);
}

.brk-as-specs__th {
    padding: 2.2rem 1.6rem 1.6rem;
    text-align: left;
    vertical-align: bottom;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
}

.brk-as-specs__th:first-child { padding-left: 2.8rem; }
.brk-as-specs__th--made { width: 32%; }

.brk-as-specs__row > * {
    background: var(--white);
    padding: 1.8rem 1.6rem;
    border-top: 1px solid var(--neutral-ultra-light);
    text-align: left;
    vertical-align: middle;
}

.brk-as-specs__row:first-child > * { border-top-color: transparent; }
.brk-as-specs__row > :first-child { padding-left: 2.8rem; }
.brk-as-specs__row > :last-child { padding-right: 2.8rem; }
.brk-as-specs__row:first-child > :first-child { border-top-left-radius: var(--radius-xs); }
.brk-as-specs__row:first-child > :last-child { border-top-right-radius: var(--radius-xs); }
.brk-as-specs__row:last-child > :first-child { border-bottom-left-radius: var(--radius-xs); }
.brk-as-specs__row:last-child > :last-child { border-bottom-right-radius: var(--radius-xs); }

.brk-as-specs__row:hover > * { background: var(--tertiary-ultra-light); }

.brk-as-specs__model {
    font-family: var(--font-condensed);
    font-size: var(--h4);
    font-weight: 700;
    white-space: nowrap;
}

.brk-as-specs__value {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.brk-as-specs__alt {
    color: var(--accent);
    font-weight: 400;
    white-space: nowrap;
}

.brk-as-specs__notes {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.2rem;
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-xs);
    line-height: 1.7;
    color: var(--accent);
}

.brk-as-specs__notes li + li::before {
    content: "·";
    margin-right: 1.2rem;
}

/* Produktbladen (PDF) bland fotnoterna — understrukna så de syns som länkar. */
.brk-as-specs__notes a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Robotchips. Radien följer knapparna (--radius-xs). */
.brk-as-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.brk-as-chip {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 3.2rem;
    padding: .6rem 1.2rem;
    background: var(--tertiary);
    border-radius: var(--radius-xs);
    color: var(--text-dark);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
    transition: background-color var(--dur-fast) ease;
}

a.brk-as-chip:hover { background: var(--primary); color: var(--text-dark); }
a.brk-as-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Ikonsetets pil (inc/icons.php). */
.brk-as-chip__arrow { flex: none; width: 1.2rem; height: 1.2rem; color: var(--accent); }
.brk-as-chip--plain { background: transparent; box-shadow: inset 0 0 0 1px var(--neutral-light); }

/* Mobil: en rad blir ett kort. Kolumnrubriken följer med varje värde via
   data-label, eftersom rubrikraden inte längre står ovanför. */
@media (max-width: 767px) {
    .brk-as-specs__frame { padding: 1.2rem; }
    .brk-as-specs__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .brk-as-specs__table,
    .brk-as-specs__table tbody,
    .brk-as-specs__row,
    .brk-as-specs__row > * { display: block; }
    .brk-as-specs__row + .brk-as-specs__row { margin-top: 1.2rem; }
    .brk-as-specs__row > * { border-top: 0; padding: .4rem 1.6rem; }
    .brk-as-specs__row > :first-child { padding: 1.6rem 1.6rem .8rem; }
    .brk-as-specs__row > :last-child { padding-bottom: 1.6rem; }
    .brk-as-specs__row > * { border-radius: 0 !important; }
    .brk-as-specs__row { border-radius: var(--radius-xs); overflow: hidden; }
    .brk-as-specs__row > [data-label] {
        display: grid;
        grid-template-columns: 11rem minmax(0, 1fr);
        gap: 1.2rem;
    }
    .brk-as-specs__row > [data-label] > * { min-width: 0; }
    .brk-as-specs__alt { white-space: normal; }

    /* Fotnoterna under varandra: radbrutna blev mittpunkterna radens första tecken. */
    .brk-as-specs__notes { display: block; }
    .brk-as-specs__notes li + li::before { content: none; }

    .brk-as-specs__row > [data-label]::before {
        content: attr(data-label);
        font-size: var(--text-xs);
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--accent);
        padding-top: .3rem;
    }
    .brk-as-chip { min-height: 44px; }
}

/* ── Fits these robots ──────────────────────────────────── */

.brk-as-robots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
    gap: 1.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.brk-as-robot {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    text-align: center;
    height: 100%;
    padding: 1.8rem 1.8rem 1.6rem;
    background-color: var(--white);
    border: 1px solid var(--tertiary-light);
    border-radius: var(--radius);
    color: var(--text-dark);
    transition: border-color var(--dur-fast) ease;
}

a.brk-as-robot:hover { border-color: var(--tertiary-trans-90); color: var(--text-dark); }
a.brk-as-robot:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.brk-as-robot__media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 9rem;
}

.brk-as-robot__media img {
    width: 100%;
    height: 100%;
    padding: .6rem;
    object-fit: contain;
}

.brk-as-robot__name {
    margin: 0;
    font-size: var(--text-l);
    line-height: 1;
}

.brk-as-robot__models {
    font-size: var(--text-xs);
    color: var(--accent);
}

/* Två robotkort i bredd på mobil — ett per rad blev nio skärmhöjder. Står
   efter grundreglerna ovan, som annars vinner på källordningen. */
@media (max-width: 767px) {
    .brk-as-robots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    .brk-as-robot { padding: 1.2rem; gap: .8rem; }
    .brk-as-robot__media { height: 7rem; }
}

/* ── More attachments ───────────────────────────────────── */

.brk-as-more {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--neutral-light); /* hårlinje, inte svart */
}

@media (max-width: 1199px) { .brk-as-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .brk-as-more { grid-template-columns: minmax(0, 1fr); } }

/* Hover som megamenyns rader och branschsidornas maskinlista: platta och radie
   ur --hdd-*, luft innanför plattan så att bilden aldrig ligger mot kanten,
   namnet puttas 4 px. Hårlinjen ritas av ::after – en border hade följt radien. */
.brk-as-more__item {
    position: relative;
    display: grid;
    grid-template-columns: 6.4rem minmax(0, 1fr);
    align-items: center;
    gap: 1.4rem;
    padding: 1.6rem 1.2rem;
    border-radius: var(--hdd-link-radius);
    color: var(--text-dark);
    transition: background-color var(--dur-fast) var(--ease-out);
}

.brk-as-more__item::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: var(--neutral-light);
}

.brk-as-more__item:hover { color: var(--text-dark); }

@media (hover: hover) and (pointer: fine) {
    .brk-as-more__item:hover { background: var(--hdd-link-bg-hover); }
    .brk-as-more__item:hover .brk-as-more__body { translate: .4rem 0; } /* namn och rad flyttar tillsammans */
}

/* Utan ram och ruta: produktbildens vita botten smälter in, även på plattan. */
.brk-as-more__thumb {
    width: 6.4rem;
    height: 6.4rem;
    margin: 0;
}

.brk-as-more__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.brk-as-more__body {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
    transition: translate var(--dur-fast) var(--ease-out);
}

.brk-as-more__name {
    margin: 0;
    font-size: var(--text-m);
    line-height: 1.05;
}

@media (prefers-reduced-motion: reduce) {
    .brk-as-head__link svg,
    .brk-as-more__body { transition: none; }
    .brk-as-head__link--next:hover svg,
    .brk-as-more__item:hover .brk-as-more__body { translate: none; }
}

.brk-as-more__line {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 400; /* länken är 600 */
    line-height: 1.4;
    color: var(--accent);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}