/* ==========================================================================
   PORTFOLIO — editorial "story" layout
   Used by Views/Portfolio/Index.cshtml and Views/Portfolio/Album.cshtml.
   Colours deliberately match the gallery page so the whole dark side of
   the site looks like one piece of work.
   ========================================================================== */

.pf_wrap { width:100%; float:left; clear:both; height:auto; background-color:#121212; }
.pf_in   { width:100%; float:left; clear:both; height:auto;
           padding:0 80px 90px 80px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;
           box-sizing:border-box; }

/* --- shared bits ---------------------------------------------------------- */
.pf_eyebrow { display:inline-block; font-size:10px; letter-spacing:5px; text-transform:uppercase;
              color:rgba(255,255,255,0.45); }
.pf_eyebrow.accent { color:#9db9d2; }

/* Fades each block up into place as it scrolls into view.
   Without JavaScript everything simply stays visible. */
.pf_reveal { opacity:0; transform:translateY(38px);
             transition:opacity .9s cubic-bezier(.16,1,.3,1),
                        transform .9s cubic-bezier(.16,1,.3,1); }
.pf_reveal.shown { opacity:1; transform:none; }

/* --- intro ---------------------------------------------------------------- */
.pf_intro { padding:110px 0 70px 0; border-bottom:1px solid rgba(255,255,255,0.10); }
/* Script headings keep their natural single weight and need room for their
   loops — hence the taller line-height and no negative letter-spacing. */
.pf_intro h1 { margin:26px 0 0 0; font-size:64px; line-height:1.1; letter-spacing:0;
               font-weight:400; color:#fff; max-width:18ch; }
.pf_intro h1 em { font-style:normal; color:#9db9d2; }
.pf_intro p { margin:30px 0 0 0; max-width:56ch; font-size:16px; line-height:1.75; color:#93a7b8; }

/* --- section bar ---------------------------------------------------------- */
.pf_bar { display:flex; align-items:baseline; justify-content:space-between;
          flex-wrap:wrap; gap:14px 20px; padding:56px 0 12px 0; }
.pf_bar h2 { margin:0; font-size:42px; font-weight:400; letter-spacing:0; color:#fff; }

/* --- one album row -------------------------------------------------------- */
.pf_row { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:70px;
          border-top:1px solid rgba(255,255,255,0.10); padding:80px 0; }
.pf_row.flip .pf_row_img  { order:2; }
.pf_row.flip .pf_row_text { order:1; }

.pf_row_img { position:relative; display:block; overflow:hidden; background:#161d24; }
.pf_row_img img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover;
                  transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.pf_row:hover .pf_row_img img { transform:scale(1.05); }
.pf_row_no { position:absolute; top:0; left:0; padding:12px 18px;
             font-size:11px; letter-spacing:4px; color:#fff;
             background:rgba(18,18,18,0.72); backdrop-filter:blur(6px);
             -webkit-backdrop-filter:blur(6px); }
.pf_blank { display:flex; align-items:center; justify-content:center; aspect-ratio:4/5;
            font-size:10px; letter-spacing:3px; text-transform:uppercase;
            color:rgba(255,255,255,0.25); }

.pf_meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 22px; }
.pf_row_text h3 { margin:22px 0 0 0; font-size:44px; line-height:1.1; letter-spacing:0;
                  font-weight:400; color:#fff; }
.pf_row_text p  { margin:24px 0 0 0; max-width:46ch; font-size:15px; line-height:1.8;
                  color:#93a7b8; }

.pf_link { display:inline-flex; align-items:center; gap:12px; margin-top:34px; padding-bottom:6px;
           font-size:10px; letter-spacing:3px; text-transform:uppercase; text-decoration:none;
           color:#9db9d2; border-bottom:1px solid #9db9d2;
           transition:gap .3s ease, color .3s ease, border-color .3s ease; }
.pf_link:hover { gap:22px; color:#fff; border-bottom-color:#fff; }
.pf_note { display:block; margin-top:18px; font-size:10px; letter-spacing:2px;
           color:rgba(255,255,255,0.30); }

/* --- empty state ---------------------------------------------------------- */
.pf_empty { border-top:1px solid rgba(255,255,255,0.10); padding:90px 0; text-align:center; }
.pf_empty p { margin:0 0 10px 0; font-size:14px; letter-spacing:1px; color:rgba(255,255,255,0.55); }
.pf_empty span { font-size:11px; letter-spacing:2px; color:rgba(255,255,255,0.28); }

/* --- album page: split hero ----------------------------------------------- */
.pf_hero { display:grid; grid-template-columns:1fr 1fr;
           border-bottom:1px solid rgba(255,255,255,0.10); }
.pf_hero_img { overflow:hidden; background:#161d24; min-height:460px; }
.pf_hero_img img { display:block; width:100%; height:100%; object-fit:cover;
                   animation:pf_slowzoom 1.6s cubic-bezier(.16,1,.3,1) both; }
@keyframes pf_slowzoom { from { transform:scale(1.08); } to { transform:none; } }
.pf_hero_blank { display:flex; align-items:center; justify-content:center; height:100%;
                 min-height:460px; font-size:10px; letter-spacing:3px; text-transform:uppercase;
                 color:rgba(255,255,255,0.25); }

.pf_hero_text { display:flex; flex-direction:column; justify-content:center;
                padding:80px 70px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;
                box-sizing:border-box; }
.pf_back { align-self:flex-start; font-size:10px; letter-spacing:3px; text-transform:uppercase;
           color:rgba(255,255,255,0.45); text-decoration:none; transition:color .3s ease; }
.pf_back:hover { color:#9db9d2; }
.pf_hero_text h1 { margin:34px 0 0 0; font-size:64px; line-height:1.1; letter-spacing:0;
                   font-weight:400; color:#fff; }
.pf_facts { display:grid; grid-template-columns:1fr 1fr; gap:24px 20px; margin:40px 0 0 0;
            padding:28px 0; border-top:1px solid rgba(255,255,255,0.10);
            border-bottom:1px solid rgba(255,255,255,0.10); }
.pf_facts dt { margin:0; font-size:10px; letter-spacing:4px; text-transform:uppercase;
               color:rgba(255,255,255,0.45); }
.pf_facts dd { margin:8px 0 0 0; font-size:14px; color:#fff; }
.pf_hero_text > p { margin:26px 0 0 0; max-width:48ch; font-size:15px; line-height:1.8;
                    color:#93a7b8; }

/* --- album page: the photo grid ------------------------------------------- */
/* align-items:start keeps every photo at its own natural shape — nothing is
   cropped, so tall and wide shots can sit side by side. */
.pf_grid { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:22px;
           margin-top:44px; }
.pf_frame { overflow:hidden; background:#161d24; }
.pf_frame.wide { grid-column:1 / -1; }
.pf_frame a { display:block; }
.pf_frame img { display:block; width:100%; height:auto;
                transition:transform 1.4s cubic-bezier(.16,1,.3,1); }
.pf_frame:hover img { transform:scale(1.03); }

/* --- album page: more albums ---------------------------------------------- */
.pf_more { border-top:1px solid rgba(255,255,255,0.10); margin-top:80px; padding-top:64px; }
.pf_more_grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:32px; }
.pf_more_card { display:block; text-decoration:none; }
.pf_more_card .shot { overflow:hidden; background:#161d24; aspect-ratio:3/2; }
.pf_more_card img { display:block; width:100%; height:100%; object-fit:cover;
                    transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.pf_more_card:hover img { transform:scale(1.05); }
.pf_more_card h4 { margin:16px 0 0 0; font-size:28px; font-weight:400; color:#fff; }
.pf_more_card span { display:block; margin-top:6px; font-size:10px; letter-spacing:3px;
                     text-transform:uppercase; color:rgba(255,255,255,0.35); }

/* --- responsive ----------------------------------------------------------- */
@media (max-width:1200px) {
  .pf_in { padding:0 50px 70px 50px; }
  .pf_intro { padding:80px 0 56px 0; }
  .pf_intro h1 { font-size:56px; }
  .pf_row { gap:46px; padding:64px 0; }
  .pf_row_text h3 { font-size:40px; }
  .pf_hero_text { padding:60px 46px; }
  .pf_hero_text h1 { font-size:52px; }
}

@media (max-width:900px) {
  .pf_hero { grid-template-columns:1fr; }
  .pf_hero_img { min-height:0; aspect-ratio:4/3; }
  .pf_hero_blank { min-height:0; aspect-ratio:4/3; }
  .pf_more_grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:767px) {
  .pf_in { padding:0 24px 60px 24px; }
  .pf_intro { padding:56px 0 40px 0; }
  .pf_intro h1 { font-size:42px; }
  .pf_intro p { font-size:15px; margin-top:22px; }
  .pf_bar { padding:36px 0 4px 0; }
  .pf_bar h2 { font-size:32px; }
  .pf_row { grid-template-columns:1fr; gap:26px; padding:46px 0; }
  /* on a phone the photo always comes first, whichever side it sits on */
  .pf_row.flip .pf_row_img,
  .pf_row.flip .pf_row_text { order:0; }
  .pf_row_text h3 { font-size:34px; margin-top:18px; }
  .pf_row_text p { margin-top:18px; }
  .pf_link { margin-top:26px; }
  .pf_hero_text { padding:44px 24px; }
  .pf_hero_text h1 { font-size:42px; margin-top:26px; }
  .pf_facts { gap:18px; margin-top:30px; padding:22px 0; }
  .pf_grid { grid-template-columns:1fr; gap:14px; margin-top:30px; }
  .pf_frame.wide { grid-column:auto; }
  .pf_more { margin-top:56px; padding-top:46px; }
  .pf_more_grid { grid-template-columns:1fr; gap:22px; }
}

/* Visitors who ask their device for less motion get the layout, not the movement. */
@media (prefers-reduced-motion: reduce) {
  .pf_reveal { opacity:1; transform:none; transition:none; }
  .pf_hero_img img { animation:none; }
  .pf_row_img img,
  .pf_frame img,
  .pf_more_card img { transition:none; }
  .pf_row:hover .pf_row_img img,
  .pf_frame:hover img,
  .pf_more_card:hover img { transform:none; }
}

/* Placeholder shown when an album has no cover photo yet. */
.pf_blank{aspect-ratio:3/2;}