@import url("../objects/o-section.selectors.css");
@import url("../tools/selectors.css");
@import url("../tools/x-link.css");
@import url("../tools/x-action.css");
@import url("./c-button.selectors.css");
@import url("./c-card.selectors.css");






/* Skin */
/* NOTE: Design text color discrepency… text color should match that of body */



/* Modifiers */

/* Modifiers: Plain  */

:--c-card--plain-hr-top {
    border-top: 1px solid var(--global-color-primary--dark); /* mimic <hr> */
    margin-top: var(--global-space--hr-buffer-below); /* mimic <hr> */
}
:--c-card--plain-hr-bottom {
    border-bottom: 1px solid var(--global-color-primary--dark); /* mimic <hr> */
    margin-bottom: var(--global-space--hr-buffer-below); /* mimic <hr> */
}

/* Modifiers: Standard  */

:--c-card--standard-N,
:--c-card--standard {
    border-top-style: solid;
    border-top-width: var(--global-border-width--xx-thick);
}

/* Modifiers: Plain & Standard & within Section */

/* Default (On Light) */
:--c-card--standard-1,
:--c-card--standard,
:--c-card--plain {
    background-color: var(--global-color-primary--x-light);
    border-top-color: var(--global-color-accent--tertiary);
}
:--c-card--standard-N,
:--c-card--standard,
:--c-card--plain {
    box-shadow: 0px 3px 6px #0003;
}

/* On Muted & Within Card */
:--c-card--standard-2,
:--o-section--muted :--c-card--standard,
:--o-section--muted :--c-card--plain,
.col-muted :--c-card--standard,
.col-muted :--c-card--plain,
:--c-card :--c-card--standard,
:--c-card :--c-card--plain {
    background-color: var(--global-color-primary--xx-light);
}
:--c-card--standard-2,
:--o-section--muted :--c-card--standard,
.col-muted :--c-card--standard,
:--c-card :--c-card--standard {
    border-top-color: var(--global-color-accent--tertiary);
}

/* On Muted + Within Card & On Dark + Within Card */
:--o-section--muted :--c-card :--c-card--plain,
:--o-section--muted :--c-card :--c-card--standard,
.col-muted :--c-card :--c-card--plain,
.col-muted :--c-card :--c-card--standard,
:--o-section--dark :--c-card :--c-card--plain,
:--o-section--dark :--c-card :--c-card--standard,
.col-dark :--c-card :--c-card--plain,
.col-dark :--c-card :--c-card--standard {
    background-color: var(--global-color-primary--x-light);
}

/* On Dark */
:--c-card--standard-3,
:--o-section--dark :--c-card--standard,
:--o-section--dark :--c-card--plain,
.col-dark :--c-card--standard,
.col-dark :--c-card--plain {
    background-color: var(--global-color-primary--xx-light);
    border-top-color: var(--global-color-accent--secondary);
}
/* To color text with greater specificity than .o-section does */
:--o-section--dark :--c-card--plain > *:not(a, button),
:--o-section--dark :--c-card--standard > *:not(a, button),
:--o-section--dark :--c-card--standard-N > *:not(a, button),
.col-dark :--c-card--plain > *:not(a, button),
.col-dark :--c-card--standard > *:not(a, button),
.col-dark :--c-card--standard-N > *:not(a, button) {
    color: var(--global-color-primary--xx-dark);
}





/* Structure */

/* Elements */

/* I.e. one of multiple icon links within a p tag */
:--c-card > p > a:not(:--c-button):has(.icon):not(:last-child) {
    margin-right: 1rem;
}
:--c-card > :--action:not(:--c-card__image) {
    vertical-align: middle;

    margin-bottom: 2rem; /* mimic <p> `margin-bottom` */
    margin-right: var(--global-space--pattern-pad);
}
/* To style actions that have an icon */
:--c-card > a:not(:--c-button):has(.icon),
:--c-card > p > a:not(:--c-button):has(.icon) {
    @mixin action--with-icon;
}
:--c-card > a:not(:--c-button) > .icon,
:--c-card > p > a:not(:--c-button) > .icon {
    @mixin action__icon;
}
/* So text of card links does not all look like a link */
a:--c-card {
    color: inherit;
    text-decoration: none;
}
a:--c-card:hover {
    --border-width: var(--global-border-width--thick);

    outline-offset: calc(-1* var(--border-width));
    outline: var(--border-width) solid var(--global-color-accent--normal);
}

/* Block */
:--c-card {
    padding-inline: var(--global-space--pattern-pad);
    padding-top: var(--global-space--pattern-pad);
    /* FAQ: Let child elements' margin-bottom be the padding bottom */
    padding-bottom: 0.1px; /* to remove padding, but retain child margin */

    margin-bottom: var(--global-space--bootstrap-gap);
}



/* XXX: Commented out cuz it seems like an exception or the wrong solution */
/*
/* To tweak full-width children *//*
/* - To add space  *//*
.col:nth-child(4):last-child :--c-card--standard,
.col:nth-child(4):last-child :--c-card--standard-N {
    margin-top: var(--global-space--unnamed);
}
/* - To remove border *//*
.col:nth-child(4):last-child > :--c-card--standard,
.col:nth-child(4):last-child > :--c-card--standard-N {
    border-top: none;
}
*/



/* To add space between rows of boxes */
/* XXX: Commented out until we know whether we want context-based spacing */
/*
:--c-card--standard:not( .col:only-child > * )
:--c-card--standard-N:not( .col:only-child > * ) {
    margin-bottom: var(--global-space--bootstrap-gap);
}
/* To eat the margin-bottom of bottom row of blocks so padding is consistent *\/
:--c-card--standard:has( .row:last-child:not(:first-child) ),
:--c-card--standard-N:has( .row:last-child:not(:first-child) ) {
    padding-bottom: calc(
       var(--global-space--pattern-pad) - var(--global-space--bootstrap-gap)
    );
}
*/





/* Elements */

/* To remove undesired space */
:--c-card :is(h1, h2, h3, h4, h5, h6) {
    margin-top: unset;
}

/* To reduce font size of mailto link */
:--c-card a[data-user][data-domain]::before {
    font-size: var(--global-font-size--medium);
}

/* To space out address lines, but retain <p> margin */
/* NOTE: Likely in tacc.utexas.edu/about/contact/ but replaced with a <p> */
:--c-card > address {
    line-height: 1.7;
    margin-bottom: 2rem; /* to mimic <p> */
}

/* Elements: Lists */

:--c-card ul {
    /* list-style: none; *//* H.P. restored bullets, M.S. does not know */
    padding-left: 1em; /* overwrite core-styles.cms */
}
/* To add space between line items */
/* FAQ: Using margin and li:not(:first-of-type) because of multi-line items */
:--c-card li:not(:first-of-type) {
    margin-top: 0.5em;
}
:--c-card ul:last-child {
    margin-bottom: 2rem;
}




/* Image */

:--c-card--image {
    display: grid;
}

:--c-card--image-top {
    padding-top: 0;
}
:--c-card--image-left {
    padding-left: 0;
    padding-bottom: var(--global-space--pattern-pad);
}
:--c-card--image-right {
    padding-right: 0;
    padding-bottom: var(--global-space--pattern-pad);
}
:--c-card--image-bottom {
    padding-bottom: 0;
}



/* Image: Left & Right */

:--c-card--image-left,
:--c-card--image-right {
    --image-width: 50%;

    grid-column-gap: var(--global-space--pattern-pad);

    /* Repeat many times, because element count is unknown */
    grid-template-rows: repeat(10, min-content);
}
:--c-card--image-left > :--c-card__image,
:--c-card--image-right > :--c-card__image {
    grid-row-start: 1;
    grid-row-end: -1;

    /* To remove card padding */
    margin-block: calc( -1 * var(--global-space--pattern-pad) );
}

:--c-card--image-left {
    grid-template-columns: var(--image-width) 1fr; /* to overwrite `.c-card` */
}
:--c-card--image-left > :--c-card__image {
    grid-column-start: 1;
    grid-column-end: span 1;
}

:--c-card--image-right {
    grid-template-columns: 1fr var(--image-width); /* to overwrite `.c-card` */
}
:--c-card--image-right > :--c-card__image {
    grid-column-start: 2;
    grid-column-end: span 1;
}



/* Image: Top & Bottom */

:--c-card--image-top,
:--c-card--image-bottom {
    --global-space--pattern-pad: 15px;

    /* Repeat many times, because element count is unknown */
    grid-template-rows: repeat(10, min-content);

    /* Use extra columns to add horizontal padding */
    grid-template-columns: var(--global-space--pattern-pad) 1fr var(--global-space--pattern-pad);
    padding-inline: unset;
}
:--c-card--image-top > :not(:--c-card__image),
:--c-card--image-bottom > :not(:--c-card__image) {
    /* Span only columns for content */
    grid-column-start: 2;
    grid-column-end: -2;
}
:--c-card--image-top > :--c-card__image,
:--c-card--image-bottom > :--c-card__image {
    /* Span all columns, padding and content */
    grid-column-start: 1;
    grid-column-end: -1;
}

:--c-card--image-top > :--c-card__image {
    grid-row-start: 1;
    margin-bottom: var(--global-space--pattern-pad);
}
:--c-card--image-top > :is(h1, h2, h3, h4, h5):first-of-type {
    /* NOTE: Redundant, but maybe good to have if
             :--c-card :is(h1, h2, h3, h4, h5, h6)
             ever does not do the same */
    margin-top: unset; /* to avoid combining margin with image */
}

:--c-card--image-bottom > :--c-card__image {
    grid-row-end: -1;
    margin-top: var(--global-space--pattern-pad);
}
:--c-card--image-bottom > p:last-of-type {
    margin-bottom: unset; /* to avoid combining margin with image */
}

/* Image: Link */
/* FAQ: Disabled image link UX in TACC/Core-Styles#422 */
/*
:--c-card__image-link {
    @mixin block-link;
}
:--c-card__image-link:not([href]) {
    @mixin block-link--disabled;
}
:--c-card__image-link:hover {
    @mixin block-link--hover;
}
:--c-card__image-link:active {
    @mixin block-link--active;
}
*/

/* Image: Contact Card */

:--c-card--image-top h4 {
    margin-bottom: 0.375em;
}
:--c-card--image-top h4 ~ p {
    margin-top: 0px;
    margin-bottom: 10px;
}

/* To not let card be wider than image */
/* NOTE: For now, only applied where problem appears */
/* HELP: Should this apply to all cards? How to demo it? */
:--c-card--image-top:has(h4) {
    max-width: fit-content;
}