:root {
  
  --host-pattern-line: #E8E4C2;
  --host-ph-ink: color-mix(in srgb, var(--pmc-text) 45%, transparent);
  --host-ph-fill: color-mix(in srgb, var(--pmc-text) 10%, transparent);
}

html {
  background: var(--pmc-surface-raised);
}

html[dir] body.host {
  margin: 0;
  
  font-family: var(--pmc-font-latin);
  font-size: var(--pmc-text-h6);
  line-height: var(--pmc-leading-base);
  color: var(--pmc-text);
  
  background-color: var(--pmc-surface-raised);
  background-image:
    repeating-linear-gradient(45deg, transparent 0 46px, var(--host-pattern-line) 46px 49px),   
    repeating-linear-gradient(-45deg, transparent 0 46px, var(--host-pattern-line) 46px 49px);
  background-attachment: fixed;
}




.demo-banner {
  padding: var(--pmc-space-2) var(--pmc-space-3);
  background: var(--pmc-text);
  color: var(--pmc-color-white);
  text-align: center;
}

.demo-banner p {
  max-inline-size: 72ch;
  margin: var(--pmc-space-1) auto;
}

.demo-banner [lang="ar"] {
  font-family: var(--pmc-font-arabic);
  font-size: 1.15em;                 
}

.demo-banner a {
  color: inherit;
}



.ph {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  outline: 1px dashed var(--host-ph-ink);   
  outline-offset: -1px;
  color: color-mix(in srgb, var(--pmc-text) 70%, transparent);
}

.ph--dark {
  outline-color: color-mix(in srgb, var(--pmc-on-inverse) 60%, transparent);
  background: var(--pmc-color-primary);
  color: var(--pmc-on-inverse);
}

.ph-label {
  padding: var(--pmc-space-1) var(--pmc-space-2);
  font-size: var(--pmc-text-meta);
}

.ph-title {
  font-size: var(--pmc-text-h2);
  line-height: var(--pmc-leading-h2);
  color: var(--pmc-text-heading);
}

.ph-heading {
  margin-block: var(--pmc-space-3) var(--pmc-space-2);
  font-size: var(--pmc-text-h3);
  line-height: var(--pmc-leading-h3);
  color: var(--pmc-text-heading);
}


.ph-text {
  display: grid;
  gap: 14px;                         
  margin-block: 0 var(--pmc-space-4);
  padding-block: 7px;                
}

.ph-text i {
  display: block;
  block-size: 10px;                  
  border-radius: var(--pmc-radius-xs);
  background: var(--host-ph-fill);
}

.ph-text i:last-child {
  inline-size: 62%;
}

.host-separator {
  max-inline-size: var(--pmc-space-9);   
  margin: var(--pmc-space-5) auto;
  border: 0;
  border-block-end: var(--pmc-border-width) solid var(--pmc-text);
}



.host-band { block-size: 128px; }    
.host-nav { block-size: 54px; }      
.host-footer { block-size: 107px; }  



.host-container {
  display: flex;
  flex-wrap: wrap;
  max-inline-size: var(--pmc-container-max);
  margin-inline: auto;
}

.host-col {
  box-sizing: border-box;
  padding: var(--pmc-container-padding);
}

.host-col--rail { inline-size: var(--pmc-col-rail); }
.host-col--main { inline-size: var(--pmc-col-main); }
.host-col--content { inline-size: 66.666%; }   
.host-col--aside { inline-size: 33.333%; }     
.host-col--full { inline-size: 100%; }

.host-title-section { padding-block: var(--pmc-space-4); }

.host-col--main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pmc-space-1); }
.ph--logo { inline-size: 120px; block-size: 124px; border-radius: var(--pmc-radius-full); }  
.ph--crumb { inline-size: 220px; block-size: 22px; }  
.host-spacer { block-size: var(--pmc-space-8); }
.host-body-section { padding-block-end: var(--pmc-space-8); }
.host-wide-section { padding-block-end: var(--pmc-space-8); }

.host-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pmc-space-2);
  margin-block: var(--pmc-space-4);
}

.ph--button {
  min-inline-size: 180px;            
  block-size: 46px;                  
  border-radius: var(--pmc-radius-pill);
  background: var(--pmc-color-form-ink);
  color: var(--pmc-color-white);
  outline: 0;
}

.ph--video {
  aspect-ratio: 16 / 9;
  margin-block-start: var(--pmc-space-7);
  background: var(--host-ph-fill);
}

.host-gallery-section { margin-block-end: var(--pmc-space-9); }

.host-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--pmc-space-3);
}

.ph--tile {
  block-size: 300px;                 
  border-radius: var(--pmc-radius-lg);
  background: var(--host-ph-fill);
}


.pmc-portal-embed {
  margin-block: var(--pmc-space-4);
}



@media (max-width: 767px) {   
  .host-band { block-size: 107px; }  
  .host-nav { block-size: 107px; }   
  .host-footer { block-size: 75px; } 
  .host-col--rail, .host-col--main, .host-col--content, .host-col--aside, .host-col--full { inline-size: 100%; }
  .host-col--rail { display: flex; justify-content: center; }
  .host-col--main { align-items: center; text-align: center; }
  .ph--crumb { display: none; }   
  .ph--logo { inline-size: 122px; block-size: 128px; }  
  .host-col--aside { display: none; }
  .host-gallery { grid-template-columns: repeat(2, 1fr); }
  .ph--tile { block-size: 150px; }  
}



.demo-controls {
  position: fixed;
  inset-block-end: var(--pmc-space-2);
  inset-inline-end: var(--pmc-space-2);
  z-index: 10;
  max-inline-size: min(420px, calc(100vw - 2 * var(--pmc-space-2)));  
  box-sizing: border-box;
  padding: var(--pmc-space-2) var(--pmc-space-3);
  border-radius: var(--pmc-radius-sm);
  background: var(--pmc-surface);
  box-shadow: var(--pmc-shadow-media);
  font-family: var(--pmc-font-latin);
  font-size: var(--pmc-text-meta);
  line-height: var(--pmc-leading-base);
}

.demo-controls summary {
  cursor: pointer;
  font-weight: 700;
}

.demo-controls p {
  margin: var(--pmc-space-1) 0;
}

.demo-controls code {
  overflow-wrap: anywhere;
  font-family: var(--pmc-font-mono);
}

.demo-controls a[aria-current="page"] {
  font-weight: 700;
  text-decoration: none;
  color: var(--pmc-text);
}