/* This is the Umbraco Page Builder Kit's layout CSS for the "Block Grid" used both in Umbraco's backoffice and in the frontview.
 *
 * Versions:
 * 0.1: 05/05/2024
 * 0.2: 10/20/2025 (There has been many changes since 0.1, but we haven't updated this version list)
 */

/* In CSS variables using the --pbk prefix "pbk" stands for "{P}age {B}uilder {K}it". */

/* #region ==== TODO Region ==== */

/* TODO: Consider moving this file to the src/scss folders, change into scss file, and update the build process (gulp)
 * to build the scss file. This will give us a more efficient minimized version of the stylesheet. */

/* #endregion ==== TODO Region ==== */


/* #region ==== CSS Variables ==== */
/*
  Umbraco variables used in order to stay compatible with the backoffice:
  -----------------------------------------------------------------------
  --umb-block-grid--column-gap
  --umb-block-grid--row-gap
  --umb-block-grid--areas-column-gap
  --umb-block-grid--areas-row-gap
  --umb-block-grid--item-column-span
  --umb-block-grid--grid-columns

  Is inherited:
  -----------------
  --pbk-paragraph-spacing
  --pbk-font-color

  Should NOT be inherited:
  ------------------------
  --pbk-flex-direction // Set in stylesheet only
  --pbk-flex-wrap

  --pbk-justify-content
  --pbk-align-items
  --pbk-align-content

  Is set in code only:
  --------------------
  --pbk-gap-per-childblock // At area-level, should not be inherited
  --pbk-specific-width // Only used in the backoffice; set in code to override the --pbk-width-percent var
  --pbk-specific-flex // Only used in the backoffice for row layouts; set in code

  Is set and used in this stylesheet only:
  ----------------------------------------
  --pbk-col-width-pct // A temporary var
  --pbk-width-percent // A temporary var
  --pbk-gap-per-block // Is set at the block-container level as "--pbk-gap-per-block: var(--pbk-gap-per-childblock, 0)

  For improved backoffice editing:
  --------------------------------
  --pbk-bo-select-margin // A margin around blocks to make it easier to select them and find their col-span drag handles
  --pbk-bo-block-min-height // Make the block visible until you have added content to it
  --pbk-bo-area-min-height // Make the area visible until you have added child blocks to it

  Not used anymore:
  -----------------
  --pbk-height
*/
/* #endregion ==== CSS Variables ==== */


/* #region ==== Frontview html pseudo-structure ==== */
/*
  <div class="blocks-container" data-view="items.cshml" style="display:flex">
    <div class="block" data-block-ndx="0" data-block-type="your-block-type" data-view="items.cshtml" style="display:block">
      <div data-type="your-partial-view">
        <div class="areas-container" data-view="areas.cshtml" style="display:flex">
          <div data-type="area" name="{area-alias}" data-view="area.cshtml" style="display:flex">
            <div class="blocks-container" data-view="items.cshml" style="display:flex">
              <div class="block" data-block-ndx="0" data-block-type="your-block-type" data-view="items.cshtml" style="display:block">...</div>
              <div class="block" data-block-ndx="1" data-block-type="your-block-type" data-view="items.cshtml" style="display:block">...</div>
            </div>
          </div>
          <div data-type="area" name="{area-alias}" data-view="area.cshtml" style="display:flex">...</div>
          <div data-type="area" name="{area-alias}" data-view="area.cshtml" style="display:flex">...</div>
        </div>
      </div>
    </div>
    <div class="block" data-block-ndx="1" data-block-type="your-block-type" data-view="items.cshtml" style="display:block">...</div>
    <div class="block" data-block-ndx="2" data-block-type="your-block-type" data-view="items.cshtml" style="display:block">...</div>
  </div>

   TODO: Update this once we're closer to feature-complete!!!
*/
/* #endregion ==== Frontview html pseudo-structure ==== */


/* #region ==== Overall Grid Defaults ==== */

/* The styles in this region were copied from our original block-grid-layout-default-runtime.css file.
 * We should review this again ASAP. Which parts are general to all of block-grid, specific to layout,
 * applies to PB Kit, specific to the site, etc. 5/13/2024. */

/* Disabled by Tor:
:root, :host, body {
    font-family: 'Lato';
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}
*/

:root, :host {
  /* As of 6/20/2024 these two variables are not used, but we'll keep them for possible future use: */
  --ON: initial;
  --OFF: /* intentionally left blank! */;
}

/* Defaults for all grid layout content: */
.umb-block-grid {
  /* 16px is identical to Unishop's default. */
  --pbk-paragraph-spacing: 16px;
  --umb-block-grid--column-gap: 8px;
  --umb-block-grid--row-gap: 8px;
  --umb-block-grid--areas-column-gap: 8px;
  --umb-block-grid--areas-row-gap: 8px;
  --pbk-gap-per-childblock: var(--umb-block-grid--column-gap);
  /* Turning on wrap ensures that we see all blocks in the backoffice when in "Sort mode": */
  --pbk-flex-wrap: wrap;
  /* #212529 is variable $gray-900 in bootstrap/_variables.scss. By setting the value here
   * we override Unishop's default #606975 ($gray-dark) value defined in helpers/_variables.scss. */
  --pbk-font-color: #212529;
  /* This is saying that when using a @container query, then use the element's inline size for
   * specifying the min-width, etc. */
  container-type: inline-size;
}

.umb-block-grid.layout-block {
  /* This is the root element for the block-grid, and due to reuse of code it ends up with a display: flex,
   * but that's not necessary (and sometimes causes incorrect display of child layout-blocks). Hence: */
  display: block;
}
.umb-block-grid.layout-block > .blocks-container {
  /* This is the child of the root element for the block-grid, and due to reuse of code it ends up
   * with a display: flex, but that's not necessary (and sometimes causes incorrect display of child
   * layout-blocks. Also see rule right above for the parent element). Hence: */
  display: block;
}

/* This is a style with only inheritable properties which we want to have applied at the root of the
 * block-grid DOM, but only in the backoffice. If we did ":host" only, they would be re-applied for
 * every block (because each block is in its own shadow DOM). If we did ".umb-block-grid" only, then
 * they also would be applied in the frontview. We use ".umb-block-grid" because that is the
 * outermost element we know of which is inside the block-grid element tree (and inside the element
 * which loads our stylesheet).
 *
 * If we didn't do this at all, then we would inherit Umbraco's properties instead of our own. The
 * reason is our properties are applied at the html and body elements, but in the backoffice these
 * two elements are defined at an outer element before our stylesheet is loaded. Our stylesheet is
 * loaded at the outermost shadow DOM inside the block-grid.
 */
:host .umb-block-grid {
  /* These properties are copies of the properties defined by Bootstrap in the body style in the _reboot.scss file: */
  text-align: left;
  /* These are commented because they are overridden by the Unishop overrides further below:
  font-family: "Roboto";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  */
}

:host .umb-block-grid {
  /* These properties are copies of the properties defined by Unishop in the html * style in the _scaffolding.scss file: */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* These properties are copies of the properties defined by Unishop in the body * style in the _scaffolding.scss file: */
  background-position: center;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  /* color isn't needed here because we are overriding in another style below (for both front- and back-office)
  color: #606975;*/
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  text-transform: none;
  line-height: 1.5;
}

/* Specifies a default text color, overriding defaults in Unishop and Bootstrap.
 * We have added extra class and element specifiers here to ensure this style will override the
 * default declared in Unishop and/or Bootstrap. Which one ends up being used is determined by
 * CSS specificity rules (the more ID's, classes, and elements, the higher specificity). */
body .umb-block-grid, /* Text inside the new block grid in the frontview */
body.umb-rte, /* Text inside Umbraco's rich-text-editor (the .umb-block-grid class isn't defined there) */
:host .umb-block-grid /* The block grid preview in the backoffice (body isn't defined the shadow dom) */ {
  color: var(--pbk-font-color);
}

.blockelement-gridsortblock-editor {
  /* The --pbk-specific-width variable is set on .block elements. When .row-block layouts are
   * rendered with auto block-sizing (each child block occupying just enough width to contain the
   * child contents), the --pbk-specific-width variable is set to "auto". But, the .block elements
   * are not rendered when in sort-mode in the backoffice with the effect that all blocks on the row
   * are rendered on their own rows with full width. To avoid this we specifically set the
   * --pbk-specific-width variable to auto in this rule. */
  --pbk-specific-width: auto;
}

/* #endregion ==== Overall Grid Defaults ==== */


/* #region ==== Blocks (All) ==== */

/* #region ==== Responsive Columns ==== */

/* #region Row Columns rules */

.row-cl-auto > .blocks-container > * { flex: 0 1 auto; }
.row-cl-fill > .blocks-container > * { flex: 1 1 0; }

/* Note, with the row-cl-*, the number represents the number of columns in the row. This is different
 * than the cl-* rule where the number represents the numerator in a numerator/12 division. */
.row-cl-1 > .blocks-container > * { flex: 0 1 calc(100% - var(--pbk-gap-per-block)); }
.row-cl-2 > .blocks-container > * { flex: 0 1 calc(50% - var(--pbk-gap-per-block)); }
.row-cl-3 > .blocks-container > * { flex: 0 1 calc(33.332% - var(--pbk-gap-per-block)); }
.row-cl-4 > .blocks-container > * { flex: 0 1 calc(25% - var(--pbk-gap-per-block)); }
.row-cl-5 > .blocks-container > * { flex: 0 1 calc(20% - var(--pbk-gap-per-block)); }
.row-cl-6 > .blocks-container > * { flex: 0 1 calc(16.666% - var(--pbk-gap-per-block)); }
.row-cl-7 > .blocks-container > * { flex: 0 1 calc(14.285% - var(--pbk-gap-per-block)); }
.row-cl-8 > .blocks-container > * { flex: 0 1 calc(12.5% - var(--pbk-gap-per-block)); }
.row-cl-9 > .blocks-container > * { flex: 0 1 calc(11.109% - var(--pbk-gap-per-block)); }
.row-cl-10 > .blocks-container > * { flex: 0 1 calc(10% - var(--pbk-gap-per-block)); }
.row-cl-11 > .blocks-container > * { flex: 0 1 calc(9.090% - var(--pbk-gap-per-block)); }
.row-cl-12 > .blocks-container > * { flex: 0 1 calc(8.332% - var(--pbk-gap-per-block)); }

/* #endregion Row Columns rules */

/* #region Columns rules */

.blocks-container > .cl-1 { flex: 0 1 calc(8.332% - var(--pbk-gap-per-block)); }
.blocks-container > .cl-2 { flex: 0 1 calc(16.666% - var(--pbk-gap-per-block)); }
.blocks-container > .cl-3 { flex: 0 1 calc(25% - var(--pbk-gap-per-block)); }
.blocks-container > .cl-4 { flex: 0 1 calc(33.332% - var(--pbk-gap-per-block)); }
.blocks-container > .cl-5 { flex: 0 1 calc(41.666% - var(--pbk-gap-per-block)); }
.blocks-container > .cl-6 { flex: 0 1 calc(50% - var(--pbk-gap-per-block)); }
.blocks-container > .cl-7 { flex: 0 1 calc(58.332% - var(--pbk-gap-per-block)); }
.blocks-container > .cl-8 { flex: 0 1 calc(66.666% - var(--pbk-gap-per-block)); }
.blocks-container > .cl-9 { flex: 0 1 calc(75% - var(--pbk-gap-per-block)); }
.blocks-container > .cl-10 { flex: 0 1 calc(83.332% - var(--pbk-gap-per-block)); }
.blocks-container > .cl-11 { flex: 0 1 calc(91.666% - var(--pbk-gap-per-block)); }
.blocks-container > .cl-12 { flex: 0 1 calc(100% - var(--pbk-gap-per-block)); }

/* #endregion Columns rules */

/* XL: X-Large devices, less than 1400px */
@media (max-width: 1399.98px) {
  /* Note, with the row-cl-sm-*, the number represents the number of columns in the row. This is different
   * than the cl-sm-* rule where the number represents the numerator in a numerator/12 division. */
  .row-xl-md-1 > .blocks-container > * { flex: 1 1 calc(100% - var(--pbk-gap-per-block)); }
  .row-xl-md-2 > .blocks-container > * { flex: 1 1 calc(50% - var(--pbk-gap-per-block)); }
  .row-xl-md-3 > .blocks-container > * { flex: 1 1 calc(33.332% - var(--pbk-gap-per-block)); }
  .row-xl-md-4 > .blocks-container > * { flex: 1 1 calc(25% - var(--pbk-gap-per-block)); }
  .row-xl-md-5 > .blocks-container > * { flex: 1 1 calc(20% - var(--pbk-gap-per-block)); }
  .row-xl-md-6 > .blocks-container > * { flex: 1 1 calc(16.666% - var(--pbk-gap-per-block)); }
  .row-xl-md-7 > .blocks-container > * { flex: 1 1 calc(14.285% - var(--pbk-gap-per-block)); }
  .row-xl-md-8 > .blocks-container > * { flex: 1 1 calc(12.5% - var(--pbk-gap-per-block)); }
  .row-xl-md-9 > .blocks-container > * { flex: 1 1 calc(11.109% - var(--pbk-gap-per-block)); }
  .row-xl-md-10 > .blocks-container > * { flex: 1 1 calc(10% - var(--pbk-gap-per-block)); }
  .row-xl-md-11 > .blocks-container > * { flex: 1 1 calc(9.090% - var(--pbk-gap-per-block)); }
  .row-xl-md-12 > .blocks-container > * { flex: 1 1 calc(8.332% - var(--pbk-gap-per-block)); }
}

/* LG: Large devices, less than 1200px */
@media (max-width: 1199.98px) {
  /* Note, with the row-cl-sm-*, the number represents the number of columns in the row. This is different
   * than the cl-sm-* rule where the number represents the numerator in a numerator/12 division. */
  .row-cl-lg-1 > .blocks-container > * { flex: 1 1 calc(100% - var(--pbk-gap-per-block)); }
  .row-cl-lg-2 > .blocks-container > * { flex: 1 1 calc(50% - var(--pbk-gap-per-block)); }
  .row-cl-lg-3 > .blocks-container > * { flex: 1 1 calc(33.332% - var(--pbk-gap-per-block)); }
  .row-cl-lg-4 > .blocks-container > * { flex: 1 1 calc(25% - var(--pbk-gap-per-block)); }
  .row-cl-lg-5 > .blocks-container > * { flex: 1 1 calc(20% - var(--pbk-gap-per-block)); }
  .row-cl-lg-6 > .blocks-container > * { flex: 1 1 calc(16.666% - var(--pbk-gap-per-block)); }
  .row-cl-lg-7 > .blocks-container > * { flex: 1 1 calc(14.285% - var(--pbk-gap-per-block)); }
  .row-cl-lg-8 > .blocks-container > * { flex: 1 1 calc(12.5% - var(--pbk-gap-per-block)); }
  .row-cl-lg-9 > .blocks-container > * { flex: 1 1 calc(11.109% - var(--pbk-gap-per-block)); }
  .row-cl-lg-10 > .blocks-container > * { flex: 1 1 calc(10% - var(--pbk-gap-per-block)); }
  .row-cl-lg-11 > .blocks-container > * { flex: 1 1 calc(9.090% - var(--pbk-gap-per-block)); }
  .row-cl-lg-12 > .blocks-container > * { flex: 1 1 calc(8.332% - var(--pbk-gap-per-block)); }
}

/* MD: Medium devices, less than 992px */
@media (max-width: 991.98px) {
  /* Note, with the row-cl-sm-*, the number represents the number of columns in the row. This is different
   * than the cl-sm-* rule where the number represents the numerator in a numerator/12 division. */
  .row-cl-md-1 > .blocks-container > * { flex: 1 1 calc(100% - var(--pbk-gap-per-block)); }
  .row-cl-md-2 > .blocks-container > * { flex: 1 1 calc(50% - var(--pbk-gap-per-block)); }
  .row-cl-md-3 > .blocks-container > * { flex: 1 1 calc(33.332% - var(--pbk-gap-per-block)); }
  .row-cl-md-4 > .blocks-container > * { flex: 1 1 calc(25% - var(--pbk-gap-per-block)); }
  .row-cl-md-5 > .blocks-container > * { flex: 1 1 calc(20% - var(--pbk-gap-per-block)); }
  .row-cl-md-6 > .blocks-container > * { flex: 1 1 calc(16.666% - var(--pbk-gap-per-block)); }
  .row-cl-md-7 > .blocks-container > * { flex: 1 1 calc(14.285% - var(--pbk-gap-per-block)); }
  .row-cl-md-8 > .blocks-container > * { flex: 1 1 calc(12.5% - var(--pbk-gap-per-block)); }
  .row-cl-md-9 > .blocks-container > * { flex: 1 1 calc(11.109% - var(--pbk-gap-per-block)); }
  .row-cl-md-10 > .blocks-container > * { flex: 1 1 calc(10% - var(--pbk-gap-per-block)); }
  .row-cl-md-11 > .blocks-container > * { flex: 1 1 calc(9.090% - var(--pbk-gap-per-block)); }
  .row-cl-md-12 > .blocks-container > * { flex: 1 1 calc(8.332% - var(--pbk-gap-per-block)); }
}

/* SM: Small devices, less than 768px */
@media (max-width: 767.98px) {
  /* Note, with the row-cl-sm-*, the number represents the number of columns in the row. This is different
   * than the cl-sm-* rule where the number represents the numerator in a numerator/12 division. */
  .row-cl-sm-1 > .blocks-container > * { flex: 1 1 calc(100% - var(--pbk-gap-per-block)); }
  .row-cl-sm-2 > .blocks-container > * { flex: 1 1 calc(50% - var(--pbk-gap-per-block)); }
  .row-cl-sm-3 > .blocks-container > * { flex: 1 1 calc(33.332% - var(--pbk-gap-per-block)); }
  .row-cl-sm-4 > .blocks-container > * { flex: 1 1 calc(25% - var(--pbk-gap-per-block)); }
  .row-cl-sm-5 > .blocks-container > * { flex: 1 1 calc(20% - var(--pbk-gap-per-block)); }
  .row-cl-sm-6 > .blocks-container > * { flex: 1 1 calc(16.666% - var(--pbk-gap-per-block)); }
  .row-cl-sm-7 > .blocks-container > * { flex: 1 1 calc(14.285% - var(--pbk-gap-per-block)); }
  .row-cl-sm-8 > .blocks-container > * { flex: 1 1 calc(12.5% - var(--pbk-gap-per-block)); }
  .row-cl-sm-9 > .blocks-container > * { flex: 1 1 calc(11.109% - var(--pbk-gap-per-block)); }
  .row-cl-sm-10 > .blocks-container > * { flex: 1 1 calc(10% - var(--pbk-gap-per-block)); }
  .row-cl-sm-11 > .blocks-container > * { flex: 1 1 calc(9.090% - var(--pbk-gap-per-block)); }
  .row-cl-sm-12 > .blocks-container > * { flex: 1 1 calc(8.332% - var(--pbk-gap-per-block)); }
}

/* xs: X-Small devices, less than 576px */
@media (max-width: 575.98px) {
  /* Note, with the row-cl-sm-*, the number represents the number of columns in the row. This is different
   * than the cl-sm-* rule where the number represents the numerator in a numerator/12 division. */
  .row-cl-xs-1 > .blocks-container > * { flex: 1 1 calc(100% - var(--pbk-gap-per-block)); }
  .row-cl-xs-2 > .blocks-container > * { flex: 1 1 calc(50% - var(--pbk-gap-per-block)); }
  .row-cl-xs-3 > .blocks-container > * { flex: 1 1 calc(33.332% - var(--pbk-gap-per-block)); }
  .row-cl-xs-4 > .blocks-container > * { flex: 1 1 calc(25% - var(--pbk-gap-per-block)); }
  .row-cl-xs-5 > .blocks-container > * { flex: 1 1 calc(20% - var(--pbk-gap-per-block)); }
  .row-cl-xs-6 > .blocks-container > * { flex: 1 1 calc(16.666% - var(--pbk-gap-per-block)); }
  .row-cl-xs-7 > .blocks-container > * { flex: 1 1 calc(14.285% - var(--pbk-gap-per-block)); }
  .row-cl-xs-8 > .blocks-container > * { flex: 1 1 calc(12.5% - var(--pbk-gap-per-block)); }
  .row-cl-xs-9 > .blocks-container > * { flex: 1 1 calc(11.109% - var(--pbk-gap-per-block)); }
  .row-cl-xs-10 > .blocks-container > * { flex: 1 1 calc(10% - var(--pbk-gap-per-block)); }
  .row-cl-xs-11 > .blocks-container > * { flex: 1 1 calc(9.090% - var(--pbk-gap-per-block)); }
  .row-cl-xs-12 > .blocks-container > * { flex: 1 1 calc(8.332% - var(--pbk-gap-per-block)); }
}

/* #endregion ==== Responsive Columns ==== */

/* This block will be removed from the layout and placed in the background (overlaid by the other blocks). */
.blocks-container > .background-block {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* These blocks are guaranteed to be on top of any background-block. */
.blocks-container > :not(.background-block) {
  z-index: 1;
}

/* #endregion ==== Blocks (All) ==== */


/* #region ==== Layout Blocks ==== */

/* The styles declared here will be used both in the Umbraco backoffice view and in the website's frontview. */

/* Defaults for column layouts (css variables used further below will override). The purpose is to
 * reduce the number of properties assigned from code in local styles html attributes: */
.column-block > .blocks-container {
  flex-wrap: nowrap;
}
/* For overriding the default above. We assign the flex-wrap class in code when needed: */
.flex-wrap > .blocks-container {
  flex-wrap: wrap;
}

/* Defaults for row layouts (css variables used further below will override). The purpose is to
 * reduce the number of properties assigned from code in local styles html attributes: */
.row-block > .blocks-container {
  flex-wrap: wrap;
}
/* For overriding the default above. We assign the flex-nowrap class in code when needed: */
.flex-nowrap > .blocks-container {
  flex-wrap: nowrap;
}

/* The parent of the list of blocks. In the frontview the element is rendered in the items.cshtml with a .blocks-container class. */
.blocks-container,
.umb-block-grid__layout-container {
  /* On the .block elements we are using the --pbk-gap-per-block value to calculate the flex-basis.
   * On the .block elements which are also .row-block we are at the same time also setting the
   * --pbk-gap-per-block, but the value we are setting should only be used by the child blocks, not
   * by the .row-block itself. To avoid this (the flex-basis calculation using the --pbk-gap-per-block
   * value intended for the children) we need to use an intermediate variable, the --pbk-gap-per-childblock.
   * We set this one in code, and then in this rule (the immediate parent of the .block elements) we set the
   * --pbk-gap-per-block: */
  --pbk-gap-per-block: var(--pbk-gap-per-childblock, 0);
  position: relative;
  display: flex;
  flex-direction: var(--pbk-flex-direction);
  column-gap: var(--umb-block-grid--column-gap, 0);
  row-gap: var(--umb-block-grid--row-gap, 0);
  justify-content: var(--pbk-justify-content);
  align-content: var(--pbk-align-content);
  align-items: var(--pbk-align-items);
  /* width: 100% was added on 8/13/2024 because otherwise an owl-carouse slide placed into a column
   * incorrectly caused the width of all elements up to the root to be the sum of all slider items
   * width. With width: 100% in place this problem was solved. I checked all other pbkit-based pages
   * and did not see any page with a negative side effect of this change. */
  width: 100%;
}
.umb-block-grid__layout-container {
  /* This margin makes it easier in the backoffice to select and drag the col-span handle when the
   * bottom-right corner of a layout block overlaps with the bottom-right corner of an inner block */
  margin: var(--pbk-bo-select-margin, 0px); /*5px;*/
  /* Only for the backoffice (in the frontview we don't need to use a css variable for it): */
  flex-wrap: var(--pbk-flex-wrap);
}

/* "block" is the style for children of the blocks-container. Your partial view is rendered inside this element.
 *
 * In Umbraco 12-14 the information available for styling the block in the backoffice is pretty limited.
 * The only data we have (via CSS variables) are column-span, row-span, and column-count. */

/* 1) the properties that are set on the .block in the frontview, and on both .block and
 *.umb-block-grid__layout-item in the backoffice (because both elements are rendered there). */
.block,
.umb-block-grid__layout-item {
  position: relative;
}

/* 2) the properties which should only be set in the backoffice: */
.umb-block-grid__layout-item {
  /* The purpose of this min-height is only to make it easier to select the block for editing in the backoffice: */
  min-height: var(--pbk-bo-block-min-height, 0px); /*40px;*/
  /* In the backoffice the .umb-block-grid__layout-item represents the element which is the direct
   * child of the element with the display:flex style. This is the element which should receive item
   * specific flexbox styles, but the styles we assign from the block rendering end up on the <div class="block">
   * descendant element (after crossing a shadow DOM boundary). There is no possible way for us to
   * assign the styles we generate from properties on the child block element to the ancestor "*layout-item".
   *
   * But, we could at least assign the parent layout block's default child styles to the layout item using
   * CSS variables. The commented styles below are examples of that (to be implemented in the future):
   *
   * min-height: var(--default-child-min-height);
   * height: var(--default-child-height);
   *
   * In addition, the value of the "Default Child Height Sizing" property would also influence various
   * flex-* properties (see the code in the Column-/RowViewModel.AddToChildOuterBlockTagAttrs() method
   * for more. 5/31/2024. */
}

/* 3.a) These are default properties which we want to set on blocks within row layouts in the backoffice.
 * The selector is very specific here to avoid these properties being set on descendant blocks
 * (beyond the first child level). */
.umb-block-grid__area[slot="columns"] > ng-form > .umb-block-grid__layout-container > .umb-block-grid__layout-item,
umb-block-grid-entries:not([slot]) > ng-form > .umb-block-grid__layout-container > .umb-block-grid__layout-item {
  /* Note, the following properties correspond to Bootstrap 4 grid's col-x class (where x is a number from 2 to 12): */
  --pbk-col-width-pct: calc(100% * var(--umb-block-grid--item-column-span, 1) / var(--umb-block-grid--grid-columns));
  --pbk-width-percent: calc(var(--pbk-col-width-pct) - var(--pbk-gap-per-block));
  flex: var(--pbk-specific-flex, 0 1) var(--pbk-specific-width, var(--pbk-width-percent));
  /* We allow auto-shrink above to work around inaccurate percentage calculations due to CSS not
   * taking margins into consideration. Hmm, this might be incorrect, I'm not sure if flex-shrink handles it. */
}
/* 3.b) This is the same as above, but for rows. */
.umb-block-grid__area[slot="rows"] > ng-form > .umb-block-grid__layout-container > .umb-block-grid__layout-item {
  --pbk-width-percent: calc(var(--umb-block-grid--item-column-span, 1) / var(--umb-block-grid--grid-columns) * 100%);
  width: var(--pbk-specific-width, var(--pbk-width-percent));
}

/* 3.c) This style's purpose is avoid block contents overflowing any specific height given on the parent block
 * when the parent is a row layout block: */
.row-block > .blocks-container > .block {
  /* Clip overflowing child content, and display scrollbar if needed: */
  /* 6/25/2024: I have commented the overflow here, because we're trying it out for all image-blocks
   * (see .image-block rule further below).
  overflow-y: auto;
  */
  /* Don't let height grow beyond the height of the container: */
  max-height: 100%;
}

/* 3.d) This style's purpose is avoid block contents overflowing any specific height given on the ancestor blocks
 * when the parent is a column layout block. I haven't gotten to the bottom of exactly why, but just setting
 * overflow-y seems to solve the issue of an image growing too tall inside a column when the column is inside a row: */
.column-block > .blocks-container > .block {
  /* Clip overflowing child content, and display scrollbar if needed: */
  /* 6/25/2024: I have commented the overflow here, because we're trying it out for all .image-blocks
   * (see .block rule further below).
  overflow-y: auto;
  */
}

.image-block {
  /* 6/25/2024: we're trying out setting overflow-y for all image blocks. The immediate needs are 1) make
   * images display underneath any rounded borders of the immediate parent, and 2) don't let images
   * overflow the parent div vertically. Background: img elements behave differently than other elements
   * when their parent has overflow-y set. Img elements will resize themselves to fit within the container
   * causing no overflow (and no scrollbars). Other elements will not resize themselves, and cause
   * scrollbars to show up on the parent.
   *
   * NOTE: There's an issue in the backoffice seen on the PB Kit Row Test page where images are still
   * overflowing their parent container. I have not been able to fix this, but it has to do with a
   * max-height property set on the ancestor .block element (you'll find this style set a bit higher
   * up in this file. In the frontview this max-height is respected
   * by the ..., while in the backoffice is it not.
   */
  overflow-y: auto;
}

/* This is for <img> being the child of the .image-block element: */
.image-block > *,
/* This is for <img> being a grandchild of the .image-block element,
 * typically when the image is inside an <a> element. */
.image-block > * > img {
  /* Because we are by default emitting height and width attributes on the <img> element for SEO/UX
   * purposes, we must ensure we also have CSS styles for them. Otherwise those attributes would
   * become effective in the image display size. We set to auto here, and then override them as needed
   * from backoffice code or site specific styles. */

  /* 6/26/2024: I have commented out this here because it currently ends up having a higher priority than
   *            rules in styles-roboto.css and we don't want that. I'll place the styles into the appropriate
   *            place in _block-grid.css for now, and correct things when/if we implement css @layers later. */
  /*height: auto;
  width: auto;*/
}

/* 3.4) Properties which should only be set on the .block. The element for this style is
 * rendered by the block type's partial view (master layout) and shows up both in the frontview and
 * backoffice. */
.block {
  /* I don't think we want to have any minimum lengths defined here. We have other styles which handle
   * this in the backoffice, and we have content editor definable properties for the frontview. 6/28/2024. */
  /*min-height: 30px;*/
  /*min-width: 30px;*/

  /* Note, 5/2/2024: for the time being we will add the properties below directly on the element when
   * rendered inside the items.cshtml. We have more control there and can customize it better based
   * the block type (e.g. whether it's in a column or on a row). */
  /*
  [* Alignment of the block along the cross axis of the flexbox container: *]
  align-self: var(--pbk-align-self);
  [* Block size, growth, and shrinkage along the primary axis: *]
  flex-basis: var(--pbk-block-flex-basis);
  flex-grow: var(--pbk-block-flex-grow);
  flex-shrink: var(--pbk-block-flex-shrink);
  max-width: var(--pbk-block-max-width);
  max-height: var(--pbk-block-max-height);
  width: var(--pbk-block-width);
  height: var(--pbk-block-height);
  */
}

/* 4.) This rule will ensure the column's blocks are displayed vertically in the backoffice, when in Sort-mode.
 * The --pbk-flex-direction variable we set here is normally set on the .layout-row/-column elements,
 * but those elements aren't rendered when in backoffice sort-mode. */
.blockelement-gridsortblock-editor > div > slot[name="rows"] {
  --pbk-flex-direction: column;
}

.blockelement-gridsortblock-editor > div > slot[name="columns"] {
  --pbk-flex-direction: row;
}

/* 5) Properties which should only be set on the .block when the block is a content * block (and not
 * a layout block). The element for this style is rendered by the block type's partial view (master
 * layout) and shows up both in the frontview and backoffice. */
.content-block {
  /* We use a flexbox to control the size and alignment of the block's inner contents: */
  display: flex;
  /* Defaults (no need specify here):
  flex-direction: row;
  flex-wrap: nowrap;
  */
}

/* 6) Because the .block in the backoffice is rendered as a descendant of the .umb-block-grid__layout-item
 * we force its height to 100%, and we must do this to the elements in between the .umb-block-grid__layout-item
 * and the .bock as well. Having done this, background color and -image settings will use the full block height
 * (in the backoffice). */
:host > div.ng-scope > div.ng-scope,
:host > div.ng-scope > div.ng-scope > div.ng-scope,
:host .block {
  height: 100%;
}

/* The parent of the list of areas */

.areas-container {
  height: 100%;
}
.areas-container,
.umb-block-grid__block--view::part(area-container) {
  position: relative;
  display: flex;
  flex-direction: row;
}
.umb-block-grid__block--view::part(area-container) {
  column-gap: var(--umb-block-grid--areas-column-gap, 0);
  row-gap: var(--umb-block-grid--areas-row-gap, 0);
  min-height: var(--pbk-bo-area-min-height, 0px); /*50px;*/
  /*
  grid-template-columns: repeat(var(--umb-block-grid--area-grid-columns, var(--umb-block-grid--grid-columns, 1)), minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: minmax(50px, min-content);
  */
}

.layout-block {
  /* This is to ensure the blocks-container uses the full height of the parent row-block when there's
   * a min-height on the row-block (height: 100% doesn't help when there's only a min-height and not also
   * a height on the parent. */
  display: flex;
}
.layout-block > .blocks-container,
.umb-block-grid__block--view::part(area-container) {
  /* This is to ensure the blocks-container uses the full height of the parent row-block when there's
   * a min-height on the row-block (height: 100% doesn't help when there's only a min-height and not also
   * a height on the parent. */
  flex-grow: 1;
}
.umb-block-grid__layout-container {
  height: 100%;
}


/* #region **** Layout block defaults **** */

.layout-block {
  --pbk-justify-content: normal;
  --pbk-align-items: normal;
  --pbk-align-content: normal;
}

.row-block {
  --pbk-flex-direction: row;
}
.column-block {
  --pbk-flex-direction: column;
}

/* #endregion **** Layout block defaults **** */

/* The .areas-container in the backoffice does not by default get the height of it .block parent.
 * Setting the height to 100% doesn't work because there's no ancestor element with a specific height
 * set. The issue causes the areas to not have the correct height, and that again causes each area's
 * child blocks to also not have the correct height. The work around is to change the parent .block's
 * display to flex, and set flex-grow to 1 on the child .area-container element: */
/*:host .row-block {
  display: flex;
}
.umb-block-grid__block--view::part(area-container) {
  flex-grow: 1;
}*/

/* Just trial-and-error stuff....

::slotted(.umb-block-grid__area) {
  background: pink;
}

.hero-layout .umb-block-grid__area {
  background: magenta;
}

slot .umb-block-grid__block--view::part(rich-text-block) {
  [*.umb-block-grid__area .umb-block-grid__block--view::part(rich-text-block) {*]
  [*.umb-block-grid__block .umb-block-grid__block--view::part(rich-text-block) {*]
  [.umb-block-grid__block--view::part(rich-text-block) {*]
  [*.umb-block-grid__area::part(rich-text-block) {*]
  background: yellow;
}

[*.umb-block-grid__block--view .umb-block-grid__area {*]
[*.umb-block-grid__layout-item .umb-block-grid__area {*]
.umb-block-grid__area .umb-block-grid__area {
  background: bisque;
}
*/

/* The parent of an individual area, and the grandparent of the list of blocks. In the
 * frontview it's rendered by the area.cshtml. */
/*.area,*/
.umb-block-grid__area {
  --pbk-width-percent: calc(var(--umb-block-grid--area-column-span, 1) / var(--umb-block-grid--area-grid-columns) * 100%);
  position: relative;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: var(--pbk-width-percent);
  max-width: var(--pbk-width-percent);
  width: 100%;
  /* TODO: These are Bootstrap defaults, consider moving them to CSS variables.
   * 6/3/2026: I have disabled them for now. */
  /*padding-left: 15px;
  padding-right: 15px;*/
}

/* #endregion ==== Layout Blocks ==== */


/* #region ==== Content Blocks ==== */

/*
  In the "Common Block Settings" block we have a Contrast property and in the CommonBlockSettings
  class we look for the value of this property. If it's equal to ffffff, then we add the
  "bright-contrast" attribute to the ".block" element.
*/
.block[bright-contrast='off'] {
  color: var(--pbk-font-color);
}

.block[bright-contrast='on'] {
  color: white;
  /* See call-to-action region for more on this:*/
  --my-bright-contrast:;
}

/* #endregion ==== Content Blocks ==== */

/* NOTE: We previously had website specific styles listed below this comment. These styles have
 * been moved to \wwwroot\src\scss\langlo\_block-grid.css and are included in the build process.
 * 5/29/2024.
 */