/*
Purpose: Extend the global Gray Iris visual system with shared media presentation.
Inputs: Photo grids, dialogs, Album grouping, media choices, and future public gallery surfaces.
Outputs: Site-wide reusable media presentation rules.
Requirements: grayiris.css must load before this file.
Goal: Keep media presentation globally reusable across every Gray Iris surface.
Section: Shared presentation extension.
*/

/*
Section: Shared Photo presentation.
Used by Administration now and future public gallery surfaces.
*/

.photo-browser{
margin-bottom:24px;
}

.photo-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
gap:4px;
}

.photo-grid-item{
display:block;
position:relative;
width:100%;
padding:0;
overflow:hidden;
aspect-ratio:1;
border:0;
background:var(--border);
cursor:pointer;
}

.photo-grid-item img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}

.photo-dialog{
width:min(980px,94vw);
max-height:92vh;
padding:0;
overflow:hidden;
border:1px solid var(--border);
border-radius:18px;
background:var(--surface);
color:var(--text);
}

.photo-dialog::backdrop{
background:rgba(0,0,0,0.72);
}

.photo-dialog-shell{
position:relative;
display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(320px,0.8fr);
max-height:92vh;
}

.photo-dialog-close{
position:absolute;
z-index:2;
top:10px;
right:10px;
width:38px;
height:38px;
border:1px solid var(--border);
border-radius:50%;
background:var(--surface);
color:var(--text);
cursor:pointer;
font:inherit;
font-size:1.4rem;
line-height:1;
}

.photo-dialog-media{
display:grid;
place-items:center;
min-width:0;
min-height:360px;
background:#111;
}

.photo-dialog-media img{
display:block;
max-width:100%;
max-height:92vh;
object-fit:contain;
}

.photo-dialog-content{
min-width:0;
overflow-y:auto;
padding:24px;
}

.photo-admin-panel{
min-width:0;
}

.photo-admin-panel h2{
overflow-wrap:anywhere;
}

.photo-upload-card{
margin-top:24px;
}

.date-field-shell input[type="datetime-local"]{
display:block;
inline-size:100%;
width:100%;
min-inline-size:0;
min-width:0;
max-inline-size:100%;
max-width:100%;
margin:0;
padding:13px 14px;
border:0;
border-radius:0;
background:transparent;
box-sizing:border-box;
-webkit-appearance:none;
appearance:none;
}

@media (max-width:650px){
.photo-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:3px;
}

.photo-dialog{
width:96vw;
max-height:94vh;
}

.photo-dialog-shell{
display:block;
max-height:94vh;
overflow-y:auto;
}

.photo-dialog-media{
min-height:0;
}

.photo-dialog-media img{
width:100%;
max-height:58vh;
}

.photo-dialog-content{
overflow:visible;
padding:18px;
}
}

.feature-card .photo-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
margin-top:14px;
}

/*
Section: Shared Photo Album presentation.
Used anywhere Gray Iris groups Photos into Albums.
*/

.photo-album-browser{
display:grid;
gap:18px;
margin-bottom:28px;
}

.photo-album-section{
overflow:hidden;
background:var(--surface);
border:1px solid var(--border);
border-radius:18px;
box-shadow:var(--shadow);
}

.photo-album-summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:18px 20px;
cursor:pointer;
list-style:none;
}

.photo-album-summary::-webkit-details-marker{
display:none;
}

.photo-album-summary > span:first-child{
display:grid;
gap:3px;
}

.photo-album-content{
padding:0 20px 20px;
}

.album-choice-fieldset{
min-width:0;
margin:0;
padding:0;
border:0;
}

.album-choice-fieldset legend{
margin-bottom:8px;
font-size:0.9rem;
font-weight:600;
}

.album-choice-list{
display:grid;
gap:8px;
}

.album-choice,
.form-stack label.album-choice{
display:flex;
align-items:center;
grid-template-columns:none;
gap:9px;
font-weight:500;
}

.album-choice input,
.form-stack label.album-choice input{
flex:0 0 auto;
width:20px;
height:20px;
min-width:20px;
padding:0;
border:0;
border-radius:0;
background:transparent;
accent-color:var(--accent);
}

.album-choice span{
display:block;
min-width:0;
}

@media (max-width:650px){
.photo-album-summary{
padding:16px;
}

.photo-album-content{
padding:0 16px 16px;
}
}


/*
Shared Photo publication-state presentation.
The checkbox represents persistent Photo publication state.
*/
.photo-publication-toolbar{
display:flex;
align-items:center;
gap:14px;
flex-wrap:wrap;
margin:0 0 24px;
}

.photo-publication-toolbar .muted{
font-size:0.9rem;
}

.photo-grid-publish-shell{
position:relative;
width:100%;
min-width:0;
overflow:hidden;
aspect-ratio:1;
background:var(--border);
}

.photo-grid-publish-shell > .photo-grid-item{
width:100%;
height:100%;
aspect-ratio:auto;
}

.photo-publication-choice{
position:absolute;
z-index:4;
top:8px;
left:8px;
display:block;
width:30px;
height:30px;
margin:0;
padding:0;
cursor:pointer;
}

.photo-publication-choice input{
display:block;
width:30px;
height:30px;
margin:0;
padding:0;
cursor:pointer;
accent-color:var(--accent);
}

@media (max-width:650px){
.photo-publication-toolbar{
align-items:flex-start;
flex-direction:column;
}

.photo-publication-toolbar .primary-button{
width:100%;
}

.photo-publication-choice{
top:6px;
left:6px;
width:28px;
height:28px;
}

.photo-publication-choice input{
width:28px;
height:28px;
}
}