/* ==========================================================================
   tcdam — gallery base styles
   ==========================================================================
   Per-gallery LAYOUT css (grid columns, cell placement, aspect ratios, and the
   responsive breakpoints) is generated server-side by TCDamLayout and registered
   inline, scoped to that gallery's own class. This file holds only what is shared.
   ========================================================================== */

.tcdam-gallery { width: 100%; }

/* --------------------------------------------------------------- corner radius ----
   CONSISTENT CORNERS, EVERY TILE, EVERY MODE.

   The radius is applied to the figure, the anchor AND the image, all from one variable
   (--tcdam-radius, emitted per gallery by TCDamLayout from tcdam.corner_radius).

   Putting it on the figure alone is not enough: the legacy markup carried Bootstrap's
   `rounded rounded-lg` on the <img> itself, and dropping that in the port left tiles whose
   image did not fill its box showing square corners while their neighbours were rounded.
   Setting it on every element in the chain means it cannot drift, whichever one ends up
   painting the visible edge.

   NEVER `border-radius: inherit` HERE. `inherit` reads the DIRECT parent, so it breaks the
   moment anything is inserted into the chain — which is exactly what happened when <picture>
   was added for the square mobile crop: the <img>'s parent became <picture>, which has no
   radius, so `inherit` resolved to 0 and every image lost its corners. It only LOOKED
   intermittent because the figure's overflow:hidden still clips an image that fills its box
   exactly; in justified and columns mode the image is `contain`-fitted, does not fill the box,
   and its own square corners show through. Hence "inconsistent corners" varying per image.

   The custom property is the fix: CSS variables inherit through ANY depth of wrappers, so
   adding another element to the chain can never silently flatten the radius again. */
.tcdam-cell {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: var(--tcdam-radius, 5px);
}
.tcdam-cell > a {
    display: block; width: 100%; height: 100%;
    border-radius: var(--tcdam-radius, 5px); overflow: hidden;
}
/* <picture> is inline by default, which would leave a text-baseline gap under the image. */
.tcdam-cell picture {
    display: block; width: 100%; height: 100%;
    border-radius: var(--tcdam-radius, 5px); overflow: hidden;
}
.tcdam-cell img,
.tcdam-img {
    display: block; width: 100%; height: 100%;
    object-fit: cover;
    border-radius: var(--tcdam-radius, 5px);
}

/* JUSTIFIED USES COVER, NOT CONTAIN — and that is not a change of policy.

   Justified sets each cell's aspect-ratio FROM THE IMAGE'S OWN TRUE RATIO, so cover crops
   nothing measurable; the two differ only by the sub-pixel rounding in the percentage widths.
   `contain` honoured that rounding by letterboxing instead, which left a hairline of figure
   background down one edge — and with a radius on the box, a hairline at the corner is exactly
   what reads as "this tile isn't rounded like the others". Cover guarantees the image fills its
   box edge to edge, so the rounded corner the figure clips is the one you see.

   Columns keeps contain: its images are height:auto and define their own box, so there is
   nothing to letterbox against. */
.tcdam-mode-justified .tcdam-cell img { object-fit: cover; }
.tcdam-mode-columns   .tcdam-cell img { object-fit: contain; }

.tcdam-cell a:focus-visible { outline: 3px solid #feb100; outline-offset: 2px; }

/* Panels are server-rendered and hidden; each driver lifts the markup it needs. */
.tcdam-panels { display: none; }

/* --------------------------------------------------------------- panel legibility --
   THE PANEL MUST SUPPLY ITS OWN BACKGROUND AND TEXT COLOUR, IN EVERY DRIVER.

   The ported markup carries Trusscore's `bg-tc-white` / `text-tc-*` theme classes so the look
   matches exactly on trusscore.com — but those classes exist only in that site's stylesheet, and
   each lightbox library ships colours of its own. Legibility cannot depend on either.

   TWO SEPARATE FAILURES HAVE COME FROM THIS, both "white text on a white card":

     1. The Bootstrap modal relied on `bg-tc-white` for the text column and rendered transparent
        wherever that class did not exist.
     2. PhotoSwipe's caption plugin sets `.pswp__dynamic-caption { color: #fff }` and
        `.pswp__dynamic-caption a { color: #fff }`. Our override was written against
        `.pswp__dynamic-caption .tcdam-panel` — but the plugin is handed a STRING, and tcdam.js
        was passing `panel.innerHTML`, so the .tcdam-panel wrapper never reached the DOM and the
        rule never matched. The products card kept its own white background and the product
        names inherited the plugin's white.

   So the containers are styled DIRECTLY, not only through the wrapper. GLightbox copies the
   innerHTML of the element its `description:` selector names, which we cannot control either —
   a rule that depends on the wrapper surviving is a rule that will break again.

   The `.pswp` prefix is not decoration: it raises specificity to (0,2,1) so it beats the
   plugin's own (0,1,1) rules no matter which stylesheet the browser loaded last. */
#tcdamModalPanel,
.gslide-desc,
.gslide-description .tcdam-panel,
.pswp .pswp__dynamic-caption,
.pswp .pswp__dynamic-caption .tcdam-panel {
    background: #fff;
    color: #23282d;
}
#tcdamModalPanel { padding: 1rem 1.25rem 1.5rem; }
.gslide-description .tcdam-panel,
.pswp .pswp__dynamic-caption .tcdam-panel { padding: 1rem 1.25rem; max-width: 22rem; }
/* Rounded so the white aside reads as a panel rather than a torn-off rectangle. */
.pswp .pswp__dynamic-caption { border-radius: 5px; }

.tcdam-panel .tcdam-panel-title,
#tcdamModalPanel .tcdam-panel-title { margin-top: 0; }

/* The modal itself is transparent so the image can bleed to its own edge; without an
   explicit background on the text column that transparency is what exposes the page behind. */
#tcdamModal .modal-content { background: transparent; }

/* Links, in every driver. Omitting PhotoSwipe here is the other half of why its panel was
   unreadable: the plugin colours its links #fff explicitly. */
#tcdamModalPanel a,
.gslide-description .tcdam-panel a,
.pswp .pswp__dynamic-caption a {
    color: #0b6aa2;
}
#tcdamModalPanel .table td,
.gslide-description .tcdam-panel .table td,
.pswp .pswp__dynamic-caption .table td {
    border: 0; padding: .25rem 0; vertical-align: middle;
}

.tcdam-viewmore { width: 100%; }